devextreme-cli 1.7.1 → 1.8.0-beta.0

package/src/templates/react/application/src/components/header/Header.tsx

@@ -4,6 +4,7 @@ import Button from 'devextreme-react/button';
 import UserPanel from '../user-panel/UserPanel';
 import './Header.scss';
 import { Template } from 'devextreme-react/core/template';
+import { ThemeSwitcher } from '../theme-switcher/ThemeSwitcher';
 <%=#isTypeScript%>import type { HeaderProps } from '../../types';<%=/isTypeScript%>
 
 export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTypeScript%>: HeaderProps<%=/isTypeScript%>) {
@@ -26,21 +27,16 @@ export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTyp
         />
         <Item
           location={'after'}
-          locateInMenu={'auto'}
-          menuItemTemplate={'userPanelTemplate'}
         >
-          <Button
-            className={'user-button authorization'}
-            width={210}
-            height={'100%'}
-            stylingMode={'text'}
-          >
-            <UserPanel menuMode={'context'} />
-          </Button>
+          <ThemeSwitcher />
         </Item>
-        <Template name={'userPanelTemplate'}>
-          <UserPanel menuMode={'list'} />
+        <Item location='after' locateInMenu='auto' menuItemTemplate='userPanelTemplate'>
+          <UserPanel menuMode='context' />
+        </Item>
+        <Template name='userPanelTemplate'>
+          <UserPanel menuMode='list' />
         </Template>
+
       </Toolbar>
     </header>
 )}

package/src/templates/react/application/src/components/login-form/LoginForm.scss

@@ -13,6 +13,6 @@
 
   .form-text {
     margin: 10px 0;
-    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+    color: var(--base-text-color-alpha-7);
   }
 }

package/src/templates/react/application/src/components/reset-password-form/ResetPasswordForm.scss

@@ -6,7 +6,7 @@
   }
 
   .login-link {
-    color: $base-accent;
+    color: var(--base-accent);
     font-size: 16px;
     text-align: center;
   }

package/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.scss

@@ -1,91 +1,72 @@
 @import "../../dx-styles.scss";
-@import "../../themes/generated/variables.additional.scss";
 
-.side-navigation-menu {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  height: 100%;
-  width: 250px !important;
-
-  .menu-container {
-    min-height: 100%;
+.dx-swatch-additional, .dx-swatch-additional-dark {
+  &.side-navigation-menu {
     display: flex;
-    flex: 1;
+    flex-direction: column;
+    min-height: 100%;
+    height: 100%;
+    width: 250px !important;
+    background-color: var(--base-bg);
 
-    .dx-treeview {
-      // ## Long text positioning
-      white-space: nowrap;
-      // ##
+    .menu-container {
+      min-height: 100%;
+      display: flex;
+      flex: 1;
 
-      // ## Icon width customization
-      .dx-treeview-item {
-        padding-left: 0;
-        flex-direction: row-reverse;
+      .dx-treeview {
+        // ## Long text positioning
+        white-space: nowrap;
+        // ##
 
-        .dx-icon {
-          width: $side-panel-min-width !important;
-          margin: 0 !important;
+        .dx-treeview-node-container:empty {
+          display: none;
         }
-      }
-      // ##
-      
-      // ## Arrow customization
-      .dx-treeview-node {
-        padding: 0 0 !important;
-      }
 
-      .dx-treeview-toggle-item-visibility {
-        right: 10px;
-        left: auto;
-      }
+        // ## Icon width customization
+        .dx-treeview-item {
+          padding-left: 0;
+          border-radius: 0;
+          flex-direction: row-reverse;
 
-      .dx-rtl .dx-treeview-toggle-item-visibility {
-        left: 10px;
-        right: auto;
-      }
-      // ##
+          .dx-icon {
+            width: $side-panel-min-width !important;
+            margin: 0 !important;
+          }
+        }
 
-      // ## Item levels customization
-      .dx-treeview-node {
-        &[aria-level='1'] {
-          font-weight: bold;
-          border-bottom: 1px solid $base-border-color;
+        // ##
+
+        // ## Arrow customization
+        .dx-treeview-node {
+          padding: 0 0 !important;
         }
-  
-        &[aria-level='2'] .dx-treeview-item-content {
-          font-weight: normal;
-          padding: 0 $side-panel-min-width;
+
+        .dx-treeview-toggle-item-visibility {
+          right: 10px;
+          left: auto;
         }
-      }
-      // ##
-    }
 
-    // ## Selected & Focuced items customization
-    .dx-treeview {
-      .dx-treeview-node-container {
-        .dx-treeview-node {
-          &.dx-state-selected:not(.dx-state-focused)> .dx-treeview-item {
-            background: transparent;
-          }
+        .dx-rtl .dx-treeview-toggle-item-visibility {
+          left: 10px;
+          right: auto;
+        }
+        // ##
 
-          &.dx-state-selected > .dx-treeview-item * {
-            color: $base-accent;
+        // ## Item levels customization
+        .dx-treeview-node {
+          &[aria-level="1"] {
+            font-weight: bold;
           }
 
-          &:not(.dx-state-focused)>.dx-treeview-item.dx-state-hover {
-            background-color: lighten($base-bg, 4.00);
+          &[aria-level="2"] .dx-treeview-item-content {
+            font-weight: normal;
+            padding: 0 $side-panel-min-width;
           }
         }
+        // ##
       }
     }
-
-    .dx-theme-generic .dx-treeview {
-      .dx-treeview-node-container .dx-treeview-node.dx-state-selected.dx-state-focused > .dx-treeview-item * {
-        color: inherit;
-      }
-    }
-    // ##
   }
 }
 

package/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useEffect, useRef, useCallback, useMemo, useContext } from 'react';
 import { TreeView<%=#isTypeScript%>, TreeViewRef<%=/isTypeScript%> } from 'devextreme-react/tree-view';
+import * as events from 'devextreme/events';
 import { navigation } from '../../app-navigation';
 import { useNavigation } from '../../contexts/navigation';
 import { useScreenSize } from '../../utils/media-query';
 import './SideNavigationMenu.scss';
 <%=#isTypeScript%>import type { SideNavigationMenuProps } from '../../types';<%=/isTypeScript%>
 
-import * as events from 'devextreme/events';
+import { ThemeContext } from '../../theme';
 
 export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsWithChildren<SideNavigationMenuProps><%=/isTypeScript%>) {
   const {
@@ -17,6 +18,7 @@ export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsW
     onMenuReady
   } = props;
 
+  const theme = useContext(ThemeContext);
   const { isLarge } = useScreenSize();
   function normalizePath () {
     return navigation.map((item) => (
@@ -64,7 +66,7 @@ export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsW
 
   return (
     <div
-      className={'dx-swatch-additional side-navigation-menu'}
+      className={`dx-swatch-additional${theme?.isDark() ? '-dark' : ''} side-navigation-menu`}
       ref={getWrapperRef}
     >
       {children}

package/src/templates/react/application/src/components/theme-switcher/ThemeSwitcher.tsx

@@ -0,0 +1,20 @@
+import React, { useCallback, useContext } from 'react';
+import Button from 'devextreme-react/button';
+import { ThemeContext } from '../../theme';
+
+export const ThemeSwitcher = () => {
+  const themeContext = useContext(ThemeContext);
+
+  const onButtonClick = useCallback(() => {
+    themeContext?.switchTheme();
+  }, []);
+
+  return <div>
+            <Button
+              className='theme-button'
+              stylingMode='text'
+              icon={`${themeContext?.theme === 'dark' ? 'sun' : 'moon'}`}
+              onClick={onButtonClick}
+            />
+        </div>;
+};

package/src/templates/react/application/src/components/user-panel/UserPanel.scss

@@ -1,63 +1,51 @@
-@import "../../themes/generated/variables.base.scss";
+.app .header-toolbar .user-panel .user-button.dx-dropdownbutton img.dx-icon {
+  height: 100%;
+  width: auto;
 
-.user-info {
-  display: flex;
-  align-items: center;
-
-  .dx-toolbar-menu-section & {
-    padding: 10px 6px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  .dx-theme-generic & {
+    max-height: 32px;
   }
+}
 
-  .image-container {
-    overflow: hidden;
-    border-radius: 50%;
-    height: 30px;
-    width: 30px;
-    margin: 0 4px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
-
-    .user-image {
-      width: 100%;
-      height: 100%;
+.user-panel  {
+  display: flex;
+  flex-direction: column;
+
+  .user-button.dx-dropdownbutton {
+    margin-left: 5px;
+
+    img.dx-icon {
+      border-radius: 50%;
+      margin: 0;
+      width: auto;
+      aspect-ratio: 1 / 1;
+      box-sizing: border-box;
+      border: 1px solid var(--dx-color-border);
+      object-fit: cover;
+      object-position: top;
+      background: rgb(255, 255, 255);
+      background-clip: padding-box;
     }
-  }
 
-  .user-name {
-    font-size: 14px;
-    color: $base-text-color;
-    margin: 0 9px;
-  }
-}
 
-.user-panel {
-  .dx-list-item .dx-icon {
-    vertical-align: middle;
-    color: $base-text-color;
-    margin-right: 16px;
-  }
-  .dx-rtl .dx-list-item .dx-icon {
-    margin-right: 0;
-    margin-left: 16px;
-  }
-}
 
-.dx-context-menu.user-menu.dx-menu-base {
-  &.dx-rtl {
-    .dx-submenu .dx-menu-items-container .dx-icon {
-      margin-left: 16px;
+    .dx-buttongroup {
+      vertical-align: middle;
+
+      .dx-button.dx-button-has-icon:not(.dx-button-has-text) {
+        .dx-button-content {
+          padding: 0;
+        }
+
+        &.dx-state-hover,
+        &.dx-state-focused {
+          background-color: transparent;
+
+          img.dx-icon {
+            border-color: var(--dx-color-primary);
+          }
+        }
+      }
     }
   }
-  .dx-submenu .dx-menu-items-container .dx-icon {
-    margin-right: 16px;
-  }
-  .dx-menu-item .dx-menu-item-content {
-      padding: 3px 15px 4px;
-  }
-}
-
-.dx-theme-generic .user-menu .dx-menu-item-content .dx-menu-item-text {
-  padding-left: 4px;
-  padding-right: 4px;
 }

package/src/templates/react/application/src/components/user-panel/UserPanel.tsx

@@ -1,18 +1,19 @@
 import React, { useMemo, useCallback } from 'react';
 import { useNavigate } from "react-router-dom";
-import ContextMenu, { Position } from 'devextreme-react/context-menu';
+import DropDownButton from 'devextreme-react/drop-down-button';
 import List from 'devextreme-react/list';
 import { useAuth } from '../../contexts/auth';
 import './UserPanel.scss';
 <%=#isTypeScript%>import type { UserPanelProps } from '../../types';<%=/isTypeScript%>
 
 export default function UserPanel({ menuMode }<%=#isTypeScript%>: UserPanelProps<%=/isTypeScript%>) {
-  const { user, signOut } = useAuth();
+  const { signOut } = useAuth();
   const navigate = useNavigate();
 
   const navigateToProfile = useCallback(() => {
     navigate("/profile");
   }, [navigate]);
+
   const menuItems = useMemo(() => ([
     {
       text: 'Profile',
@@ -25,33 +26,29 @@ export default function UserPanel({ menuMode }<%=#isTypeScript%>: UserPanelProps
       onClick: signOut
     }
   ]), [navigateToProfile, signOut]);
-  return (
-    <div className={'user-panel'}>
-      <div className={'user-info'}>
-        <div className={'image-container'}>
-          <div
-            style={{
-              background: `url(${user<%=#isTypeScript%>!<%=/isTypeScript%>.avatarUrl}) no-repeat #fff`,
-              backgroundSize: 'cover'
-            }}
-            className={'user-image'} />
-        </div>
-        <div className={'user-name'}>{user<%=#isTypeScript%>!<%=/isTypeScript%>.email}</div>
-      </div>
 
+  const dropDownButtonAttributes = {
+    class: 'user-button'
+  };
+
+  const buttonDropDownOptions = {
+    width: '150px'
+  };
+
+  return (
+    <div className='user-panel'>
       {menuMode === 'context' && (
-        <ContextMenu
-          items={menuItems}
-          target={'.user-button'}
-          showEvent={'dxclick'}
-          width={210}
-          cssClass={'user-menu'}
-        >
-          <Position my={{ x: 'center', y: 'top' }} at={{ x: 'center', y: 'bottom' }} />
-        </ContextMenu>
+        <DropDownButton
+            stylingMode='text'
+            icon='https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'
+            showArrowIcon={false}
+            elementAttr={dropDownButtonAttributes}
+            dropDownOptions={buttonDropDownOptions}
+            items={menuItems}>
+        </DropDownButton>
       )}
       {menuMode === 'list' && (
-        <List className={'dx-toolbar-menu-action'} items={menuItems} />
+        <List items={menuItems} />
       )}
     </div>
   );

package/src/templates/react/application/src/dx-styles.scss

@@ -1,36 +1,45 @@
-@import "./themes/generated/variables.base.scss";
+$side-panel-min-width: 60px;
 
+html,
 body {
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    'Roboto',
-    'Oxygen',
-    'Ubuntu',
-    'Cantarell',
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  min-height: 100%;
+  height: 100%;
 }
 
-.app {
-  background-color: darken($base-bg, 5.00);
-  display: flex;
-  height: 100%;
-  width: 100%;
+.dx-viewport {
+  .dx-popup-wrapper {
+    z-index: 1510 !important;
+  }
+
+  #root {
+    height: 100%;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .app {
+    background-color: var(--base-bg-darken-5);
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
 
   .content {
     line-height: 1.5;
     flex-grow: 1;
+    padding: 20px 40px;
 
     h2 {
-      font-size: 30px;
-      margin-top: 20px;
-      margin-bottom: 20px;
+      font-size: 32px;
+      margin: 0;
+      line-height: 40px;
+    }
+
+    .screen-x-small & {
+      padding: 20px;
     }
   }
 
@@ -45,61 +54,48 @@ body {
     min-height: 0;
   }
 
+  .side-nav-outer-toolbar .dx-drawer {
+    height: calc(100% - 56px)
+  }
+
   .content-block {
-    margin-left: 40px;
-    margin-right: 40px;
     margin-top: 20px;
   }
-}
-
-.side-nav-outer-toolbar .dx-drawer {
-  height: calc(100% - 56px)
-}
 
-.screen-x-small .content-block {
-  margin-left: 20px;
-  margin-right: 20px;
-}
-
-.responsive-paddings {
-  padding: 20px;
+  .responsive-paddings {
+    padding: 20px;
 
-  .screen-large & {
-    padding: 40px;
+    .screen-large & {
+      padding: 40px;
+    }
   }
-}
-
-.dx-card.wide-card {
-  border-radius: 0;
-  margin-left: 0;
-  margin-right: 0;
-  border-right: 0;
-  border-left: 0;
-}
 
-.with-footer > .dx-scrollable-wrapper >
-.dx-scrollable-container > .dx-scrollable-content {
-  height: 100%;
-
-  & > .dx-scrollview-content {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
+  .dx-card.wide-card {
+    border-radius: 0;
+    margin-left: 0;
+    margin-right: 0;
+    border-right: 0;
+    border-left: 0;
   }
-}
 
-$side-panel-min-width: 60px;
+  .with-footer > .dx-scrollable-wrapper >
+  .dx-scrollable-container > .dx-scrollable-content {
+    height: 100%;
 
-html, body {
-  margin: 0px;
-  min-height: 100%;
-  height: 100%;
-}
+    & > .dx-scrollview-content {
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+    }
+  }
 
-#root {
-  height: 100%;
 }
 
-* {
-  box-sizing: border-box;
+.dx-theme-fluent {
+  .dx-drawer-wrapper {
+    .dx-drawer-panel-content,
+    .dx-overlay-content {
+      box-shadow: 0 4px 4px 0 var(--shadow-color-first), 0 1px 2px 0 var(--shadow-color-second);
+    }
+  }
 }

package/src/templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.scss

@@ -3,13 +3,8 @@
 }
 
 #navigation-header {
-  @import "../../themes/generated/variables.additional.scss";
-  background-color: $base-accent;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-
-  .menu-button .dx-icon {
-    color: $base-text-color;
-  }
+  background-color: var(--base-bg);
 
   .screen-x-small & {
     padding-left: 20px;

package/src/templates/react/application/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.scss

@@ -3,8 +3,8 @@
   display: flex;
   height: 100%;
   width: 100%;
-}
 
-.layout-header {
-  z-index: 1501;
+  .header-component {
+    z-index: 1505;
+  }
 }

package/src/templates/react/application/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.tsx

@@ -69,7 +69,7 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
         title={title}
       />
       <Drawer
-        className={['drawer', patchCssClass].join(' ')}
+        className={['drawer layout-body', patchCssClass].join(' ')}
         position={'before'}
         closeOnOutsideClick={onOutsideClick}
         openedStateMode={isLarge ? 'shrink' : 'overlap'}
@@ -81,7 +81,7 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
         template={'menu'}
       >
         <div className={'container'}>
-          <ScrollView ref={scrollViewRef} className={'layout-body with-footer'}>
+          <ScrollView ref={scrollViewRef} className={'with-footer'}>
             <div className={'content'}>
               {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
                 return item.type !== Footer && item;

package/src/templates/react/application/src/layouts/single-card/single-card.scss

@@ -1,6 +1,8 @@
 @import "../../themes/generated/variables.base.scss";
 
 .single-card {
+  width: 100%;
+  height: 100%;
 
   .dx-card {
     width: 330px;
@@ -22,14 +24,14 @@
       margin-bottom: 30px;
 
       .title {
-        color: $base-text-color;
+        color: var(--base-text-color);
         line-height: 28px;
         font-weight: 500;
         font-size: 24px;
       }
 
       .description {
-        color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+        color: var(--base-text-color-alpha-7);
         line-height: 18px;
       }
     }