Skip to content

Commit

Permalink
Fluent: toolbar, menu, contextMenu redesign (#25643)
Browse files Browse the repository at this point in the history
  • Loading branch information
@EugeniyKiyashko
EugeniyKiyashko authored Sep 22, 2023
1 parent 9877326 commit 3c673d3
Show file tree
Hide file tree
Showing 25 changed files with 89 additions and 139 deletions.
3 changes: 2 additions & 1 deletion packages/devextreme/js/ui/toolbar/internal/ui.toolbar.menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { extend } from '../../../core/utils/extend';
import Widget from '../../widget/ui.widget';
import Button from '../../button';
import ToolbarMenuList from './ui.toolbar.menu.list';
import { isMaterialBased } from '../../themes';
import { isFluent, isMaterialBased } from '../../themes';
import { ChildDefaultTemplate } from '../../../core/templates/child_default_template';
import { toggleItemFocusableElementTabIndex } from '../ui.toolbar.utils';
import { getWindow } from '../../../core/utils/window';
Expand Down Expand Up @@ -150,6 +150,7 @@ export default class DropDownMenu extends Widget {
this._button = this._createComponent($button, Button, {
icon: 'overflow',
template: 'content',
stylingMode: isFluent() ? 'text' : 'contained',
useInkRipple: this.option('useInkRipple'),
hoverStateEnabled: false,
focusStateEnabled: false,
Expand Down
32 changes: 16 additions & 16 deletions packages/devextreme/scss/widgets/fluent/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,6 @@ $base-accent-hover: null !default;
$base-accent-active: null !default;
$base-accent-selected: null !default;

$base-compound-accent: null !default;
$base-compound-accent-hover: null !default;
$base-compound-accent-active: null !default;

$fluent-color-theme-modificator: null !default;

/**
Expand Down Expand Up @@ -80,6 +76,10 @@ $base-foreground-inverted-hover: null !default;
$base-foreground-inverted-focused: null !default;

$base-neutral-background: null !default;
$base-neutral-background1: null !default;
$base-neutral-background1-hover: null !default;
$base-neutral-background1-active: null !default;
$base-neutral-background1-selected: null !default;
$base-neutral-background2: null !default;
$base-neutral-background2-hover: null !default;
$base-neutral-background2-active: null !default;
Expand Down Expand Up @@ -177,13 +177,9 @@ $scrollview-pulldown-path: null !default;
@if $mode == "light" {
$base-accent: rgba(15, 108, 189, 1) !default; // #0f6cbd
$base-accent-hover: rgba(17, 94, 163, 1) !default; // #115ea3
$base-accent-active: rgba(12, 59, 94, 1) !default; // #0c3b5e
$base-accent-active: rgba(15, 84, 140, 1) !default; // #0f548c
$base-accent-selected: rgba(14, 71, 117, 1) !default; // #0E4775

$base-compound-accent: rgba(15, 108, 189, 1) !default; // #0f6cbd
$base-compound-accent-hover: rgba(17, 94, 163, 1) !default; // #115ea3
$base-compound-accent-active: rgba(15, 84, 140, 1) !default; // #0f548c

$base-accent-foreground: #0F6CBD !default;
$base-accent-foreground2: #115EA3 !default;
$base-accent-foreground2-hover: #0F548C !default;
Expand Down Expand Up @@ -214,6 +210,10 @@ $scrollview-pulldown-path: null !default;
$base-brand2-bg-selected: rgba(208, 229, 251, 1) !default; // #d0e5fb

$base-neutral-background: rgba(245, 245, 245, 1) !default; // #f5f5f5
$base-neutral-background1: rgba(255, 255, 255, 1) !default; // #FFFFFF
$base-neutral-background1-hover: rgba(245, 245, 245, 1) !default; // #F5F5F5
$base-neutral-background1-active: rgba(224, 224, 224, 1) !default; // #E0E0E0
$base-neutral-background1-selected: rgba(235, 235, 235, 1) !default; // #EBEBEB
$base-neutral-background2: rgba(250, 250, 250, 1) !default; // #FAFAFA
$base-neutral-background2-hover: rgba(240, 240, 240, 1) !default; // #F0F0F0
$base-neutral-background2-active: rgba(219, 219, 219, 1) !default; // #DBDBDB
Expand Down Expand Up @@ -268,20 +268,16 @@ $scrollview-pulldown-path: null !default;
}

@if $mode == "dark" {
$base-accent: rgba(17, 94, 163, 1) !default; // #115ea3
$base-accent-hover: rgba(15, 108, 189, 1) !default; // #0f6cbd
$base-accent-active: rgba(12, 59, 94, 1) !default; // #0c3b5e
$base-accent: rgba(71, 158, 245, 1) !default; // #479EF5
$base-accent-hover: rgba(98, 171, 245, 1) !default; // #62ABF5
$base-accent-active: rgba(40, 134, 222, 1) !default; // #2886DE
$base-accent-selected: rgba(15, 84, 140, 1) !default; // #0f548c

$base-accent-foreground: #479EF5 !default;
$base-accent-foreground2: #62ABF5 !default;
$base-accent-foreground2-hover: #B4D6F5 !default;
$base-accent-foreground2-active: #B4D6F5 !default;

$base-compound-accent: rgba(71, 158, 245, 1) !default; // #479EF5
$base-compound-accent-hover: rgba(98, 171, 245, 1) !default; // #62ABF5
$base-compound-accent-active: rgba(40, 134, 222, 1) !default; // #2886DE

$fluent-color-theme-modificator: "dark" !default;
$base-text-color: #fff !default;
$base-label-color: rgba(255, 255, 255, 0.6) !default;
Expand Down Expand Up @@ -310,6 +306,10 @@ $scrollview-pulldown-path: null !default;
$base-foreground-inverted-focused: rgba(15, 84, 140, 1) !default; // #0F548C

$base-neutral-background: rgba(20, 20, 20, 1) !default; // #f5f5f5
$base-neutral-background1: rgba(41, 41, 41, 1) !default; // #292929
$base-neutral-background1-hover: rgba(61, 61, 61, 1) !default; // #3D3D3D
$base-neutral-background1-active: rgba(31, 31, 31, 1) !default; // #1F1F1F
$base-neutral-background1-selected: rgba(56, 56, 56, 1) !default; // #383838
$base-neutral-background2: rgba(31, 31, 31, 1) !default; // #1F1F1F
$base-neutral-background2-hover: rgba(51, 51, 51, 1) !default; // #333333
$base-neutral-background2-active: rgba(20, 20, 20, 1) !default; // #141414
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme/scss/widgets/fluent/_sizes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ $fluent-button-icon-margin: null !default;
$fluent-base-dropdown-widgets-shadow: 0 2px 7px $base-dropdown-shadow-color !default;
$fluent-accordion-item-opened-margin: 0 !default;
$fluent-button-height: 32px !default;
$fluent-button-icon-size: 18px !default;
$fluent-button-icon-size: 20px !default;
$fluent-button-icon-margin: 8px !default;
}

Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme/scss/widgets/fluent/button/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,9 +305,9 @@ $button-success-text-selected-bg: null !default;
}

@if $mode == "dark" {
$button-default-bg: $base-compound-accent !default;
$button-default-hover-bg: $base-compound-accent-hover !default;
$button-default-focused-bg: $base-compound-accent-hover !default; // #77b7f7
$button-default-bg: $base-accent !default;
$button-default-hover-bg: $base-accent-hover !default;
$button-default-focused-bg: $base-accent-hover !default;
$button-default-active-bg: #b4d6fa !default;
$button-default-selected-bg: #a6cff9 !default;

Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme/scss/widgets/fluent/calendar/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ $calendar-cell-hover-color: $calendar-color !default;
* $name 50. Selected cell background color
* $type color
*/
$calendar-cell-selected-bg: $base-compound-accent !default;
$calendar-cell-selected-bg: $base-accent !default;
$calendar-cell-selected-color: $base-inverted-text-color !default;
$calendar-cell-contoured-border-radius: 50% !default;
$calendar-cell-contoured-border-color: null !default;
Expand All @@ -56,5 +56,5 @@ $calendar-week-number-border-radius: 0 !default;
$calendar-hover-bg: $base-foreground-inverted-hover !default;
$calendar-cell-hover-border-color: $base-foreground-inverted-hover !default;
$calendar-cell-active-bg: $base-foreground-inverted-focused !default;
$calendar-cell-contoured-border-color: $base-compound-accent-active !default;
$calendar-cell-contoured-border-color: $base-accent-active !default;
}
6 changes: 3 additions & 3 deletions packages/devextreme/scss/widgets/fluent/checkBox/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ $checkbox-border-color-active: $base-border-color-accessible-focused !default;

$checkbox-foreground-color: $base-element-bg !default;

$checkbox-accent-color: $base-compound-accent !default;
$checkbox-accent-color-hover: $base-compound-accent-hover !default;
$checkbox-accent-color-focused: $base-compound-accent-active !default;
$checkbox-accent-color: $base-accent !default;
$checkbox-accent-color-hover: $base-accent-hover !default;
$checkbox-accent-color-focused: $base-accent-active !default;

$checkbox-invalid-color: $base-invalid-color !default;
$checkbox-invalid-color-hover: $base-invalid-color-hover !default;
Expand Down
5 changes: 2 additions & 3 deletions packages/devextreme/scss/widgets/fluent/contextMenu/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@

.dx-context-menu {
.dx-menu-item {
font-size: $fluent-context-menu-font-size;
color: $base-text-color;

.dx-menu-item-content {
Expand Down Expand Up @@ -65,8 +64,8 @@

.dx-submenu {
background-color: $menu-popup-bg;
border-radius: $base-border-radius;
box-shadow: 0 2px 7px $menu-container-shadow-color;
border-radius: $fluent-context-menu-border-radius;
box-shadow: color.change($base-shadow-color, $alpha: 0.12) 0 2px 7.2px 0, color.change($base-shadow-color, $alpha: 0.14) 0 8px 16px 0
}

.dx-menu-separator {
Expand Down
8 changes: 3 additions & 5 deletions packages/devextreme/scss/widgets/fluent/contextMenu/_sizes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@

$fluent-context-menu-horizontal-padding: null !default;
$fluent-context-menu-container-vertical-padding: null !default;
$fluent-context-menu-font-size: null !default;
$fluent-context-menu-border-radius: $base-border-radius !default;

@if $size == "default" {
$fluent-context-menu-horizontal-padding: 16px !default;
$fluent-context-menu-container-vertical-padding: 8px !default;
$fluent-context-menu-font-size: 14px !default;
$fluent-context-menu-horizontal-padding: 12px !default;
$fluent-context-menu-container-vertical-padding: 4px !default;
}

@else if $size == "compact" {
$fluent-context-menu-horizontal-padding: 8px !default;
$fluent-context-menu-container-vertical-padding: 4px !default;
$fluent-context-menu-font-size: 13px !default;
}
21 changes: 12 additions & 9 deletions packages/devextreme/scss/widgets/fluent/menu/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,38 @@

// adduse

$menu-popup-bg: $base-bg !default;
$menu-item-hover-bg: $base-hover-bg !default;
$menu-popup-bg: $base-neutral-background1 !default;
$menu-item-hover-bg: null !default;
$menu-item-bg-active: null !default;

/**
* $name 10. Text color
* $type color
*/
$menu-color: lighten($base-text-color, 46%) !default;
$menu-color: $base-text-color !default;
$menu-item-expanded-color: $menu-color !default;


/**
* $name 20. Selected item background color
* $type color
*/
$menu-item-selected-bg: null !default;
$menu-item-selected-bg: $base-neutral-background1-selected !default;
$menu-popup-border-color: $base-border-color !default;
$menu-separator-bg: $base-border-color !default;
$menu-item-selected-color: $base-text-color !default;
$menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default;
$menu-item-focused-selected-bg: $base-focus-bg !default;
$menu-container-shadow-color: null !default;

@if $mode == "light" {
$menu-item-selected-bg: lighten($base-text-color, 88%) !default;
$menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
$menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
$menu-item-hover-bg: $base-neutral-background1-hover !default;
$menu-item-bg-active: $base-neutral-background1-active !default;
}

@if $mode == "dark" {
$menu-item-selected-bg: lighten($base-bg, 8%) !default;
$menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
$menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
$menu-item-hover-bg: $base-bg-hover !default;
$menu-item-bg-active: $base-bg-active !default;
}

8 changes: 0 additions & 8 deletions packages/devextreme/scss/widgets/fluent/menu/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@
@use "../menuBase" as *;
@use "../../base/menu";


$fluent-menu-font-size: $fluent-base-font-size;

.dx-context-menu-container-border {
background-color: transparent;
}
Expand Down Expand Up @@ -49,7 +46,6 @@ $fluent-menu-font-size: $fluent-base-font-size;
}

.dx-menu-item {
font-size: $fluent-menu-font-size;
border-radius: $base-border-radius;

.dx-menu-item-content {
Expand Down Expand Up @@ -91,10 +87,6 @@ $fluent-menu-font-size: $fluent-base-font-size;
}
}

.dx-treeview-toggle-item-visibility {
font-size: 18px;
}

.dx-treeview-node {
&.dx-state-focused {
.dx-treeview-node .dx-treeview-toggle-item-visibility {
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme/scss/widgets/fluent/menu/_sizes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
$fluent-menu-vertical-padding: null !default;

@if $size == "default" {
$fluent-menu-vertical-padding: 12px !default;
$fluent-menu-vertical-padding: 6px !default;
}

@if $size == "compact" {
$fluent-menu-vertical-padding: 8px !default;
$fluent-menu-vertical-padding: 4px !default;
}

11 changes: 4 additions & 7 deletions packages/devextreme/scss/widgets/fluent/menuBase/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@

// adduse

$fluent-menu-arrow-image-size: 7px;

.dx-menu-item {
color: $menu-color;

Expand All @@ -28,6 +26,10 @@ $fluent-menu-arrow-image-size: 7px;
&.dx-state-focused {
background-color: $menu-item-hover-bg;
}

&.dx-state-active {
background-color: $menu-item-bg-active;
}
}

.dx-menu-item-selected {
Expand Down Expand Up @@ -60,11 +62,6 @@ $fluent-menu-arrow-image-size: 7px;
.dx-menu-item {
.dx-menu-item-content {
line-height: $fluent-menu-item-line-height;

.dx-menu-item-popout {
min-width: $fluent-menu-arrow-image-size;
min-height: $fluent-menu-arrow-image-size;
}
}
}

Expand Down
12 changes: 6 additions & 6 deletions packages/devextreme/scss/widgets/fluent/menuBase/_sizes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@
$fluent-menu-item-line-height: null !default;
$fluent-menu-item-with-icon-horizontal-padding: null !default;
$fluent-menu-horizontal-padding: null !default;
$fluent-menu-icon-to-text-offset: 8px;
$fluent-menu-icon-to-text-offset: 4px;

@if $size == "default" {
$fluent-menu-item-line-height: 18px !default;
$fluent-menu-horizontal-padding: 16px !default;
$fluent-menu-item-with-icon-horizontal-padding: 64px !default;
$fluent-menu-item-line-height: 20px !default;
$fluent-menu-horizontal-padding: 12px !default;
$fluent-menu-item-with-icon-horizontal-padding: 40px !default;
}

@else if $size == "compact" {
$fluent-menu-item-line-height: 16px !default;
$fluent-menu-horizontal-padding: 12px !default;
$fluent-menu-item-with-icon-horizontal-padding: 46px !default;
$fluent-menu-horizontal-padding: 8px !default;
$fluent-menu-item-with-icon-horizontal-padding: 32px !default;
}
2 changes: 1 addition & 1 deletion packages/devextreme/scss/widgets/fluent/popup/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ $popup-title-color: $base-text-color !default;
$popup-title-border-color: $base-border-color !default;
$popup-bottom-bg: $popup-title-bg !default;
$popup-bottom-color: $base-text-color !default;
$popup-border-radius: $base-border-radius !default;
$popup-border-radius: $base-border-radius * 2 !default;
4 changes: 2 additions & 2 deletions packages/devextreme/scss/widgets/fluent/popup/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ $fluent-popup-toolbar-label-font-size: $fluent-m-font-size;
.dx-popup-wrapper {
& > .dx-overlay-content {
background: $overlay-content-bg;
box-shadow: 0 11px 15px -7px color.change($base-shadow-color, $alpha: 0.2), 0 24px 38px 3px color.change($base-shadow-color, $alpha: 0.14), 0 9px 46px 8px color.change($base-shadow-color, $alpha: 0.12);
box-shadow: color.change($base-shadow-color, $alpha: 0.133) 0 6.4px 14.4px 0, color.change($base-shadow-color, $alpha: 0.11) 0 1.2px 3.6px 0;
border-radius: $popup-border-radius;
}

Expand All @@ -28,7 +28,7 @@ $fluent-popup-toolbar-label-font-size: $fluent-m-font-size;

.dx-state-focused {
&.dx-overlay-content {
border: 1px solid $base-accent;
box-shadow: color.change($base-shadow-color, $alpha: 0.133) 0 12px 24px 0, color.change($base-shadow-color, $alpha: 0.11) 0 4px 8px 0;
}
}
}
Expand Down
12 changes: 6 additions & 6 deletions packages/devextreme/scss/widgets/fluent/popup/_sizes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@ $fluent-popup-toolbar-item-spacing: 8px !default;

@if $size == "default" {
$fluent-popup-content-padding: 24px !default;
$fluent-popup-content-withtitle-top-padding: 20px !default;
$fluent-popup-content-withtitle-top-padding: 24px !default;

$fluent-popup-toolbar-horizontal-padding: 24px !default;
$fluent-popup-bottom-toolbar-height: 52px !default;
$fluent-popup-toolbar-height: 64px !default;
$fluent-popup-bottom-toolbar-height: 48px !default;
$fluent-popup-toolbar-height: 48px !default;
}

@else if $size == "compact" {
$fluent-popup-content-padding: 16px !default;
$fluent-popup-content-withtitle-top-padding: 14px !default;
$fluent-popup-content-withtitle-top-padding: 16px !default;

$fluent-popup-toolbar-horizontal-padding: 16px !default;
$fluent-popup-bottom-toolbar-height: 44px !default;
$fluent-popup-toolbar-height: 42px !default;
$fluent-popup-bottom-toolbar-height: 36px !default;
$fluent-popup-toolbar-height: 36px !default;
}
Loading

0 comments on commit 3c673d3

Please sign in to comment.