1 | "use strict";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | Object.defineProperty(exports, "__esModule", { value: true });
|
18 | exports.ButtonStylingParticipant = exports.TabbarStylingParticipant = exports.BadgeStylingParticipant = exports.MenuStylingParticipant = exports.StatusBarStylingParticipant = exports.BreadcrumbStylingParticipant = exports.TreeStylingParticipant = exports.ActionLabelStylingParticipant = exports.bindCommonStylingParticipants = void 0;
|
19 | const tslib_1 = require("tslib");
|
20 | const inversify_1 = require("inversify");
|
21 | const styling_service_1 = require("./styling-service");
|
22 | const theme_1 = require("../common/theme");
|
23 | function bindCommonStylingParticipants(bind) {
|
24 | for (const participant of [
|
25 | ActionLabelStylingParticipant,
|
26 | BadgeStylingParticipant,
|
27 | BreadcrumbStylingParticipant,
|
28 | ButtonStylingParticipant,
|
29 | MenuStylingParticipant,
|
30 | TabbarStylingParticipant,
|
31 | TreeStylingParticipant,
|
32 | StatusBarStylingParticipant
|
33 | ]) {
|
34 | bind(participant).toSelf().inSingletonScope();
|
35 | bind(styling_service_1.StylingParticipant).toService(participant);
|
36 | }
|
37 | }
|
38 | exports.bindCommonStylingParticipants = bindCommonStylingParticipants;
|
39 | let ActionLabelStylingParticipant = class ActionLabelStylingParticipant {
|
40 | registerThemeStyle(theme, collector) {
|
41 | const focusBorder = theme.getColor('focusBorder');
|
42 | if ((0, theme_1.isHighContrast)(theme.type) && focusBorder) {
|
43 | if (focusBorder) {
|
44 | collector.addRule(`
|
45 | .action-label:hover {
|
46 | outline: 1px dashed ${focusBorder};
|
47 | }
|
48 | `);
|
49 | }
|
50 | }
|
51 | }
|
52 | };
|
53 | ActionLabelStylingParticipant = (0, tslib_1.__decorate)([
|
54 | (0, inversify_1.injectable)()
|
55 | ], ActionLabelStylingParticipant);
|
56 | exports.ActionLabelStylingParticipant = ActionLabelStylingParticipant;
|
57 | let TreeStylingParticipant = class TreeStylingParticipant {
|
58 | registerThemeStyle(theme, collector) {
|
59 | const focusBorder = theme.getColor('focusBorder');
|
60 | if ((0, theme_1.isHighContrast)(theme.type) && focusBorder) {
|
61 | collector.addRule(`
|
62 | .theia-TreeNode {
|
63 | outline-offset: -1px;
|
64 | }
|
65 | .theia-TreeNode:hover {
|
66 | outline: 1px dashed ${focusBorder};
|
67 | }
|
68 | .theia-Tree .theia-TreeNode.theia-mod-selected {
|
69 | outline: 1px dotted ${focusBorder};
|
70 | }
|
71 | .theia-Tree:focus .theia-TreeNode.theia-mod-selected,
|
72 | .theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected {
|
73 | outline: 1px solid ${focusBorder};
|
74 | }
|
75 | `);
|
76 | }
|
77 | }
|
78 | };
|
79 | TreeStylingParticipant = (0, tslib_1.__decorate)([
|
80 | (0, inversify_1.injectable)()
|
81 | ], TreeStylingParticipant);
|
82 | exports.TreeStylingParticipant = TreeStylingParticipant;
|
83 | let BreadcrumbStylingParticipant = class BreadcrumbStylingParticipant {
|
84 | registerThemeStyle(theme, collector) {
|
85 | const contrastBorder = theme.getColor('contrastBorder');
|
86 | if ((0, theme_1.isHighContrast)(theme.type) && contrastBorder) {
|
87 | collector.addRule(`
|
88 | .theia-tabBar-breadcrumb-row {
|
89 | outline: 1px solid ${contrastBorder};
|
90 | }
|
91 | `);
|
92 | }
|
93 | }
|
94 | };
|
95 | BreadcrumbStylingParticipant = (0, tslib_1.__decorate)([
|
96 | (0, inversify_1.injectable)()
|
97 | ], BreadcrumbStylingParticipant);
|
98 | exports.BreadcrumbStylingParticipant = BreadcrumbStylingParticipant;
|
99 | let StatusBarStylingParticipant = class StatusBarStylingParticipant {
|
100 | registerThemeStyle(theme, collector) {
|
101 | const focusBorder = theme.getColor('focusBorder');
|
102 | if ((0, theme_1.isHighContrast)(theme.type) && focusBorder) {
|
103 | collector.addRule(`
|
104 | #theia-statusBar .area .element.hasCommand:hover {
|
105 | outline: 1px dashed ${focusBorder};
|
106 | }
|
107 | #theia-statusBar .area .element.hasCommand:active {
|
108 | outline: 1px solid ${focusBorder};
|
109 | }
|
110 | .theia-mod-offline #theia-statusBar .area .element.hasCommand:hover {
|
111 | outline: none;
|
112 | }
|
113 | .theia-mod-offline #theia-statusBar .area .element.hasCommand:active {
|
114 | outline: none;
|
115 | }
|
116 | `);
|
117 | }
|
118 | else {
|
119 | collector.addRule(`
|
120 | #theia-statusBar .area .element.hasCommand:hover {
|
121 | background-color: var(--theia-statusBarItem-hoverBackground);
|
122 | }
|
123 | #theia-statusBar .area .element.hasCommand:active {
|
124 | background-color: var(--theia-statusBarItem-activeBackground);
|
125 | }
|
126 | .theia-mod-offline #theia-statusBar .area .element.hasCommand:hover {
|
127 | background-color: var(--theia-statusBarItem-offlineHoverBackground) !important;
|
128 | }
|
129 | .theia-mod-offline #theia-statusBar .area .element.hasCommand:active {
|
130 | background-color: var(--theia-statusBarItem-offlineActiveBackground) !important;
|
131 | }
|
132 | `);
|
133 | }
|
134 | }
|
135 | };
|
136 | StatusBarStylingParticipant = (0, tslib_1.__decorate)([
|
137 | (0, inversify_1.injectable)()
|
138 | ], StatusBarStylingParticipant);
|
139 | exports.StatusBarStylingParticipant = StatusBarStylingParticipant;
|
140 | let MenuStylingParticipant = class MenuStylingParticipant {
|
141 | registerThemeStyle(theme, collector) {
|
142 | const focusBorder = theme.getColor('focusBorder');
|
143 | if ((0, theme_1.isHighContrast)(theme.type) && focusBorder) {
|
144 |
|
145 | collector.addRule(`
|
146 | .p-Menu .p-Menu-item.p-mod-active {
|
147 | outline: 1px solid ${focusBorder};
|
148 | outline-offset: -1px;
|
149 | }
|
150 | .p-MenuBar .p-MenuBar-item.p-mod-active {
|
151 | outline: 1px dashed ${focusBorder};
|
152 | }
|
153 | .p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
|
154 | outline: 1px solid ${focusBorder};
|
155 | }
|
156 | `);
|
157 |
|
158 | collector.addRule(`
|
159 | .theia-sidebar-menu > :hover {
|
160 | outline: 1px dashed ${focusBorder};
|
161 | outline-offset: -7px;
|
162 | }
|
163 | `);
|
164 | }
|
165 | }
|
166 | };
|
167 | MenuStylingParticipant = (0, tslib_1.__decorate)([
|
168 | (0, inversify_1.injectable)()
|
169 | ], MenuStylingParticipant);
|
170 | exports.MenuStylingParticipant = MenuStylingParticipant;
|
171 | let BadgeStylingParticipant = class BadgeStylingParticipant {
|
172 | registerThemeStyle(theme, collector) {
|
173 | const contrastBorder = theme.getColor('contrastBorder');
|
174 | if ((0, theme_1.isHighContrast)(theme.type) && contrastBorder) {
|
175 | collector.addRule(`.p-TabBar .theia-badge-decorator-sidebar {
|
176 | outline: 1px solid ${contrastBorder};
|
177 | }`);
|
178 | }
|
179 | }
|
180 | };
|
181 | BadgeStylingParticipant = (0, tslib_1.__decorate)([
|
182 | (0, inversify_1.injectable)()
|
183 | ], BadgeStylingParticipant);
|
184 | exports.BadgeStylingParticipant = BadgeStylingParticipant;
|
185 | let TabbarStylingParticipant = class TabbarStylingParticipant {
|
186 | registerThemeStyle(theme, collector) {
|
187 | const focusBorder = theme.getColor('focusBorder');
|
188 | const contrastBorder = theme.getColor('contrastBorder');
|
189 | const highContrast = (0, theme_1.isHighContrast)(theme.type);
|
190 | if (highContrast && focusBorder) {
|
191 | collector.addRule(`
|
192 | #theia-bottom-content-panel .p-TabBar .p-TabBar-tab,
|
193 | #theia-main-content-panel .p-TabBar .p-TabBar-tab {
|
194 | outline-offset: -4px;
|
195 | }
|
196 | #theia-bottom-content-panel .p-TabBar .p-TabBar-tab.p-mod-current,
|
197 | #theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
|
198 | outline: 1px solid ${focusBorder};
|
199 | }
|
200 | #theia-bottom-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.p-mod-current,
|
201 | #theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.p-mod-current {
|
202 | outline: 1px dotted ${focusBorder};
|
203 | }
|
204 | #theia-bottom-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current):hover,
|
205 | #theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current):hover {
|
206 | outline: 1px dashed ${focusBorder};
|
207 | }
|
208 | `);
|
209 | }
|
210 | const tabActiveBackground = theme.getColor('tab.activeBackground');
|
211 | const tabActiveBorderTop = theme.getColor('tab.activeBorderTop');
|
212 | const tabUnfocusedActiveBorderTop = theme.getColor('tab.unfocusedActiveBorderTop');
|
213 | const tabActiveBorder = theme.getColor('tab.activeBorder') || (highContrast && contrastBorder) || 'transparent';
|
214 | const tabUnfocusedActiveBorder = theme.getColor('tab.unfocusedActiveBorder') || (highContrast && contrastBorder) || 'transparent';
|
215 | collector.addRule(`
|
216 | #theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
|
217 | color: var(--theia-tab-activeForeground);
|
218 | ${tabActiveBackground ? `background: ${tabActiveBackground};` : ''}
|
219 | ${tabActiveBorderTop ? `border-top: 1px solid ${tabActiveBorderTop};` : ''}
|
220 | border-bottom: 1px solid ${tabActiveBorder};
|
221 | }
|
222 | #theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.p-mod-current {
|
223 | background: var(--theia-tab-unfocusedActiveBackground);
|
224 | color: var(--theia-tab-unfocusedActiveForeground);
|
225 | ${tabUnfocusedActiveBorderTop ? `border-top: 1px solid ${tabUnfocusedActiveBorderTop};` : ''}
|
226 | border-bottom: 1px solid ${tabUnfocusedActiveBorder};
|
227 | }
|
228 | `);
|
229 |
|
230 | const tabActiveModifiedBorder = theme.getColor('tab.activeModifiedBorder');
|
231 | const tabUnfocusedInactiveModifiedBorder = theme.getColor('tab.unfocusedInactiveModifiedBorder');
|
232 | const tabInactiveModifiedBorder = theme.getColor('tab.inactiveModifiedBorder');
|
233 | if (tabActiveModifiedBorder || tabInactiveModifiedBorder) {
|
234 | collector.addRule(`
|
235 | body.theia-editor-highlightModifiedTabs
|
236 | #theia-main-content-panel .p-TabBar .p-TabBar-tab.theia-mod-dirty {
|
237 | border-top: 2px solid ${tabInactiveModifiedBorder};
|
238 | padding-bottom: 1px;
|
239 | }
|
240 |
|
241 | body.theia-editor-highlightModifiedTabs
|
242 | #theia-main-content-panel .p-TabBar.theia-tabBar-active .p-TabBar-tab.theia-mod-dirty.p-mod-current {
|
243 | border-top: 2px solid ${tabActiveModifiedBorder};
|
244 | }
|
245 |
|
246 | body.theia-editor-highlightModifiedTabs
|
247 | #theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.theia-mod-dirty:not(.p-mod-current) {
|
248 | border-top: 2px solid ${tabUnfocusedInactiveModifiedBorder};
|
249 | }
|
250 | `);
|
251 | }
|
252 |
|
253 | const activityBarActiveBorder = theme.getColor('activityBar.activeBorder') || 'var(--theia-activityBar-foreground)';
|
254 | collector.addRule(`
|
255 | .p-TabBar.theia-app-left .p-TabBar-tab.p-mod-current {
|
256 | border-top-color: transparent;
|
257 | box-shadow: 2px 0 0 ${activityBarActiveBorder} inset;
|
258 | }
|
259 |
|
260 | .p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current {
|
261 | border-top-color: transparent;
|
262 | box-shadow: -2px 0 0 ${activityBarActiveBorder} inset;
|
263 | }
|
264 | `);
|
265 |
|
266 | const tabHoverBackground = theme.getColor('tab.hoverBackground');
|
267 | if (tabHoverBackground) {
|
268 | collector.addRule(`
|
269 | #theia-main-content-panel .p-TabBar .p-TabBar-tab:hover {
|
270 | background-color: ${tabHoverBackground};
|
271 | }
|
272 | `);
|
273 | }
|
274 | const tabUnfocusedHoverBackground = theme.getColor('tab.unfocusedHoverBackground');
|
275 | if (tabUnfocusedHoverBackground) {
|
276 | collector.addRule(`
|
277 | #theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab:hover {
|
278 | background-color: ${tabUnfocusedHoverBackground};
|
279 | }
|
280 | `);
|
281 | }
|
282 |
|
283 | const tabHoverForeground = theme.getColor('tab.hoverForeground');
|
284 | if (tabHoverForeground) {
|
285 | collector.addRule(`
|
286 | #theia-main-content-panel .p-TabBar .p-TabBar-tab:hover {
|
287 | color: ${tabHoverForeground};
|
288 | }
|
289 | `);
|
290 | }
|
291 | const tabUnfocusedHoverForeground = theme.getColor('tab.unfocusedHoverForeground');
|
292 | if (tabUnfocusedHoverForeground) {
|
293 | collector.addRule(`
|
294 | #theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab:hover {
|
295 | color: ${tabUnfocusedHoverForeground};
|
296 | }
|
297 | `);
|
298 | }
|
299 |
|
300 | const tabHoverBorder = theme.getColor('tab.hoverBorder');
|
301 | if (tabHoverBorder) {
|
302 | collector.addRule(`
|
303 | #theia-main-content-panel .p-TabBar .p-TabBar-tab:hover {
|
304 | box-shadow: 0 1px 0 ${tabHoverBorder} inset;
|
305 | }
|
306 | `);
|
307 | }
|
308 | const tabUnfocusedHoverBorder = theme.getColor('tab.unfocusedHoverBorder');
|
309 | if (tabUnfocusedHoverBorder) {
|
310 | collector.addRule(`
|
311 | #theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab:hover {
|
312 | box-shadow: 0 1px 0 ${tabUnfocusedHoverBorder} inset;
|
313 | }
|
314 | `);
|
315 | }
|
316 | }
|
317 | };
|
318 | TabbarStylingParticipant = (0, tslib_1.__decorate)([
|
319 | (0, inversify_1.injectable)()
|
320 | ], TabbarStylingParticipant);
|
321 | exports.TabbarStylingParticipant = TabbarStylingParticipant;
|
322 | let ButtonStylingParticipant = class ButtonStylingParticipant {
|
323 | registerThemeStyle(theme, collector) {
|
324 | const contrastBorder = theme.getColor('contrastBorder');
|
325 | if ((0, theme_1.isHighContrast)(theme.type) && contrastBorder) {
|
326 | collector.addRule(`
|
327 | .theia-button {
|
328 | border: 1px solid ${contrastBorder};
|
329 | }
|
330 | `);
|
331 | }
|
332 | const buttonBackground = theme.getColor('button.background');
|
333 | collector.addRule(`
|
334 | .theia-button {
|
335 | background: ${buttonBackground || 'none'};
|
336 | }
|
337 | `);
|
338 | const buttonHoverBackground = theme.getColor('button.hoverBackground');
|
339 | if (buttonHoverBackground) {
|
340 | collector.addRule(`
|
341 | .theia-button:hover {
|
342 | background-color: ${buttonHoverBackground};
|
343 | }
|
344 | `);
|
345 | }
|
346 | const secondaryButtonBackground = theme.getColor('secondaryButton.background');
|
347 | collector.addRule(`
|
348 | .theia-button.secondary {
|
349 | background: ${secondaryButtonBackground || 'none'};
|
350 | }
|
351 | `);
|
352 | const secondaryButtonHoverBackground = theme.getColor('secondaryButton.hoverBackground');
|
353 | if (secondaryButtonHoverBackground) {
|
354 | collector.addRule(`
|
355 | .theia-button.secondary:hover {
|
356 | background-color: ${secondaryButtonHoverBackground};
|
357 | }
|
358 | `);
|
359 | }
|
360 | }
|
361 | };
|
362 | ButtonStylingParticipant = (0, tslib_1.__decorate)([
|
363 | (0, inversify_1.injectable)()
|
364 | ], ButtonStylingParticipant);
|
365 | exports.ButtonStylingParticipant = ButtonStylingParticipant;
|
366 |
|
\ | No newline at end of file |