Skip to content

Commit 8a07902

Browse files
hsuanxyzhsuanxyz
committed
chore: update theme variables
1 parent 10f7c78 commit 8a07902

File tree

8 files changed

+111
-46
lines changed

8 files changed

+111
-46
lines changed

‎zeppelin-frontend/src/app/pages/workspace/job-manager/job-manager.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
<zeppelin-job-manager-job
5555
*ngFor="let item of filteredJobs"
5656
[note]="item"
57+
[highlight]="filterString"
5758
(start)="onStart($event)"
5859
(stop)="onStop($event)">
5960
</zeppelin-job-manager-job>

‎zeppelin-frontend/src/app/pages/workspace/job-manager/job-manager.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export class JobManagerComponent extends MessageListenersManager implements OnIn
3030
sortKeys = Object.keys(JobDateSortKeys).map(k => JobDateSortKeys[k]);
3131
interpreters: string[] = [];
3232
filteredJobs: JobsItem[] = [];
33+
filterString: string = '';
3334
jobs: JobsItem[] = [];
3435
loading = true;
3536

@@ -61,6 +62,7 @@ export class JobManagerComponent extends MessageListenersManager implements OnIn
6162

6263
filterJobs() {
6364
const filterData = this.form.getRawValue() as FilterForm;
65+
this.filterString = filterData.noteName;
6466
const isSortByAsc = filterData.sortBy === JobDateSortKeys.OLDEST_UPDATED;
6567
this.filteredJobs = this.jobs
6668
.filter(job => {

‎zeppelin-frontend/src/app/pages/workspace/job-manager/job-manager.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
NzEmptyModule,
1212
NzFormModule,
1313
NzGridModule,
14+
NzHighlightModule,
1415
NzIconModule,
1516
NzInputModule,
1617
NzModalModule,
@@ -36,6 +37,7 @@ const icons: IconDefinition[] = [SearchOutline, FileOutline, FileUnknownOutline,
3637
CommonModule,
3738
FormsModule,
3839
ReactiveFormsModule,
40+
NzHighlightModule,
3941
ShareModule,
4042
NzIconModule,
4143
NzInputModule,

‎zeppelin-frontend/src/app/pages/workspace/job-manager/job/job.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[nzType]="icon"
66
nzTheme="outline">
77
</i>
8-
<a [routerLink]="['notebook', note.noteId]">{{note.noteName}}</a> -
8+
<a [routerLink]="['notebook', note.noteId]" [innerHTML]="note.noteName | nzHighlight: highlight: 'gi': 'mark-highlight'"></a> -
99
<span class="interpreter"
1010
[class.unset]="!note.interpreter">
1111
{{note.interpreter || 'interpreter is not set'}}

‎zeppelin-frontend/src/app/pages/workspace/job-manager/job/job.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,10 @@ import { JobsItem, JobStatus } from '@zeppelin/sdk';
2121
})
2222
export class JobManagerJobComponent implements OnInit, OnChanges {
2323
@Input() note: JobsItem;
24+
@Input() highlight: string | null = null;
2425
@Output() readonly start = new EventEmitter<string>();
2526
@Output() readonly stop = new EventEmitter<string>();
27+
2628
icon = 'file';
2729
relativeTime = '';
2830
progress = 0;

‎zeppelin-frontend/src/styles/global.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
@import '../../node_modules/ng-zorro-antd/src/style/color/colors';
22

3+
.mark-highlight {
4+
color: crimson;
5+
}
6+
37
.tips {
48
&.warning {
59
color: @volcano-6;

‎zeppelin-frontend/src/styles/theme/dark/theme-dark.less‎

Lines changed: 49 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,10 @@
175175
@btn-circle-size-lg: @btn-height-lg;
176176
@btn-circle-size-sm: @btn-height-sm;
177177

178+
@btn-square-size: @btn-height-base;
179+
@btn-square-size-lg: @btn-height-lg;
180+
@btn-square-size-sm: @btn-height-sm;
181+
178182
@btn-group-border: @primary-5;
179183

180184
// Checkbox
@@ -183,6 +187,9 @@
183187
@checkbox-check-color: #fff;
184188
@checkbox-border-width: @border-width-base;
185189

190+
// Descriptions
191+
@descriptions-bg: #fafafa;
192+
186193
// Empty
187194
@empty-font-size: @font-size-base;
188195

@@ -298,6 +305,9 @@
298305
@input-border-color: @border-color-base;
299306
@input-bg: #fff;
300307
@input-number-handler-active-bg: #f4f4f4;
308+
@input-number-handler-hover-bg: @primary-5;
309+
@input-number-handler-bg: @component-background;
310+
@input-number-handler-border-color: @border-color-base;
301311
@input-addon-bg: @background-color-light;
302312
@input-hover-border-color: @primary-color;
303313
@input-disabled-bg: @disabled-bg;
@@ -307,6 +317,13 @@
307317
// ---
308318
@select-border-color: @border-color-base;
309319
@select-item-selected-font-weight: 600;
320+
@select-dropdown-bg: @component-background;
321+
@select-item-selected-bg: @background-color-light;
322+
@select-item-active-bg: @item-active-bg;
323+
324+
// Anchor
325+
// ---
326+
@anchor-border-color: @border-color-split;
310327

311328
// Tooltip
312329
// ---
@@ -345,8 +362,9 @@
345362
// --
346363
@modal-body-padding: 24px;
347364
@modal-header-bg: @component-background;
348-
@modal-footer-bg: tranparent;
349-
@modal-mask-bg: fade(@black, 65%);
365+
@modal-footer-bg: transparent;
366+
@modal-footer-border-color-split: @border-color-split;
367+
@modal-mask-bg: fade(@black, 45%);
350368

351369
// Progress
352370
// --
@@ -366,13 +384,28 @@
366384
@menu-item-active-bg: @item-active-bg;
367385
@menu-item-active-border-width: 3px;
368386
@menu-item-group-title-color: @text-color-secondary;
387+
@menu-icon-size: @font-size-base;
388+
@menu-icon-size-lg: @font-size-lg;
389+
390+
@menu-item-vertical-margin: 4px;
391+
@menu-item-font-size: @font-size-base;
392+
@menu-item-boundary-margin: 8px;
393+
@menu-icon-size: @font-size-base;
394+
@menu-icon-size-lg: @font-size-lg;
395+
@menu-dark-selected-item-icon-color: @white;
396+
@menu-dark-selected-item-text-color: @white;
397+
@dark-menu-item-hover-bg: transparent;
398+
369399
// dark theme
370400
@menu-dark-color: @text-color-secondary-dark;
371401
@menu-dark-bg: @layout-header-background;
372402
@menu-dark-arrow-color: #fff;
373403
@menu-dark-submenu-bg: #000c17;
374404
@menu-dark-highlight-color: #fff;
375405
@menu-dark-item-active-bg: @primary-color;
406+
@menu-dark-selected-item-icon-color: @white;
407+
@menu-dark-selected-item-text-color: @white;
408+
@menu-dark-item-hover-bg: transparent;
376409

377410
// Spin
378411
// ---
@@ -392,6 +425,8 @@
392425
@table-padding-vertical: 16px;
393426
@table-padding-horizontal: 16px;
394427
@table-border-radius-base: @border-radius-base;
428+
@table-footer-bg: @background-color-light;
429+
@table-footer-color: @heading-color;
395430

396431
// Tag
397432
// --
@@ -433,7 +468,8 @@
433468
@card-inner-head-padding: 12px;
434469
@card-padding-base: 24px;
435470
@card-actions-background: @background-color-light;
436-
@card-background: #cfd8dc;
471+
@card-skeleton-bg: #cfd8dc;
472+
@card-background: @component-background;
437473
@card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
438474
@card-radius: @border-radius-sm;
439475

@@ -504,8 +540,10 @@
504540

505541
// PageHeader
506542
// ---
507-
@page-header-padding-horizontal: 24px;
508-
@page-header-padding-vertical: 16px;
543+
@page-header-padding: 24px;
544+
@page-header-padding-vertical: 16px; @page-header-padding-vertical: 16px;
545+
@page-header-padding-breadcrumb: 12px;
546+
@page-header-back-color: #000;
509547

510548
// Breadcrumb
511549
// ---
@@ -541,6 +579,8 @@
541579
@tree-child-padding: 18px;
542580
@tree-directory-selected-color: #fff;
543581
@tree-directory-selected-bg: @primary-color;
582+
@tree-node-hover-bg: @item-hover-bg;
583+
@tree-node-selected-bg: @primary-2;
544584

545585
// Collapse
546586
// ---
@@ -595,43 +635,13 @@
595635
@statistic-title-font-size: @font-size-base;
596636
@statistic-content-font-size: 24px;
597637
@statistic-unit-font-size: 16px;
598-
@statistic-font-family: Tahoma, 'Helvetica Neue', @font-family;
638+
@statistic-font-family: @font-family;
599639

600640
// Drawer
601641
// ---
602642
@drawer-header-padding: 16px 24px;
603643
@drawer-body-padding: 24px;
604644

605-
606-
607-
@layout-body-background: #171717;
608-
@background-color-base: #262626;
609-
@body-background: #404041;
610-
@layout-sider-background: #001529;
611-
@component-background: #262626;
612-
@input-bg: #313133;
613-
@btn-default-bg: #262626;
614-
@border-color-base: #1e1e1e;
615-
@border-color-split: #363636;
616-
@heading-color: #E3E3E3;
617-
@text-color: #E3E3E3;
618-
@text-color-secondary: fade(#fff, 65%);
619-
@table-selected-row-bg: #3a3a3a;
620-
@table-expanded-row-bg: #3b3b3b;
621-
@table-header-bg: #3a3a3b;
622-
@table-row-hover-bg: #3a3a3b;
623-
@layout-trigger-color: fade(#fff, 80%);
624-
@layout-trigger-background: #313232;
625-
@alert-message-color: fade(#000, 67%);
626-
@item-hover-bg: fade(@blue-5, 20%);
627-
@item-active-bg: fade(@blue-5, 40%);
628-
@disabled-color: rgba(255, 255, 255, 0.25);
629-
@tag-default-bg: #262628;
630-
@popover-bg: #262629;
631-
@wait-icon-color: fade(#fff, 64%);
632-
@background-color-light: fade(@blue-5, 40%);
633-
@collapse-header-bg: #262629;
634-
@info-color: #313133;
635-
@primary-color: @blue-7;
636-
@highlight-color: @red-7;
637-
@warning-color: @gold-9;
645+
// Typography
646+
// ---
647+
@typography-title-font-weight: 600;

‎zeppelin-frontend/src/styles/theme/light/theme-light.less‎

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,10 @@
175175
@btn-circle-size-lg: @btn-height-lg;
176176
@btn-circle-size-sm: @btn-height-sm;
177177

178+
@btn-square-size: @btn-height-base;
179+
@btn-square-size-lg: @btn-height-lg;
180+
@btn-square-size-sm: @btn-height-sm;
181+
178182
@btn-group-border: @primary-5;
179183

180184
// Checkbox
@@ -183,6 +187,9 @@
183187
@checkbox-check-color: #fff;
184188
@checkbox-border-width: @border-width-base;
185189

190+
// Descriptions
191+
@descriptions-bg: #fafafa;
192+
186193
// Empty
187194
@empty-font-size: @font-size-base;
188195

@@ -298,6 +305,9 @@
298305
@input-border-color: @border-color-base;
299306
@input-bg: #fff;
300307
@input-number-handler-active-bg: #f4f4f4;
308+
@input-number-handler-hover-bg: @primary-5;
309+
@input-number-handler-bg: @component-background;
310+
@input-number-handler-border-color: @border-color-base;
301311
@input-addon-bg: @background-color-light;
302312
@input-hover-border-color: @primary-color;
303313
@input-disabled-bg: @disabled-bg;
@@ -307,6 +317,13 @@
307317
// ---
308318
@select-border-color: @border-color-base;
309319
@select-item-selected-font-weight: 600;
320+
@select-dropdown-bg: @component-background;
321+
@select-item-selected-bg: @background-color-light;
322+
@select-item-active-bg: @item-active-bg;
323+
324+
// Anchor
325+
// ---
326+
@anchor-border-color: @border-color-split;
310327

311328
// Tooltip
312329
// ---
@@ -345,8 +362,9 @@
345362
// --
346363
@modal-body-padding: 24px;
347364
@modal-header-bg: @component-background;
348-
@modal-footer-bg: tranparent;
349-
@modal-mask-bg: fade(@black, 65%);
365+
@modal-footer-bg: transparent;
366+
@modal-footer-border-color-split: @border-color-split;
367+
@modal-mask-bg: fade(@black, 45%);
350368

351369
// Progress
352370
// --
@@ -366,13 +384,28 @@
366384
@menu-item-active-bg: @item-active-bg;
367385
@menu-item-active-border-width: 3px;
368386
@menu-item-group-title-color: @text-color-secondary;
387+
@menu-icon-size: @font-size-base;
388+
@menu-icon-size-lg: @font-size-lg;
389+
390+
@menu-item-vertical-margin: 4px;
391+
@menu-item-font-size: @font-size-base;
392+
@menu-item-boundary-margin: 8px;
393+
@menu-icon-size: @font-size-base;
394+
@menu-icon-size-lg: @font-size-lg;
395+
@menu-dark-selected-item-icon-color: @white;
396+
@menu-dark-selected-item-text-color: @white;
397+
@dark-menu-item-hover-bg: transparent;
398+
369399
// dark theme
370400
@menu-dark-color: @text-color-secondary-dark;
371401
@menu-dark-bg: @layout-header-background;
372402
@menu-dark-arrow-color: #fff;
373403
@menu-dark-submenu-bg: #000c17;
374404
@menu-dark-highlight-color: #fff;
375405
@menu-dark-item-active-bg: @primary-color;
406+
@menu-dark-selected-item-icon-color: @white;
407+
@menu-dark-selected-item-text-color: @white;
408+
@menu-dark-item-hover-bg: transparent;
376409

377410
// Spin
378411
// ---
@@ -392,6 +425,8 @@
392425
@table-padding-vertical: 16px;
393426
@table-padding-horizontal: 16px;
394427
@table-border-radius-base: @border-radius-base;
428+
@table-footer-bg: @background-color-light;
429+
@table-footer-color: @heading-color;
395430

396431
// Tag
397432
// --
@@ -433,7 +468,8 @@
433468
@card-inner-head-padding: 12px;
434469
@card-padding-base: 24px;
435470
@card-actions-background: @background-color-light;
436-
@card-background: #cfd8dc;
471+
@card-skeleton-bg: #cfd8dc;
472+
@card-background: @component-background;
437473
@card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
438474
@card-radius: @border-radius-sm;
439475

@@ -504,8 +540,10 @@
504540

505541
// PageHeader
506542
// ---
507-
@page-header-padding-horizontal: 24px;
508-
@page-header-padding-vertical: 16px;
543+
@page-header-padding: 24px;
544+
@page-header-padding-vertical: 16px; @page-header-padding-vertical: 16px;
545+
@page-header-padding-breadcrumb: 12px;
546+
@page-header-back-color: #000;
509547

510548
// Breadcrumb
511549
// ---
@@ -541,6 +579,8 @@
541579
@tree-child-padding: 18px;
542580
@tree-directory-selected-color: #fff;
543581
@tree-directory-selected-bg: @primary-color;
582+
@tree-node-hover-bg: @item-hover-bg;
583+
@tree-node-selected-bg: @primary-2;
544584

545585
// Collapse
546586
// ---
@@ -595,9 +635,13 @@
595635
@statistic-title-font-size: @font-size-base;
596636
@statistic-content-font-size: 24px;
597637
@statistic-unit-font-size: 16px;
598-
@statistic-font-family: Tahoma, 'Helvetica Neue', @font-family;
638+
@statistic-font-family: @font-family;
599639

600640
// Drawer
601641
// ---
602642
@drawer-header-padding: 16px 24px;
603643
@drawer-body-padding: 24px;
644+
645+
// Typography
646+
// ---
647+
@typography-title-font-weight: 600;

0 commit comments

Comments
 (0)