The design team has worked on a new theme for Toaster which is in: http://git.yoctoproject.org/git/yocto-webhob-design inside the NewTheme_Prototype/ directory. To get the theme files, do a gulp build inside this directory, then look at the output in dist/. We could either do a copy of these files into toaster, or integrate the theme source repo into toaster's repo.
I've started work on integrating the new theme. You can see the work in progress here: poky-contrib, elliot/toaster/new_theme-8417 I've concentrated mostly on the nav bar for now, which is still nowhere near perfect, but is functional and mostly looks OK. If anyone is interested on working on this with me, the key files are in bitbake/lib/toaster/toastergui/static/css: * default.css - this is the current Toaster default.css, but mostly commented out; I'm uncommenting a section at a time to see whether it still needs to be in Toaster, and marking each section as I deal with it (explained in the file) * overrides.css - this contains CSS rules to replace or augment the ones in the new theme; these are the ones which could be folded back into the LESS files for the new theme I am trying to isolate changes to the new toaster theme CSS in a separate file (overrides.css), rather than working on the new CSS files directly. This is to make it easier to see why and how I've made changes. My thought is that we could eventually fold these changes back into the new theme, rather than maintain them as a separate CSS file in Toaster. Note that I added a script (inline-svg.js) which I've used to fetch SVG files then insert their XML into the DOM directly, to render the nav bar button icons. The reason for this is to avoid inlining the SVG in the HTML templates, while still allowing us to style icons dynamically via CSS. You can see how I've used this in the nav bar. Ideally, I'd also like to see an approach like this in the theme itself, rather than inline SVG in components. My plan is to go through the rest of default.css to see how much of it we need, simultaneously tweaking the CSS overrides and templates to fix any issues, as well as pulling in other components from the theme (like the build button) where appropriate and where they help fix stuff. I am not going to apply all the page redesigns for now.
Status as of 2015-10-26 10:30am I've been working on this branch: contrib/elliot/toaster/new_theme-8417 overrides.css has the changes I've made to tweak styles in the new theme (as described in the bullets below), with some explanatory notes. Here's a list of stuff I know needs doing: * I've done quite a bit on the top navbar, but the CSS fixes I've done there should ideally be in the theme (logo sizing, brand sizing, the info button which shows the git revision when you're in debug mode). I also fixed the navbar height to 72px: we sometimes render the nav bar without buttons, which causes it to get shorter in the new theme, as the height isn't fixed. The vertical alignment of the logo is also off for me in the new theme, so I modified that. Again, this should be in the theme CSS. * The "Build" buttons need updating to the new theme. * We need some styling for the "new build" button. In the new theme nav bar example, that button doesn't do anything. We need to be able to open a dropdown to give users the option to set a project and recipe to build (unless we have an alternative which is designed already). I've made a first pass at this, but the drop-down menu items need styling correctly (the corner radius is wrong and we need to add text ellipsis); the positioning of the dropdown needs fixing; and the "Save" button is the wrong size and mis-aligned. Note that I had to make a variety of changes to drop-down styling, as the new theme overrides bootstrap and breaks the new build dropdown in our template. We could do with fixing these in the theme so I don't have to override our overrides :) * I haven't updated the left-hand menus. * I haven't updated the table styling. * I haven't updated the search boxes. * I haven't updated breadcrumb styling. * I haven't incorporated the new tabs. * I haven't used the new badges. * The font weights mean that Lato doesn't display well on Chrome on Linux (the strokes are too thin). I've added a couple of rules to fix the cases I've seen, but there may be others. It would be good to fix this in the theme. * The "build in progress" items need vertically-aligning, both when there is a project heading (all builds) or not (project builds). Just so you know what's involved in fixing these things....in many cases, the HTML in the new theme doesn't match what's currently in our templates. Unfortunately, because our HTML isn't just Bootstrap, and different HTML can affect how CSS modifies styling, I have to copy the HTML from the new theme to our template, then port across any ids, extra classes, Django template code etc. from our old template to the new HTML. I then figure out which rules in our existing default.css are necessary to make the new HTML look right (if any) and/or add rules to overrides.css (if needed). Sometimes, things just work, but I haven't made a list of what doesn't need fixing.
I have integrated the left navigation changes http://git.yoctoproject.org/cgit/cgit.cgi/poky-contrib/log/?h=bbarrosp/toaster/side-nav Here come my notes from the work: * A few overrides required, all of them documented in overrides.css * We are using a new class for this component, called .side-menu-options. I am not sure why we have not simply overriden the Boostrap classes .nav and .nav-list. By not reusing those classes, we lose some of the responsive features of the component. We might need to address that somehow
Belen fixed left-hand menus; I fixed the "Build" buttons. See contrib/elliot/toaster/new_theme-8417 Remaining work: * Fix positioning of "new build" dropdown and typeahead: both need to move down a touch. * Better styling for the "new build" button in the top navbar (unless what we have is OK for now). * Table styling * Search boxes * Breadcrumbs * Tabs * Badges * Font weights (some text is still difficult to read) * Alignment of "build in progress" items in "All builds" and "Recent builds" areas * Finish rationalising default.css + others I've not noticed yet
The following also need to be addressed: * Styling of popups which appear when adding a layer etc.
I've looked into the badges. There was just a small problem with the top padding. Changes in http://git.yoctoproject.org/cgit/cgit.cgi/poky-contrib/commit/?h=bbarrosp/toaster/badges We will also need to make them fit 3-digit numbers. Right now, they only fit 2 digits.
Belen fixed the badges and is working on the breadcrumbs; I have finished rationalising default.css. The remaining work is: * Fix positioning of "new build" dropdown and typeahead: both need to move down a touch. * Better styling for the "new build" button in the top navbar (unless what we have is OK for now). * Table styling * Search boxes * Tabs * Font weights (some text is still difficult to read) * Alignment of "build in progress" items in "All builds" and "Recent builds" areas I will work on table styling today.
I've done a first pass at table styling, including changing the errors/warnings cell to use badges. Belen finished the breadcrumbs. The remaining work is: * Fix positioning of "new build" dropdown and typeahead: both need to move down a touch. * Better styling for the "new build" button in the top navbar (unless what we have is OK for now). * Search boxes * Tabs * Alignment of "build in progress" items in "All builds" and "Recent builds" areas * Font weights (some text is still difficult to read): Belen suggested passing this to Levi for an overhaul.
I've done the work to fix the search boxes. Belen is working on headings and more general layout. The remaining work is: * Fix positioning of "new build" dropdown and typeahead: both need to move down a touch. * Better styling for the "new build" button in the top navbar (unless what we have is OK for now). * Tabs * Alignment of "build in progress" items in "All builds" and "Recent builds" areas. * Font weights (some text is still difficult to read): Belen suggested passing this to Levi for an overhaul.
I've done most of the work to fix the search boxes: I still need to fix toastertable-simple.html. Belen is working on headings and more general layout. The remaining work is: * Fix positioning of "new build" dropdown and typeahead: both need to move down a touch. * Better styling for the "new build" button in the top navbar (unless what we have is OK for now). * Tabs * Alignment of "build in progress" items in "All builds" and "Recent builds" areas. * Font weights (some text is still difficult to read): Belen suggested passing this to Levi for an overhaul. * Fix pagination widget (it doesn't appear to be working on some pages).
I've fixed all the search boxes and have sorted out table and "recent builds" item alignment. Belen is working on headings and more general layout. The remaining work is: * Fix positioning of "new build" dropdown and typeahead: both need to move down a touch. * Better styling for the "new build" button in the top navbar (unless what we have is OK for now). * Tabs * Font weights (some text is still difficult to read): Belen suggested passing this to Levi for an overhaul. * Fix pagination widget (it doesn't appear to be working on some pages). I'm working on pagination right now.
I've finished work on the pagination widget. Once Belen is finished with headings, I'll do tabs. I'll do the minor touches still needed to sort out alignments in various places.
I've finished pagination, Belen has finished the headings, and Tiago did the "new build" alignment. I'm assuming that what we have for "new build" is OK for now, as no one has complained. The remaining work is: * Tabs * Font weights (some text is still difficult to read): Belen suggested passing this to Levi for an overhaul. I'm working on tabs next.
With the move to Bootstrap 3, the creation of a new custom theme for Toaster will probably need to be started from scratch.