Design update

JT17

Jay - good stuff. Two things:

Will this flow through to the Windows desktop app?
When hovering over the expand/collapse icon, it shows the “hand” icon - would have expected the “pointer” icon there

Jay

Yes, in the Windows app you can press the Alt key to show the menu and select Use Beta Version from the File menu.
It’s a hand because you can start a drag from the left side of an item. There’s not enough space to put a drag icon, so I thought that would be at least some indication. Or what else do you think we could do to make that clear?

Jorge

Jay To me it was disorienting that the cursor became a hand when I just trying to click the checkbox. Putting the usual || drag icon with dotted lines would be cluttering it too much if it was going to be permanently visible. Maybe having the icon appear at the left of the prefixes only when your cursor is near (say for a check box it would be invisble unless you drag your cursor to the area where it now becomes a hand) then it would appear and show that you can grab that and move?

MooRules

For any item with sub-items under it, the notes seem to shift to the left instead of staying at the correct indent.

And if I’m being honest I’m not a fan of the vertical lines. Is there any way to manually enable and disable them?

Jay

MooRules In the Basic section of the display settings there’s a checkbox to enable vertical lines.

Do you think they’re too dark by default? Or should they be disabled by default?

MooRules

Jay

I think disabling them by default would be the better move IMO.

The lines are one thing but I don’t understand why the notes underneath an item are shifted way to the left if said item has sub-items underneath it (see the pic in my previous post).

Is this perhaps a visual glitch that can be fixed?

Jay

MooRules Sorry, I just skipped over mentioning the bug 😆. Just released an update to fix it.

MooRules

Jay Awesome, thanks a ton!

webalstrom

I like the design of the CSS editor. Having moved to Legend/Moo.do from Dynalist, I missed having the option to customize the look of the app. But Dynalist’s implementation for editing the CSS was not user friendly - it was just a blank slate that you had to enter all your own code after you figured out what the elements were that you wanted to edit. The new Legend editing interface is so easy to use since everything is pretty much laid out and easy to change. And it looks like there is a more open ended editor under “Layout” to go deeper if you want to (I haven’t tested that out… my CSS skills aren’t great and most of what I want to change is colors or sizing/spacing which are included in the basic CSS options).

One possible bug I noticed was the Reset button under Colors doesn’t reset anything. The options under Layout can be reset.

Finally, please don’t take away the vertical lines! I find them useful to help keep track of the hierarchy when the parent has many children and grandchildren and it’s not easy to just site upwards from the bottom of the screen.

Jay

I think I’ll put back vertical lines as the default, at least for now, because then at least people know it’s an option. I definitely won’t remove the option (especially since I personally like them). What does everyone else think?

I’m testing resetting and it seems to be working for colors. Is it not working for both light and dark themes?

Both the layout and color editors support any css properties. I just split them up so that we can potentially have a library of themes to choose from, and color themes should not necessarily affect layout.

Jorge

I personally don’t like that the header of the pane (the one that shows where are we zoomed to ) scrolls out of the way when you scroll down. I much prefer the animation that reduces the headers in size but keeps it in view as you scroll down long lists, basically as it was before.

Jay

Jorge But the smaller version that it reduced into is now persistent at the top and always in view. Is it not as noticeable?

webalstrom

Jay I was thinking the same thing Jorge was that the breadcrumb disappears when you scroll down the page. But now that you mention it Jay, I see the behavior you mention that the breadcrumb is persistent… sometimes. I’m seeing both the name of the pane stay as the name of the pane and for other windows, the breadcrumb replaces the name of the pane when you scroll down.

This feels disconcerting, not just that it isn’t consistent. I think the name of the pane should remain in place AND the breadcrumb should stay visible. I’m not partial to the location where both are visible, but both elements should be there so it is less confusing, especially to a new user of Legend.

As far as when the header switches to the breadcrumb, I have not found a consistency of when it switches over. Some panes switch as soon as I zoom in and apparently become a new pane, because if I click the edit pane window name, that pop up box is empty. Other panes keep the pane name and never switch over to the breadcrumb and when I click edit the pane window name, the name of the window is in the pop up. It doesn’t matter whether the default pane view shows the top level of a document or somewhere in the middle. Sorry, I wish I could point out specific times when this works or doesn’t work.

Jorge

I love the fact that we can now change colors to our heart content. This will go a great distance for those that like to make their documents look “pretty”. Let’s just make them all work. I tried changing the color setting for highlight to a bright yellow (I am using dark theme) but the selection color remains the default.

Jay

Jorge Oh that’s confusing naming. Highlight is a new feature that I haven’t added buttons/hotkeys for yet, but will in the next update. Currently you have to show markdown and wrap text in == like ==text==. For changing selection, scroll down the color options to the bottom and you’ll see a “selection” color you can change.

Jorge

IMHO the back button should be placed at the left of the Collapse/Expand All button.
The back button is related to navigation and therefore more closely in function to the header outline placement header. The Expand/Collapse all button is more related to filtering and therefore should be visually located closer to it.
The view type button should be in between the Back button and the Expand/Collapse button.

So the ideal order for me is [Back Button] [Change view button][Expand/Collapse Al Button][Filter ]

Jorge

Jay I wasn’t aware of the highlight functionality. It’s cool, but by default should be different color from the starred attribute, just to differentiate them.

Jorge

Jay Thanks I experimented on this, and the selection does change for the background-color but it ignores the color attribute.

.selection {
color: #000000;
background-color: #DFDF00;
}

I was trying to get dark text on yellow background, but only the yellow background responds. The text color remains unaltered.

Jorge

Jay It is noticeable but if you rename the pane, you now just have your name and no reference to the location in the outline Just like @webalstrom says It really doesn’t matter where but you need to be able to see the name you gave a pane and the breadcrumbs that show you where this pane is located in the overall outline.

Jay

Jorge Oh, the selection theming is only for the colored rectangles and doesn’t affect the text. Unfortunately it would be technically very difficult to support theming of the selected text.

Jorge

Jay Also when you select a bunch of text and you hover over the highlight button, the accompanied text says strikethrough (which is to the button to the left), probably you copied the button but forgot to rename the text that comes up when you hover (can’t remember how that is called).

Jorge

Jay Regarding the color of the text when you select something, no biggie, we can probably get aroundthat by properly selecting a color tone for the selection background color that provides reasonable contrast with white text as well as black text. I’ll play aroun a bit with the colors.