review fix: designer's check

DevExpress · Dec 4, 2024 · cb2efc8 · cb2efc8
1 parent 3a40889
commit cb2efc8
Show file tree

Hide file tree

Showing 16 changed files with 326 additions and 174 deletions.
diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
@@ -1,35 +1,62 @@
-::ng-deep .dx-scheduler-group-header-content,
+::ng-deep .dx-scheduler-group-header,
 ::ng-deep .dx-scheduler-date-table-cell {
   position: relative;
 }
 
+::ng-deep .dx-color-scheme-light,
+::ng-deep .dx-color-scheme-carmine,
+::ng-deep .dx-color-scheme-softblue,
+::ng-deep .dx-color-scheme-blue-light,
+::ng-deep .dx-color-scheme-saas-light,
+::ng-deep .dx-color-scheme-lime-light,
+::ng-deep .dx-color-scheme-orange-light,
+::ng-deep .dx-color-scheme-purple-light,
+::ng-deep .dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+::ng-deep .dx-color-scheme-dark,
+::ng-deep .dx-color-scheme-darkviolet,
+::ng-deep .dx-color-scheme-darkmoon,
+::ng-deep .dx-color-scheme-blue-dark,
+::ng-deep .dx-color-scheme-saas-dark,
+::ng-deep .dx-color-scheme-lime-dark,
+::ng-deep .dx-color-scheme-orange-dark,
+::ng-deep .dx-color-scheme-purple-dark,
+::ng-deep .dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+::ng-deep .dx-scheduler-header .dx-toolbar .dx-button,
+::ng-deep .dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 ::ng-deep .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
-}
-
-::ng-deep .dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
-}
-
-::ng-deep .dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+  color: var(--disabled-color) !important;
+}
+
+::ng-deep .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
+}
+
+::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 ::ng-deep .dx-scheduler-date-table-cell .dx-template-wrapper {
@@ -39,7 +66,7 @@
   padding-right: 6px;
 }
 
-::ng-deep .avatar {
+::ng-deep  .avatar {
   width: 124px;
   float: left;
   overflow: hidden;
@@ -59,13 +86,13 @@
   left: 3px;
 }
 
-::ng-deep .avatar[title="Sandra Johnson"] img {
+::ng-deep .avatar[title="Greta Sims"] img {
   position: relative;
   width: 126px;
   height: 130px;
   object-fit: contain;
   top: 5px;
-  left: 3px;
+  left: -7px;
 }
 
 ::ng-deep .name {
@@ -76,20 +103,23 @@
 }
 
 ::ng-deep .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 ::ng-deep .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
   color: #707070;
 }
 

diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html
@@ -8,7 +8,7 @@
   [startDayHour]="8"
   [endDayHour]="18"
   [showAllDayPanel]="false"
-  [height]="600"
+  [height]="710"
   [groups]="['employeeID']"
   resourceCellTemplate="resourceCellTemplate"
   dataCellTemplate="dataCellTemplate"

diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
@@ -27,14 +27,14 @@ export class Data {
 const employees: Employee[] = [{
   text: 'John Heart',
   id: 1,
-  color: 'rgba(50, 134, 56, 1)',
+  color: 'var(--background-color-1)',
   avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
-  text: 'Sandra Johnson',
+  text: 'Greta Sims',
   id: 2,
-  color: 'rgba(194, 81, 0, 1)',
+  color: 'var(--background-color-2)',
   avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',

diff --git a/apps/demos/Demos/Scheduler/Overview/React/App.tsx b/apps/demos/Demos/Scheduler/Overview/React/App.tsx
@@ -20,7 +20,7 @@ const App = () => (
     views={views}
     defaultCurrentView="month"
     defaultCurrentDate={currentDate}
-    height={600}
+    height={710}
     showAllDayPanel={true}
     firstDayOfWeek={1}
     startDayHour={8}

diff --git a/apps/demos/Demos/Scheduler/Overview/React/data.ts b/apps/demos/Demos/Scheduler/Overview/React/data.ts
@@ -82,14 +82,14 @@ export const data: Appointment[] = [
 export const employees: Resource[] = [{
   text: 'John Heart',
   id: 1,
-  color: 'rgba(50, 134, 56, 1)',
+  color: 'var(--background-color-1)',
   avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
-  text: 'Sandra Johnson',
+  text: 'Greta Sims',
   id: 2,
-  color: 'rgba(194, 81, 0, 1)',
+  color: 'var(--background-color-2)',
   avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',

diff --git a/apps/demos/Demos/Scheduler/Overview/React/styles.css b/apps/demos/Demos/Scheduler/Overview/React/styles.css
@@ -3,33 +3,60 @@
   position: relative;
 }
 
+.dx-color-scheme-light,
+.dx-color-scheme-carmine,
+.dx-color-scheme-softblue,
+.dx-color-scheme-blue-light,
+.dx-color-scheme-saas-light,
+.dx-color-scheme-lime-light,
+.dx-color-scheme-orange-light,
+.dx-color-scheme-purple-light,
+.dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+.dx-color-scheme-dark,
+.dx-color-scheme-darkviolet,
+.dx-color-scheme-darkmoon,
+.dx-color-scheme-blue-dark,
+.dx-color-scheme-saas-dark,
+.dx-color-scheme-lime-dark,
+.dx-color-scheme-orange-dark,
+.dx-color-scheme-purple-dark,
+.dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+.dx-scheduler-header .dx-toolbar .dx-button,
+.dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
-}
-
-.dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
-}
-
-.dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+  color: var(--disabled-color) !important;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 .dx-scheduler-date-table-cell .dx-template-wrapper {
@@ -59,13 +86,13 @@
   left: 3px;
 }
 
-.avatar[title="Sandra Johnson"] img {
+.avatar[title="Greta Sims"] img {
   position: relative;
   width: 126px;
   height: 130px;
   object-fit: contain;
   top: 5px;
-  left: 3px;
+  left: -7px;
 }
 
 .name {
@@ -76,20 +103,23 @@
 }
 
 .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
   color: #707070;
 }
 
@@ -135,4 +165,3 @@
 .training-background-2 {
   background-image: url("../../../../images/gym/icon-fitball.png");
 }
-
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js
@@ -17,7 +17,7 @@ const App = () => (
     views={views}
     defaultCurrentView="month"
     defaultCurrentDate={currentDate}
-    height={600}
+    height={710}
     showAllDayPanel={true}
     firstDayOfWeek={1}
     startDayHour={8}

diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
@@ -82,15 +82,15 @@ export const employees = [
   {
     text: 'John Heart',
     id: 1,
-    color: 'rgba(50, 134, 56, 1)',
+    color: 'var(--background-color-1)',
     avatar: '../../../../images/employees/19.png',
     age: 27,
     discipline: 'ABS, Fitball, StepFit',
   },
   {
-    text: 'Sandra Johnson',
+    text: 'Greta Sims',
     id: 2,
-    color: 'rgba(194, 81, 0, 1)',
+    color: 'var(--background-color-2)',
     avatar: '../../../../images/employees/31.png',
     age: 25,
     discipline: 'ABS, Fitball, StepFit',