Closed everbeek closed 9 years ago
Looking at button stylings...
It appears that in order to affect actual SVG properties with CSS, it must be enoded into the JS or HTML source (or CSS), and cannot be referred to by a URL. there is a trick to deal with IMG tags and SVG URLs, so maybe there is a similar one for background-image CSS URLs (like I am using). That is enough acronyms for the day.
it doesn't seem like it. I will put off making the SVG buttons glow for now, since the fact they are icons will offer affordance. They do have the mouse cursor change on hover though.
The tour step misplacement problem stems from commit eb7be1e. Fixing that before I look into the mode and tour problems I saw when Peggy was demoing it.
Although that is the commit at which the bug appears, I found that when I comment out the code that attaches the draggable SVG to the tour step popup, things resolve. So the changes in that commit interacted with the draggable stuff somehow? None of the changes in that commit look suspicious to me. This draggable thing is a good starting point.
I am not sure why it didn't show up in an earlier commit, but the critical piece of code is when the popup is made draggable via the JQuery-UI library. I often distrust this library, and was surprised when it didn't break anything for me. I am not sure whether I am relieved to be supported in my suspicions, or disappointed again. Anyway, I will figure it out.
Oh, it was simply the library overwriting the position absolute to relative, when it didn't seem to need to in order to function.
The problem that Peggy discovered was due to the binding of target elements at tour definition time. If the elements in the graph are removed (as in a mode change) then there is no valid object ot attach the tour to. I had originally wanted a library that supported functions to get target, because I anticipated this need. It clearly slipped past me that I still needed it. I implemented it in Intro.js to fix this problem. In the process, I learned more about Javascript scoping. A function I was attaching to objects getting shoved into a queue was getting...retrograde attached to elements already in the queue. I investigated it thoroughly, and although I don't understand why it was happening, I understand the pattern of behavior. Although the functions I was attaching were not working out, the properties of the objects were fine...maybe because they cam in pre-assigned? Anyway, to fix it, I had to take my code for attaching the function, and put it in a separate function.
Here is a collection of feedback on the Tour mechanism, the UI in general, and some things I found.
Tour related:
The tour titled Node Details: the red box extends outside of my screen area.[replicated in Firefox, fixed]in IE, locks up after the Node Details tour step[fixed]in IE, small error in positioning of red box on filter steps. Replicated, it only happens on a second time through a tour, and is a temporary z-index problem, it seems. Not worth fixing.[nofix]The Skip and Done buttons in the tour are always greyed out, but seem functional. Can you make them black to infer their usefulness?[fixed]"Skip" tour -> "Stop" tour[fixed]"Node Expansion Menu" step is interfered with by the red box. When the mouse travels over the lines, it triggers mouseOut and the menu disappears. Fix that somehow.[fixed]the Undo drop down menu has its z-index modified somehow during the "Undo/Redo" tour step. It is fine before or after, but during the step, the drop down seems to hide behind the SVG panel. It only gets stuck behind once we have stepped past the Undo tour step, and gets fixed only if we move backwards from that step.[fixed]the node tooltips get hidden behind the tour window, as does the node cap dialog, and node submenus. If the tour window was draggable, it might help. Making everything else draggable is more work, and not future friendly.[fixed, icon needs resizing as per #518]on first tour step, can we have a refresh button embedded?[fixed]for hidden node tour item, ""If some are hidden..."[Cassie must have modified]"at another" -> "at an earlier step in this tour"[Cassie must have modified]add extra steps describing the three graph modes[fixed]revise the Export Import tour item. It is unclear what the user is supposed to do.[fix attempted]check to make sure the tour functions if we have changed modes. Something buggy happened during the demo with Peggy. Also, while fixing one of these, I made a change that disrupted tour box placement. Fix that first in case it predated showing Peggy the changes.[fixed]General UI:
make Menu, Tour, and all buttons indicate affordance better; at least have mouse over changes, but also make buttons into the button type (as seen in the Sharing tab), or use some sort of CSS for them that shows they are buttons and not simply labels.[fixed]get rid of the box around the node import button, and center it better (see above one about affordances)[fixed]create busy indicator (mouse cursor perhaps). Is there a good way to indicate "Processing Nodes" and "Querying Database"?[#514]the cap dialog appeared to not close after responding to it to add 20, when there were many more left[#517]the node cap dialog seems to take a long time to come up even for low numbers of added nodes. Why?[#517]676 node expansion dialog cap slowed down, seemed to freeze browser. Why?[#517]for the node cap...text saying how many to add should be hidden until it is greater than 20...that isn't the solution though. It is as though I need a progress indicator for the count (the 17). and to rephrase it to be: Add up to x nodes 20 of 17 [progress meter] available.[#517]