offsky / ade Goto Github PK

The icon, url, email, phone directives require that there be a container div in the html view. Is it possible to do it without the container div? The date and time directives are able to make a popup without a container and it would be nice if it was consistent.

We need a way to distinguish when someone is clicking on a phone number if they want to call it, or editing that number.

When clicking on a phone number, it should present a popup with two buttons (Call XYZ) and (Edit XYZ). Each button should preform the intended action. Pressing ESC or clicking outside of the popup should dismiss it.

It looks like you modified angular-sanitize to get the phone directive to work. This will be hard to maintain as angular updates in the future. Can you please pull this change out into our code?

Using our Date editor as a template, lets use this library to make an editor for "time".

http://jdewit.github.com/bootstrap-timepicker/

When editing an email address, it puts "mailto" in front of the email address being edited. It would be better to omit this when editing and save it to the model without the mailto. The "mailto" prefix should only be in the auto-generated link.

Same goes for telephone

I tried putting the rating directive on a non-white background and noticed that the way the image is made, it is causing a problem. I think we need to re-do the way this directive works so that instead of using a cookie-cutter image with a background color, we would instead use two regular images of a star on and off.

Step1 is to make the disabled tests pass.

We should also provide some sort of popup help for what is a valid input. Perhaps while they are typing into the text box, a popup attached to the input could appear that says "examples: 35min, 2hours, 4 hours 30 minutes"

The field that you click to activate the rich text popup should show the first line of text, without any HTML formatting, just raw text.

If you delete the entire contents of a rich text field and save, it will still show the old data.

There are some event listeners on "body" that look for clicks or keyboard events when editing. They are in the following directives:

Icon
phone
email
url
time

The problem is that they are always listening, even when the popup is not showing. This is causing integration problems where the ADE events are triggering constantly whenever a click or keyboard event happens on the page even if the ADE directive is not activated.

At the minimum we need to only execute the event handler if that edit is in edit mode. A better solution would be to find a way to avoid putting events on "body" if possible. Perhaps this could be done by having an invisible input that has focus and then watching for the blur event on this input. Not sure if this will work.

The calendar should highlight today's date with a light grey color.

This will be similar to how checkbox/star work, except that instead of toggling between two states, it presents a popup window where you can pick from a selection of icons. For now, we can use the entire Glyphicons set that is already available as part of Twitter Bootstrap.

We forgot to provide a way for someone to set a rating of 0 (no stars). Can we add an invisible 10 pixel clickable region in front of the first star that you can click to set it to 0?

When the "ade-timepop" directive is used directly on an input and you make a change, it does not update the model. You can see this on our demo page. "updateModel" is not being called.

So you can start typing without using mouse

When the user is done editing a list value, I call "input.select2('destroy')" to remove it.

https://github.com/Toodledo/ADE/blob/master/app/list/list_directives.js#L54

This works fine the first time, but for some reason that I have not dug into, it produces a console error the second time you edit and destroy the select2 widget.

1. Click to activate rich text
2. Click another field to activate a second rich text
3. Can no longer click outside to deactivate the editor

We need a way to distinguish when someone is clicking on a email if they want to send the email, or editing that email.

When clicking on an email, it should present a popup with two buttons (Email XYZ) and (Edit XYZ). Each button should preform the intended action. Pressing ESC or clicking outside of the popup should dismiss it.

When you click the X to clear a value from the single list picker, it should also dismiss the popup, as it does when you select an item from the list.

The "List" directive needs to set the value of the select2 popup with the model's data.

I am attempting to do this with the "input.select2("val", value);" line,
https://github.com/Toodledo/ADE/blob/master/app/list/list_directives.js#L85

But it isn't working. Im not sure if this is implemented in the angular-ui directive that interfaces with the select2 library.

Angular UI has already made some progress in this area.

http://angular-ui.github.com

Similar to how Google Docs does it, we need a way to distinguish when someone is clicking on a URL if they are traveling to that page, or editing that URL.

When clicking on a URL, it should present a popup with two buttons (Visit XYZ) and (Edit XYZ). Each button should preform the intended action. Pressing ESC or clicking outside of the popup should dismiss it.

There appears to be an issue with the time unit test

expect(timeFilter(1355517820)).toBe('2:43 pm');

I keep changing it to 12:43 to get it to pass, and you keep changing it to 2:43. Maybe there is a timezone issue? We should resolve this so that it works regardless of the timezone.

Now that we have experience with popups, I think this one will be easy. We need an editor for "long text".

Filter: The filter will take a piece of arbitrarily long text and truncate it to a specified length with ellipses. Mousing over the text (with a delay) will display the entire text in a popup.

Directive: Clicking on the text, or the popup will enter edit mode, which will be a textarea input inside a popup. Clicking outside the popup or pressing tab will save and clicking esc will cancel. Pressing return will insert a new line in the textarea, not save the results.

For now, lets just do plain text, but eventually we will want to support rich text via markdown or a wysiwyg toolbar (haven't decided yet)

This one won't turn into an input box. Instead it will turn the integer raw data into 0-5 filled in stars (like you have already done for the filter), but we need to expand it to respond to clicks. When you click on a star is should update the display and trigger the update event like we do on the other fields.

We need at least one e2e test for each directive that tests a round trip through the edit process.

The CSS and images from star, rating, icon need to be combined into one css file and image folder and put into the common directory at the top level.

ESC needs to cancel the edit
TAB needs to either insert a tab or blur and save the input. Preferably blur and save.

If you use the 24 hour time option and try to edit a time that is displayed as "15:00" it will open the time picker with "3:00" selected

On the multi-select list, you can type in a new custom value that isn't in the existing list, and it will add it just fine. However, if you then try to type a second new custom value in the same box, it will fail.

If you have two URL directives on the same page, and you show the popup by clicking on one of them, and then click on a different url, it should close the first popup and then show the second popup. Instead it is showing both popups briefly and them closing both.

Please check out the ADE page for longtext. I have created two instances of the directive. If you try to edit one and then another and then go back and edit the first, it stops working.

When clicking the x on one of the options selected in the "Pick Multiple" list, there is a console error (it appears to work in spite of the error)

The icon filter needs to handle invalid inputs. If you pass a number, boolean or a string for an icon that doesnt exist, it should detect this and display _clear instead.

I create a unit test for this already. Just need to activate it and get it to pass.

We have a popup calendar and a popup time picker. We need to combine them for the date+time picker. Lets start by stacking them vertically. So calendar on the top with the time picker below.

The following events need to be properly handled

esc: cancels the edit and returns to the read mode.

tab: In single picker mode, it should save and return to read mode. In multi picker mode it should set the value and allow entry of another value,

return: Should save and return to read mode

shift+tab, shift+return: same as above but register the shift key for the exit messages

click outside: save and return to edit mode

click on option in select2 menu: In single picker mode, save and return to read mode. In multi picker mode, set value and keep open for selecting more values.

The tab key should highlight a rich text field and show its read-only popup. Pressing the return key should enter edit mode.

There appears to be a conflict with the url/phone/email field editors when there are multiple versions of them on the same page. Take a look at the ADE index.html page to see what happens. When you try to edit the url, it edits the phone instead.

This is using a compiled version of the ADE library that you can regenerated if needed by using the scripts/compile.html file. It uses the latest files from github, so you may need to modify the compile function if you need to test with your uncommited changes.

Both checkbox and star should function identically with the exception being the image that is swapped out for the two states.