Design update

Jay

We’re working on a big design change that also brings a ton of customizations. It’s still very much in progress and there’s more work to do to finish it, but I thought I’d show a preview here and and ask your advice on where we should take it.

Design Change

We’ve added some new formatting features:

Multiple levels of headers, using the number of # in the prefix. So # Header is a big one and ### Header is a small one. And it automatically reduces the size if indented in.
Inline highlighting. See it on “play” in the second item of the example. So far it’s just a single (customizable) highlight color, but we may try to add full color selection too.

We’re fixing some ugly styling issues:

Vertical lines are aligned better
Collapsers are always padded out even if there’s not a prefix, for consistency

We’re working on a new pane header design:

It’s always just one line, with no scroll animations
The document and zoomed items are on the left and the buttons, view mode, and filter are on the right.
I’m concerned the view mode selection is not as obvious which may be bad, but shrinking it to just an icon saves a ton of space and seems easier to glance at.

And perhaps most noticeably, we’re changing colors and layouts. This is all experimental so may change, but currently:

The text has more line height and in dark mode is slightly grayer so it’s easier to read
Inline item links wrap in a faded [[ ]] instead of an icon with a background which is much easier to read
Dates have a red background instead of red text
Headers/Projects are bigger and have some top padding
Panes only have borders between each other, so they’re flush with the background otherwise
There are two basic layout themes. This is the “Comfortable” one where “Compact” reduces heights and paddings.

Customizations

We’ve made a css-like editor for changing all the theme values, and added a ton more customizable values (32 so far). You’ll be able to change colors and paddings, and really anything you can do in CSS. We envision having a theme library with user-submitted themes in the future, but for now we’re just starting with making it really easy and powerful to customize everything.

What do you think?

Do you like how the new dark theme looks so far? Do you like the new pane header layout? Any thoughts would be very valuable 😃. We will hopefully get this ready to test within a week or so (we’re mixing it in with generally fixing bugs), and then it will be easier to discuss it when you can really try it.

Rackleberry

I am really looking forward to being able to add a bit of custom colour and set up to my boards.

Personally the changes to the design are the biggest improvements, a dark made that is easier on the eyes, and smaller headers are the big improvements for me.

mondayrobot

Sounds great, thank you. Looking forward to testing it, especially the customization. The only thing I’m not sure about is the faded [[ ]] and the change in color for the links, I think I prefer the way it is done now. But that’s just personal preference, the new way may help with new users familiar with other tools.

Will we have a “legend” (sorry) of the css selectors, to better identify what they do? Thanks!

Jay

mondayrobot Yes, the theme editor is pre-populated with all the defaults from the active theme so you can see all the options and just tweak what you want.

Jay

The new design is ready! You can try it in the beta version at https://beta.legendapp.com. As described above the first things you’ll notice are the changed colors, paddings, and pane header layout. The new default layout has bigger text and more padding, but the “Compact” layout theme gets it closer to the old Moo.do default.

It’s all extremely customizable in the new Display Settings. You can change the color themes (which will affect the active Dark or Light theme) and the layout properties. I tried to walk a line of making the theme editor fairly approachable for non-technical people but also very powerful. So it comes with all the defaults that you can change, and has a color picker for the colors. But it also accepts any valid css, so you can do customize whatever you want.

Please let us know what you think!

Did you run into any bugs or issues?
Do you like the default Light and Dark themes? Do you think we should change any of the default color/layout values?
Are there more things you want to theme? You can inspect the css and add any css selectors you want, but we’d ideally like to make them officially themeable values instead of hacks.
Is the css-like editor too hard to understand for you if you’re not a developer? Should we make a more intuitive input method for themes?
If you make a lot of changes to make your own custom theme, please share it here or in https://forum.legendapp.com/t/showcase. We’d like to have a library of additional user-created themes (with all the attributions you’d like) so if you post it we can add it to the library (unless you don’t want us to).

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

JT17

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.