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

Provide replacement for havana theme with similar visual look and feel #1067

Closed
jreznot opened this Issue Jul 18, 2018 · 12 comments

Comments

@jreznot
Copy link
Member

jreznot commented Jul 18, 2018

Variables already described in: Migration from Havana to feature-rich Halo theme

https://doc.cuba-platform.com/manual-6.9/web_theme_extension.html#web_theme_migration

Improve the following aspects:

  • hover color for Table rows
  • editable / non-editable fields differences: #522
  • disable all animations

Changes

Reworked following styles:

  • DataGrid, TreeDataGrid
  • Table
  • Notification
  • Dialog window
  • Menu Bar
  • Tab Sheet in Main window
  • Login window

Migrated almost all png icons in components. Following components use FontAwesome:

  • LookupField, PopupButton and other with dropdown list:
    image.png
  • DateField
    image.png
  • Table column with ascending and descending sorts
    image.png
  • Tree
    image.png
  • Dialog window icons:
    image.png
  • Close icon in the Tab:
    image.png
  • ResizableTextArea:
    image

SCSS variables

Table

  • $c-table-selected-row-cell-border-color - cell border color of selected row;
  • $c-table-header-background-color - background of header cell in table
  • $c-table-header-hover-background-color - hover background of header cell in table

DataGrid

  • $c-datagrid-selected-row-cell-border-color - cell border color of selected row
  • $c-datagrid-header-cell-background-color - header cell background color
  • $c-datagrid-header-cell-hover-background-color - header cell hover background color

Table and DataGrid

  • $c-row-selection-background-color - Table and DataGrid selection row color
  • $c-row-selection-text-color - Table and DataGrid selection row text color

Window

  • $c-window-header-background-color - Window header background color

Notifications

  • $c-notification-border-radius - notification border radius

MenuBar

  • $c-menubar-submenu-outline-color - outline color of submenu
  • $c-main-menu-popup-text-color - text color of main popup menu

Main Window

  • $c-main-tabsheet-tab-caption-text-color - caption color of tab in main tabSheet
  • $c-tabsheet-tab-close-text-color-hover - hover color of close font-icon
  • $c-tabsheet-tab-close-text-color - close font-icon color of tab in tabSheet
  • $c-app-workarea-background - background color of application work area

@jreznot jreznot added this to the Release 7.0 milestone Jul 18, 2018

@jreznot jreznot changed the title Provide replacement for havana with similar visual look and feel Provide replacement for havana theme with similar visual look and feel Jul 19, 2018

Flaurite added a commit that referenced this issue Sep 10, 2018

@natfirst natfirst assigned sukhova and unassigned IskandarovRost Sep 10, 2018

@Flaurite Flaurite assigned IskandarovRost and unassigned sukhova Sep 10, 2018

Flaurite added a commit that referenced this issue Sep 10, 2018

@natfirst natfirst assigned sukhova and unassigned IskandarovRost Sep 11, 2018

@sukhova

This comment has been minimized.

Copy link
Contributor

sukhova commented Sep 13, 2018

Text and icons in buttons are offset from the horizontal center in all browsers

Chrome:
chrome

Firefox:
firefox

Edge:
edge

IE11:
ie11

@sukhova

This comment has been minimized.

Copy link
Contributor

sukhova commented Sep 13, 2018

The font size is too small in Edge browser

@sukhova

This comment has been minimized.

Copy link
Contributor

sukhova commented Sep 13, 2018

Some separators are missing from the menu in Edge browser
56

@sukhova

This comment has been minimized.

Copy link
Contributor

sukhova commented Sep 13, 2018

The styled table does not display color in cell

57

@sukhova

This comment has been minimized.

Copy link
Contributor

sukhova commented Sep 13, 2018

Checkboxes are not drawn correctly in the table in Edge browser

59

@sukhova

This comment has been minimized.

Copy link
Contributor

sukhova commented Sep 13, 2018

The table header is drawn incorrectly in Edge browser

13

Such behavior occurs in “Users”, “Roles”, “External Files” browsers

@sukhova

This comment has been minimized.

Copy link
Contributor

sukhova commented Sep 13, 2018

The styled tree does not appear stylized, but appears normal

@sukhova

This comment has been minimized.

Copy link
Contributor

sukhova commented Sep 13, 2018

PickerField, LookupPickerField, SearchPickerField are drawed incorrectly in the Edge browser:

14

@sukhova

This comment has been minimized.

Copy link
Contributor

sukhova commented Sep 13, 2018

The DataGrid’s header style differs from Table’s header style

63

@sukhova

This comment has been minimized.

Copy link
Contributor

sukhova commented Sep 13, 2018

The right border of OptionsList is not drawn in Edge browser

62

@jreznot

This comment has been minimized.

Copy link
Member Author

jreznot commented Sep 14, 2018

Let's not fix button icons alignment, is default alignment in Vaadin

Flaurite added a commit that referenced this issue Oct 11, 2018

Provide replacement for havana theme with similar visual look and feel
…#1067

DataGrid, TreeDataGrid, ResizableTextArea fixes
@Flaurite

This comment has been minimized.

Copy link
Contributor

Flaurite commented Oct 11, 2018

For QA:
For all brosers (IE11, Edge, Chrome, Opera, Firefox, Safari) check:

  1. ResizableTextArea - resizable corner
  2. DataGrid and TreeDataGrid styles.
    Font size isn't fixed, cause in old Havana theme was exactly the same font size.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment