Skip to content

Commit d4cdeac

Browse files
simeonoffsimeonoff
authored
Merge pull request #7540 from IgniteUI/simeonoff/dockmgr-theme
feat(themes): add rudimentary support for the dock manager
2 parents 6b06e03 + 25242a5 commit d4cdeac

File tree

8 files changed

+669
-2
lines changed

8 files changed

+669
-2
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -282,8 +282,8 @@
282282

283283
$title-styles: igx-type-scale-category($type-scale, $title);
284284
$subtitle-styles: igx-type-scale-category($type-scale, $subtitle);
285-
$x-axis-label-styles: igx-type-scale-category($type-scale, $x-axis-label);
286-
$x-axis-title-styles: igx-type-scale-category($type-scale, $x-axis-title);
285+
$x-axis-label-styles: igx-type-scale-category($type-scale, $x-axis-label-text-style);
286+
$x-axis-title-styles: igx-type-scale-category($type-scale, $x-axis-title-text-style);
287287
$y-axis-label-styles: igx-type-scale-category($type-scale, $y-axis-label-text-style);
288288
$y-axis-title-styles: igx-type-scale-category($type-scale, $y-axis-title-text-style);
289289

‎projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
////
2+
/// @group themes
3+
/// @access public
4+
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
5+
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
6+
////
7+
8+
/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
9+
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
10+
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
11+
///
12+
/// @param {Color} $accent-color [null] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
13+
/// @param {Color} $active-color [null] - Sets the active text and border colors for tabs, panes, and menus.
14+
/// @param {Color} $border-color [null] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
15+
/// @param {Color} $button-text [null] - Sets the button text color.
16+
/// @param {Color} $context-menu-background [null] - Sets the background color for context menus.
17+
/// @param {Color} $context-menu-background-active [null] - Sets the background color for active context menus.
18+
/// @param {Color} $context-menu-color [null] - Sets the text color for context menus.
19+
/// @param {Color} $context-menu-color-active [null] - Sets the text color for active context menus.
20+
/// @param {Color} $dock-background [null] - Sets the background color of the dock manager.
21+
/// @param {Color} $dock-text [null] - Sets the text color of the dock manager.
22+
/// @param {Color} $floating-pane-border-color [null] - Sets the border color for floating panes.
23+
/// @param {Color} $flyout-shadow-color [null] - Sets the flyout shadow color.
24+
/// @param {Color} $joystick-background [null] - Sets the background color of the joystick.
25+
/// @param {Color} $joystick-background-active [null] - Sets the background color of the joysticks.
26+
/// @param {Color} $joystick-border-color [null] - Sets the border color of the joystick.
27+
/// @param {Color} $joystick-icon-color [null] - Sets the color for the joystick icons.
28+
/// @param {Color} $joystick-icon-color-active [null] - Sets the color of the active joystick icons.
29+
/// @param {Color} $pane-content-background [null] - Sets the background color of the content panes.
30+
/// @param {Color} $pane-content-text [null] - Sets the text color of the content panes.
31+
/// @param {Color} $pane-header-background [null] - Sets the background color for pane headers.
32+
/// @param {Color} $pane-header-text [null] - Sets the text color for pane headers.
33+
/// @param {Color} $pinned-header-background [null] - Sets the background colors of pinned headers.
34+
/// @param {Color} $pinned-header-text [null] - Sets the text colors of pinned headers.
35+
/// @param {Color} $background-color [null] - Sets the base dock manager color as well as the pane headers and tabs background colors.
36+
/// @param {Color} $splitter-background [null] - Sets the background color for the splitters.
37+
/// @param {Color} $splitter-handle [null] - Sets the background color for the splitter handles.
38+
/// @param {Color} $tab-background [null] - Sets the background color for tabs.
39+
/// @param {Color} $tab-background-active [null] - Sets the background color for active tabs.
40+
/// @param {Color} $tab-border-color [null] - Sets the border color for tabs.
41+
/// @param {Color} $tab-border-color-active [null] - Sets the border color for active tabs.
42+
/// @param {Color} $tab-text [null] - Sets the text color for tabs.
43+
/// @param {Color} $tab-text-active [null] - Sets the text color for active tabs.
44+
/// @param {Color} $text-color [null] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
45+
/// @requires $default-palette
46+
/// @requires $light-schema
47+
/// @requires apply-palette
48+
/// @requires text-contrast
49+
/// @requires extend
50+
///
51+
/// @example scss Change the background and icon colors in icon dock-managers
52+
/// $my-dock-manager-theme: igc-dock-manager-theme();
53+
/// // Pass the theme to the igc-dock-manager component mixin
54+
/// @include igx-css-vars($my-dock-manager-theme);
55+
@function igc-dock-manager-theme(
56+
$palette: $default-palette,
57+
$schema: $light-schema,
58+
$rest...
59+
) {
60+
$name: 'igc-dock-manager';
61+
$dock-manager-schema: ();
62+
63+
@if map-has-key($schema, $name) {
64+
$dock-manager-schema: map-get($schema, $name);
65+
} @else {
66+
$dock-manager-schema: $schema;
67+
}
68+
69+
$theme: apply-palette($dock-manager-schema, $palette);
70+
71+
@return extend($theme, (name: 'igc'), keywords($rest));
72+
}
73+
74+
75+
/// Adds typography styles for the dock manager component.
76+
/// @access private
77+
/// @group typography
78+
/// @requires {mixin} igx-type-style
79+
@mixin igx-dock-manager-typography() {
80+
$scope: if(is-root(), ':root', '&');
81+
82+
#{$scope} {
83+
@include css-vars-from-theme((font-family: inherit), 'igc');
84+
}
85+
}
86+

‎projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
@import '../components/date-range-picker/date-range-picker-theme';
3737
@import '../components/dialog/dialog-theme';
3838
@import '../components/divider/divider-theme';
39+
@import '../components/dock-manager/dock-manager-theme';
3940
@import '../components/drop-down/drop-down-theme';
4041
@import '../components/expansion-panel/expansion-panel-theme';
4142
@import '../components/grid/grid-theme';
@@ -360,6 +361,10 @@
360361
@include igx-divider(igx-divider-theme($palette, $schema));
361362
}
362363

364+
@if not(index($exclude, 'igc-dock-manager')) {
365+
@include igx-css-vars(igc-dock-manager-theme($palette, $schema));
366+
}
367+
363368
@if not(index($exclude, 'igx-drop-down')) {
364369
@include igx-drop-down(igx-drop-down-theme(
365370
$palette,

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dock-manager.scss

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
@import '../light/dock-manager';
2+
////
3+
/// @group schemas
4+
/// @access private
5+
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
6+
////
7+
8+
/// Generates a dark dock-manager schema.
9+
/// @type {Map}
10+
/// @requires {function} extend
11+
/// @prop {Color} accent-color [igx-color: ('grays', 400), hexrgba: #000] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
12+
/// @prop {Color} background-color [igx-color: ('grays', 200), hexrgba: #000] - Sets the base dock manager color as well as the pane headers and tabs background colors.
13+
/// @prop {Color} border-color [igx-color: 'surface'] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
14+
/// @prop {Color} button-text [igx-contrast-color: 'surface'] - Sets the button text color.
15+
/// @prop {Color} floating-pane-border-color [igx-color: ('grays', 100), hexrgba: #000] - Sets the border color for floating panes.
16+
/// @prop {Color} flyout-shadow-color [rgba(0, 0, 0, .38)] - Sets the border color for floating panes.
17+
/// @prop {Color} joystick-background-active [igx-color: 'surface'] - Sets the background color of the joysticks.
18+
/// @prop {Color} joystick-border-color [igx-color: ('grays', 400), hexrgba: #000] - Sets the border color of the joystick.
19+
/// @prop {Color} joystick-icon-color [igx-contrast-color: 'surface'] - Sets the color for the joystick icons.
20+
/// @prop {Color} pane-content-background [igx-color: 'surface'] - Sets the background color of the content panes.
21+
/// @prop {Color} splitter-background [igx-clor: ('grays', 100), hexrgba: #000] - Sets the background color for the splitters.
22+
/// @prop {Color} tab-background-active [igx-color: 'surface'] - Sets the background color for active tabs.
23+
/// @requires $_light-dock-manager
24+
$_dark-dock-manager: extend(
25+
$_light-dock-manager, (
26+
accent-color: (
27+
igx-color: ('grays', 400),
28+
hexrgba: #000,
29+
),
30+
background-color: (
31+
igx-color: ('grays', 200),
32+
hexrgba: #000,
33+
),
34+
border-color: (
35+
igx-color: 'surface',
36+
),
37+
button-text: (
38+
igx-contrast-color: 'surface',
39+
),
40+
floating-pane-border-color: (
41+
igx-color: ('grays', 100),
42+
hexrgba: #000,
43+
),
44+
flyout-shadow-color: rgba(0, 0, 0, .38),
45+
joystick-background-active: (
46+
igx-color: 'surface',
47+
),
48+
joystick-border-color: (
49+
igx-color: ('grays', 400),
50+
hexrgba: #000,
51+
),
52+
joystick-icon-color: (
53+
igx-contrast-color: 'surface',
54+
),
55+
pane-content-background: (
56+
igx-color: 'surface',
57+
),
58+
splitter-background: (
59+
igx-color: ('grays', 100),
60+
hexrgba: #000,
61+
),
62+
tab-background-active: (
63+
igx-color: 'surface',
64+
),
65+
)
66+
);
67+
68+
/// Generates a dark fluent dock-manager schema.
69+
/// @type {Map}
70+
/// @prop {Color} accent-color [igx-color: 'surface', rgba: .5, hexrgba: #000] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
71+
/// @prop {Color} background-color [igx-color: 'surface', rgba: .85, hexrgba: #000] - Sets the base dock manager color as well as the pane headers and tabs background colors.
72+
/// @prop {Color} button-text [igx-contrast-color: 'surface'] - Sets the button text color.
73+
/// @prop {Color} context-menu-background-active [igx-color: 'surface', rgba: .5, hexrgba: #000] - Sets the background color for active context menus.
74+
/// @prop {Color} context-menu-color-active [igx-contrast-color: 'surface'] - Sets the text color for active context menus.
75+
/// @prop {Color} context-menu-background [igx-color: ('grays', 400), hexrgba: #000] - Sets the background color for context menus.
76+
/// @prop {Color} context-menu-color [igx-contrast-color: 'surface'] - Sets the text color for context menus.
77+
/// @prop {Color} dock-background [igx-color: 'surface', rgba: .85, hexrgba: #000] - Sets the background color of the dock manager.
78+
/// @prop {Color} floating-pane-border-color [transparent] - Sets the border color for floating panes.
79+
/// @prop {Color} joystick-background-active [igx-color: 'surface', rgba: .5, hexrgba: #000] - Sets the background color of the joysticks.
80+
/// @prop {Color} joystick-background [igx-color: ('grays', 400), hexrgba: #000] - Sets the background color of the joystick.
81+
/// @prop {Color} joystick-border-color [transparent] - Sets the border color of the joystick.
82+
/// @prop {Color} joystick-icon-color [igx-contrast-color: 'surface'] - Sets the color for the joystick icons.
83+
/// @prop {Color} joystick-icon-color-active [igx-contrast-color: 'surface'] - Sets the color of the active joystick icons.
84+
/// @prop {Color} pane-header-background [igx-color: 'surface', rgba: .33, hexrgba: #000] - Sets the background color for pane headers.
85+
/// @prop {Color} pinned-header-background [igx-color: 'surface', rgba: .85, hexrgba: #000] - Sets the background colors of pinned headers.
86+
/// @prop {Color} splitter-background [igx-color: 'surface', rgba: .7, hexrgba: #000] - Sets the background color for the splitters.
87+
/// @prop {Color} splitter-handle [igx-color: 'surface', rgba: .2, hexrgba: #000] - Sets the background color for the splitter handles.
88+
/// @prop {Color} tab-text [igx-contrast-color: 'surface'] - Sets the text color for tabs.
89+
/// @prop {Color} text-color [igx-contrast-color: 'surface'] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
90+
/// @requires {function} extend
91+
/// @requires $_fluent-dock-manager
92+
$_dark-fluent-dock-manager: extend(
93+
$_fluent-dock-manager, (
94+
accent-color: (
95+
igx-color: 'surface',
96+
rgba: .5,
97+
hexrgba: #000,
98+
),
99+
background-color: (
100+
igx-color: 'surface',
101+
rgba: .85,
102+
hexrgba: #000,
103+
),
104+
button-text: (
105+
igx-contrast-color: 'surface',
106+
),
107+
context-menu-background-active: (
108+
igx-color: 'surface',
109+
rgba: .5,
110+
hexrgba: #000,
111+
),
112+
context-menu-color-active: (
113+
igx-contrast-color: 'surface',
114+
),
115+
context-menu-background: (
116+
igx-color: ('grays', 400),
117+
hexrgba: #000,
118+
),
119+
context-menu-color: (
120+
igx-contrast-color: 'surface',
121+
),
122+
dock-background: (
123+
igx-color: 'surface',
124+
rgba: .85,
125+
hexrgba: #000,
126+
),
127+
floating-pane-border-color: transparent,
128+
joystick-background-active: (
129+
igx-color: 'surface',
130+
rgba: .5,
131+
hexrgba: #000,
132+
),
133+
joystick-background: (
134+
igx-color: ('grays', 400),
135+
hexrgba: #000,
136+
),
137+
joystick-border-color: transparent,
138+
joystick-icon-color: (
139+
igx-contrast-color: 'surface',
140+
),
141+
joystick-icon-color-active: (
142+
igx-contrast-color: 'surface',
143+
),
144+
pane-header-backround: (
145+
igx-color: 'surface',
146+
rgba: .85,
147+
hexrgba: #000,
148+
),
149+
pinned-header-background: (
150+
igx-color: 'surface',
151+
rgba: .85,
152+
hexrgba: #000,
153+
),
154+
splitter-background: (
155+
igx-color: 'surface',
156+
rgba: .7,
157+
hexrgba: #000,
158+
),
159+
splitter-handle: (
160+
igx-color: 'surface',
161+
rgba: .2,
162+
hexrgba: #000,
163+
),
164+
tab-text: (
165+
igx-contrast-color: 'surface',
166+
),
167+
text-color: (
168+
igx-contrast-color: 'surface',
169+
),
170+
)
171+
);
172+
173+
/// Generates a dark bootstrap dock-manager schema.
174+
/// @type {Map}
175+
/// @prop {Color} accent-color [igx-color: 'surface', rgba: .33, hexrgba: ()] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
176+
/// @prop {Color} background-color [igx-color: 'surface', rgba: .33, hexrgba: ()] - Sets the base dock manager color as well as the pane headers and tabs background colors.
177+
/// @prop {Color} context-menu-background [igx-color: 'surface', rgba: .66, hexrgba: ()] - Sets the background color for context menus.
178+
/// @prop {Color} context-menu-color-active [igx-context-color: 'surface'] - Sets the text color for active context menus.
179+
/// @prop {Color} dock-background [igx-color: 'surface', rgba: .33, hexrgba: ()] - Sets the background color of the dock manager.
180+
/// @prop {Color} joystick-background [igx-color: 'surface', rgba: .66, hexrgba: ()] - Sets the background color of the joystick.
181+
/// @prop {Color} joystick-icon-color-active [igx-context-color: 'surface'] - Sets the color of the active joystick icons.
182+
/// @prop {Color} pane-header-background [igx-color: 'surface', rgba: .33, hexrgba: ()] - Sets the background color for pane headers.
183+
/// @prop {Color} pinned-header-background [igx-color: 'surface', rgba: .33, hexrgba: ()] - Sets the background colors of pinned headers.
184+
/// @prop {Color} splitter-background [igx-color: ('grays', 300), hexrgba: ()] - Sets the background color for the splitters.
185+
/// @prop {Color} splitter-handle [igx-color: ('grays', 50), hexrgba: ()] - Sets the background color for the splitter handles.
186+
/// @prop {Color} text-color [igx-contrast-color: 'surface'] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
187+
/// @requires {function} extend
188+
/// @requires $_bootstrap-dock-manager
189+
$_dark-bootstrap-dock-manager: extend(
190+
$_bootstrap-dock-manager, (
191+
accent-color: (
192+
igx-color: 'surface',
193+
rgba: .33,
194+
hexrgba: #000,
195+
),
196+
background-color: (
197+
igx-color: 'surface',
198+
rgba: .33,
199+
hexrgba: #000,
200+
),
201+
context-menu-background: (
202+
igx-color: 'surface',
203+
rgba: .66,
204+
hexrgba: #000,
205+
),
206+
context-menu-color-active: (
207+
igx-contrast-color: 'surface',
208+
),
209+
dock-background: (
210+
igx-color: 'surface',
211+
rgba: .33,
212+
hexrgba: #000,
213+
),
214+
joystick-background: (
215+
igx-color: 'surface',
216+
rgba: .66,
217+
hexrgba: #000,
218+
),
219+
joystick-icon-color-active: (
220+
igx-contrast-color: 'surface',
221+
),
222+
pane-header-background: (
223+
igx-color: 'surface',
224+
rgba: .33,
225+
hexrgba: #000,
226+
),
227+
pinned-header-background: (
228+
igx-color: 'surface',
229+
rgba: .33,
230+
hexrgba: #000,
231+
),
232+
splitter-background: (
233+
igx-color: ('grays', 300),
234+
hexrgba: #000,
235+
),
236+
splitter-handle: (
237+
igx-color: ('grays', 50),
238+
hexrgba: #000,
239+
),
240+
text-color: (
241+
igx-contrast-color: 'surface',
242+
),
243+
)
244+
);

0 commit comments

Comments
 (0)