New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create new theme #932

Closed
jreznot opened this Issue Jun 5, 2018 · 6 comments

Comments

@jreznot
Copy link
Member

jreznot commented Jun 5, 2018

Halo theme is too faded

Theme - sketches.zip

Issues to be addressed

  • Default colors
  • Variables / modes / mixins
  • Icons
  • Compatibility with all the standard app components

Do not forget about SASS doc comments for all new variables

Table of Contents

Updates

There are all updates related to the new theme called hover.

General description

  • The new theme has a flat design without shades, bevels, etc.
  • Increased space between components makes UI more lightweight & clear
  • Emphasis on actions and primary elements

hover_theme

Brand new Login Form

A new login form is created both for halo and hover themes:

image

The login form is also changed in the havana theme but it looks according to the theme.

Compact main TabSheet

Tabs now have no margins and paddings; highlighted active tab.

image

"Friendly" filter

image

Highlighed primary actions

This feature can be used in custom screens by setting the primary attribute for <action/> or <button/> in XML or with fluent API for the BaseAction inheritors programmatically:

action
    .withPrimary(true)
    .withCaption(getMessage("actionCaption"))
    .withHandler(e ->
        showNotification(...));

pr_act_dialog

Selection & Hover in table view components

Tables and DataGrid components highlight hovered item now:

table_hover

Increased size of popup and context menu items

popup_items

Increased size of CheckBox & OptionsGroup components

image

Increased size of dialog window headers

image

Bold fonts

Bold font style is used for additional emphasis for:

  • buttons
  • dialog headers
  • main menus (default and side menu)
  • table view component headers (Table & DataGrid)

Affected components list

  • button
  • checkbox
  • context menu
  • data grid
  • generic filter
  • login window
  • main menus
  • main window
  • managed tabsheet (as main tabsheet)
  • options group
  • popup button
  • sidemenu
  • table
  • tabsheet
  • window

Introduced SCSS variables suggested for using

Button

  • $cuba-button-font-weight - button caption font weight
  • $cuba-highlight-primary-action - whether button that has primary action or marked as primary itself should be highlighted (boolean)

CheckBox

  • $cuba-checkbox-size - size of checkbox in pixels

DataGrid

  • $cuba-datagrid-header-font-weight - font weight of datagrid header
  • $cuba-datagrid-highlight-hover-row - whether hovered row should be colored (boolean)

Generic filter

  • $cuba-filter-friendly-search-button - whether filter search button should have "friendly" style (boolean)

Login window

  • $cuba-login-btn-background - login window button background
  • $cuba-login-btn-font-weight - login window button font weight
  • $cuba-login-btn-height - login window button height
  • $cuba-login-btn-width - login window button width
  • $cuba-login-caption-font-size - login window caption font size
  • $cuba-login-caption-font-weight - login window caption font weight
  • $cuba-login-logo-height - login window logo height
  • $cuba-login-username-height - login window user name field height
  • $cuba-login-password-height - login window password field height

Main TabSheet

  • $cuba-maintabsheet-selected-tab-font-weight - main tabsheet selected tab font weight
  • $cuba-maintabsheet-tabcontainer-background-color - main tabsheet tab container background color
  • $cuba-maintabsheet-tab-margin-left - distance between tabs in main tabsheet

Menu (default main menu)

  • $cuba-menubar-menuitem-font-weight - menu items font weight
  • $cuba-menubar-submenu-item-font-weight - submenu items font weight

OptionsGroup

  • $cuba-optiongroup-size - size of options group in pixels

SideMenu

  • $cuba-sidemenu-background-color - sidemenu background color
  • $cuba-sidemenu-item-font-weight - sidemenu items font weight
  • $cuba-sidemenu-separate-items - whether sidemenu items should be separated with lines (boolean)
  • $cuba-sidemenu-timezone-font-weight - sidemenu timezone indicator font weight
  • $cuba-sidemenu-title-font-size - sidemenu title font size
  • $cuba-sidemenu-title-font-weight - sidemenu title font weight
  • $cuba-sidemenu-title-gradient - whether a gradient should be used as a background for sidemenu title (boolean)
  • $cuba-sidemenu-userindicator-font-weight - sidemenu user indicator font weight

Table

  • $cuba-table-header-font-weight - table header font weight
  • $cuba-table-highlight-hover-row - whether hovered row should be colored (boolean)

TabSheet

  • $cuba-tabsheet-tab-caption-selected-color - tabsheet selected tab caption color
  • $cuba-tabsheet-tab-border-selected-color - tabsheet selected tab bottom border color

Window

  • $cuba-window-modal-header-font-weight - modal window header font weight
  • $cuba-window-modal-header-height modal window header height

Checking ToDo:

  • halo looks as usual (sizes, backgrounds, borders, font style)
  • consistent appearence in the new theme
  • different browsers

Login form structure changes

The changes related to login form are listed below.

  1. The Image component is used now to display logo image instead of Embedded.
  2. A combination of box layouts is used now instead of GridLayout for the form itself. It is the biggest and the most valuable change.

Details:

  • <grid id="loginFormLayout"/> is replaced by <vbox id="loginForm"/>
  • there are no labels now (loginFieldLabel, passwordFieldLabel, localesSelectLabel, rememberMeSpacer)
  • login and password fields are placed into <cssLayout id="loginCredentials"/>
  • Remember Me checkbox and locale select dropdown are placed into <hbox id="rememberLocalesBox"/>.
  • login button is placed in the end if loginForm box.

Side-by-side comparison:

image

User Registration migration example (GitHub)

Below you can see an example of migration of an extended login form.

image

We need to migrate the content of loginFormLayout:

<vbox id="loginMainBox">
    <grid id="loginFormLayout">
        <rows>
            <row>
                <hbox colspan="2" align="MIDDLE_CENTER" spacing="true">
                    <linkButton id="registerBtn"
                                caption="Register"
                                invoke="onRegisterBtnClick"/>
                    <linkButton id="restorePasswordBtn"
                                caption="Restore password"
                                invoke="onRestorePasswordBtnClick"/>
                </hbox>
            </row>
        </rows>
    </grid>
</vbox>

The only thing that should be done to migrate the extended form is to replace <grid/> with <hbox/>, set additional id to hbox and add a top margin:

<vbox id="loginMainBox">
    <hbox id="additionalActions" margin="true,false,false,false"
          colspan="2" align="MIDDLE_CENTER" spacing="true">
        <linkButton id="registerBtn"
                    caption="Register"
                    invoke="onRegisterBtnClick"/>
        <linkButton id="restorePasswordBtn"
                    caption="Restore password"
                    invoke="onRestorePasswordBtnClick"/>
    </hbox>
</vbox>

image

@jreznot jreznot added this to the Release 7.0 milestone Jun 5, 2018

dtsaryov added a commit that referenced this issue Jul 11, 2018

dtsaryov added a commit that referenced this issue Jul 12, 2018

dtsaryov added a commit that referenced this issue Jul 13, 2018

dtsaryov added a commit that referenced this issue Jul 13, 2018

dtsaryov added a commit that referenced this issue Jul 16, 2018

dtsaryov added a commit that referenced this issue Jul 17, 2018

dtsaryov added a commit that referenced this issue Jul 17, 2018

@jreznot

This comment has been minimized.

Copy link
Member

jreznot commented Jul 17, 2018

Updated sketches
cuba-flat-theme-draft.zip

dtsaryov added a commit that referenced this issue Jul 18, 2018

dtsaryov added a commit that referenced this issue Jul 18, 2018

@jreznot jreznot modified the milestones: Release 7.0, Release 6.10 Jul 18, 2018

@jreznot

This comment has been minimized.

Copy link
Member

jreznot commented Jul 18, 2018

We have decided to include this into 6.10 release

dtsaryov added a commit that referenced this issue Jul 19, 2018

dtsaryov added a commit that referenced this issue Jul 19, 2018

dtsaryov added a commit that referenced this issue Jul 23, 2018

dtsaryov added a commit that referenced this issue Jul 24, 2018

dtsaryov added a commit that referenced this issue Jul 25, 2018

dtsaryov added a commit that referenced this issue Jul 26, 2018

dtsaryov added a commit that referenced this issue Jul 26, 2018

dtsaryov added a commit that referenced this issue Jul 26, 2018

dtsaryov added a commit that referenced this issue Jul 26, 2018

dtsaryov added a commit that referenced this issue Jul 26, 2018

@natfirst

This comment has been minimized.

Copy link
Member

natfirst commented Aug 2, 2018

OptionsGroup component selection shadow (all browsers). Open Test Samples > OptionsGroup component:
image.png

@natfirst

This comment has been minimized.

Copy link
Member

natfirst commented Aug 2, 2018

There are no differences between the enabled and disabled CheckBox
Disabled:
image.png
Enabled:
image.png

@dtsaryov

This comment has been minimized.

Copy link
Contributor

dtsaryov commented Aug 6, 2018

@natfirst

We will do something if it will become a problem.

image

@dtsaryov

This comment has been minimized.

Copy link
Contributor

dtsaryov commented Aug 6, 2018

@natfirst please check that in case of cuba.localeSelectVisible is false the "Remember Me" checkbox is not misaligned:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment