Skip to content

Commit 6d5c220

Browse files
jayakusijayakusi
committed
Cosemtic changes of zoom and style feature
1 parent 7e64bab commit 6d5c220

7 files changed

+142
-90
lines changed

‎angular.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"defaultConfiguration": "development",
1515
"builder": "@angular-devkit/build-angular:browser",
1616
"options": {
17+
"allowedCommonJsDependencies": ["rbush"],
1718
"outputPath": "dist/",
1819
"index": "src/index.html",
1920
"main": "src/main.ts",

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@angular/common": "17.2.4",
1919
"@angular/core": "17.2.4",
2020
"@angular/forms": "17.2.4",
21-
"@angular/material": "^16.2.0",
21+
"@angular/material": "17.2.2",
2222
"@angular/platform-browser": "17.2.4",
2323
"@angular/platform-browser-dynamic": "17.2.4",
2424
"@angular/router": "17.2.4",

‎src/app/app.component.css

Lines changed: 96 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -19,25 +19,17 @@
1919
.hostKeys-btns-container {
2020
flex-basis: 15%;
2121
display: flex;
22-
/* justify-content: center; */
2322
align-items: center;
2423
margin-left: 1rem;
2524
padding-right: 1rem;
2625
}
27-
::ng-deep .mat-mdc-menu-content {
28-
display: flex;
29-
flex-direction: column;
30-
padding-right: 8px;
31-
}
3226

3327
.maindiv {
34-
/* background: red; */
3528
transform-origin: 0% 0%;
3629
}
3730

3831
.slidecontainer {
3932
transform: rotate(90deg);
40-
4133
}
4234

4335
.spinner {
@@ -111,101 +103,139 @@ select {
111103

112104
#slider {
113105
background-color: #1776bf;
114-
color: white;
106+
height: 56px;
107+
display: flex;
108+
align-items: center;
109+
width: 180px;
115110
}
116111

117-
.panelCustom {
118-
margin-left: 5px;
112+
::ng-deep .mtSlider .mat-mdc-slider .mdc-slider__track--active_fill {
113+
border-color: white !important;
114+
background-color: white !important;
115+
height: 2px;
119116
}
120117

121-
/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
122-
::ng-deep.mat-accent .mat-slider-track-fill {
123-
background-color: white!important; ;
118+
::ng-deep .mtSlider .mat-mdc-slider .mdc-slider__thumb-knob {
119+
border-color: white !important;
120+
background-color: white !important;
124121
}
125122

126-
/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
127-
.mat-mdc-slider.mat-slider-vertical{
128-
height: 12px;
129-
border-radius: 10px
130-
}
131-
132-
/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
133-
::ng-deep.mat-mdc-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb {
134-
background-color: white;
135-
}
123+
::ng-deep .mtSliderMenu{
124+
rotate: -90deg;
125+
margin-top: 180px;
126+
}
136127

137-
/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
138-
::ng-deep.mat-mdc-slider.mat-accent .mat-slider-thumb-label {
128+
::ng-deep .mtSlider .mat-mdc-slider .mdc-slider__value-indicator {
129+
color: #1776bf;
130+
}
131+
132+
::ng-deep .mtSlider .mat-mdc-slider .mdc-slider__value-indicator {
139133
background-color: white;
140134
}
141135

142-
/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
143-
::ng-deep.mat-mdc-slider.mat-accent .mat-slider-thumb {
144-
background: white;
136+
::ng-deep .mtSlider .mat-mdc-slider .mdc-slider__value-indicator::before {
137+
border-top-color: white;
145138
}
146139

147-
/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
148-
::ng-deep.mat-mdc-slider.mat-accent .mat-slider-thumb-label-text {
149-
color: #1776bf;
140+
::ng-deep .mtSlider .mat-mdc-slider .mdc-slider__track--active {
141+
height: 2px;
142+
top: 2px
150143
}
151144

152-
/* vertical */
145+
::ng-deep .mtSlider .mat-mdc-slider .mdc-slider__track--inactive {
146+
height: 2px;
147+
top: 2px;
148+
}
153149

154-
/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
155-
::ng-deep.mat-slider-thumb {
156-
background-color: white;
150+
::ng-deep .mtSlider .mat-mdc-slider .mdc-slider__track--inactive {
151+
opacity: 1.24;
157152
}
158153

154+
/* .panelCustom {
155+
margin-left: 5px;
156+
} */
157+
159158
::ng-deep .cdk-overlay-pane .mat-mdc-menu-panel {
160159
min-width: unset;
161160
}
162161

163162
#silder-default-btn {
164-
padding: unset;
165-
margin: 8px 14px 8px 14px;
163+
/* padding: unset; */
164+
margin: 11px 14px 8px 14px;
166165
}
167166

168167
#silder-default-btn i {
169168
background: #1776bf;
170169
color: white;
171170
border: unset;
172-
margin-left: 7px;
173171
}
174172

173+
::ng-deep .mat-mdc-menu-panel {
174+
overflow: unset !important;
175+
background-color: #1776bf;
176+
}
177+
178+
::ng-deep .mat-mdc-menu-content{
179+
background-color: #1776bf;
180+
display: flex;
181+
flex-direction: column;
182+
padding: 0px !important;
183+
}
175184

176-
/* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
177-
::ng-deep .mat-mdc-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle,::ng-deep .mat-radio-container .mat-radio-outer-circle {
178-
border-color: var(--border-color);
179-
border-radius: unset !important;
180-
height: 14px;
181-
width: 14px;
182-
margin-left: 6.5px;
185+
::ng-deep .mat-menu-item{
186+
height: 25px;
183187
}
184188

185-
/* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
186-
::ng-deep .mat-mdc-radio-button.mat-accent .mat-radio-inner-circle {
187-
color: var(--color-theme);
188-
background-color: var(--color-theme);
189-
border-radius: unset !important;
189+
/* ::ng-deep .mdc-radio{
190+
padding: 5px 5px;
191+
} */
192+
193+
::ng-deep #black .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle {
194+
border-color: black;
195+
padding: 5px 5px;
190196
}
191197

192-
/* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
193-
::ng-deep .mat-radio-checked .mat-radio-inner-circle {
194-
transform: scale(0.7) !important;
195-
width: 13px;
196-
height: 14px;
197-
left: 7px;
198-
right: 3px;
199-
top: opx;
200-
bottom: 146px;
198+
::ng-deep #black .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle {
199+
border-color: black;
201200
}
202201

203-
/* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
204-
::ng-deep .mat-mdc-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
205-
background-color: var(--color-theme);
202+
::ng-deep #black .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__inner-circle {
203+
transform: scale(0.7);
204+
border-color: black;
206205
}
207206

208-
::ng-deep .mat-mdc-menu-panel {
209-
overflow: unset !important;
210-
background-color: #1776bf;
207+
::ng-deep #white .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle {
208+
border-color: white;
211209
}
210+
211+
::ng-deep #white .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle {
212+
border-color: white;
213+
}
214+
215+
::ng-deep #white .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__inner-circle {
216+
transform: scale(0.7);
217+
border-color: white;
218+
}
219+
220+
::ng-deep #lime .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle {
221+
border-color: lime;
222+
}
223+
224+
::ng-deep #lime .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle {
225+
border-color: lime;
226+
}
227+
228+
::ng-deep #lime .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__inner-circle {
229+
transform: scale(0.7);
230+
border-color: lime;
231+
}
232+
233+
::ng-deep .mdc-radio__outer-circle{
234+
border-radius: 0% !important;
235+
padding: 0px;
236+
}
237+
238+
::ng-deep .mdc-radio__inner-circle {
239+
border-radius: 0% !important;
240+
padding: 0px;
241+
}

‎src/app/app.component.html

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,33 +29,34 @@
2929
<sag-topnav-item [matMenuTriggerFor]="menu" title="Zoom" itemType="button" itemIcon="dlt-icon-zoom-in"
3030
itemStyle="color:white" (click)="zoom()">
3131
</sag-topnav-item>
32-
<mat-menu #menu="matMenu">
32+
<mat-menu #menu="matMenu" class="mtSliderMenu">
3333

34-
<div id="slider">
35-
<!-- TODO: The 'vertical' property no longer exists -->
36-
<mat-slider thumbLabel class="panelCustom" [displayWith]="formatLabel"
37-
[step]="zoomStep" [min]="zoomMinValue" [max]="zoomMaxValue" (valueChange)=onZoomChange($event)
38-
aria-label="units"><input matSliderThumb [value]="zoomDefault" /></mat-slider>
39-
<div id="silder-default-btn">
40-
<i class="dlt-icon-restore" title="Default" itemIcon="dlt-icon-zoom-in" (click)="setDefaultZoom()"
41-
aria-hidden="true"></i>
42-
</div>
34+
<div id="slider" class="mtSlider">
35+
<span id="silder-default-btn">
36+
<i class="dlt-icon-restore" title="Default" itemIcon="dlt-icon-zoom-in" (click)="setDefaultZoom()"
37+
aria-hidden="true" style="cursor: pointer;"></i>
38+
</span>
39+
<span>
40+
<mat-slider class="panelCustom" [displayWith]="formatLabel"
41+
[step]="zoomStep" [min]="zoomMinValue" [max]="zoomMaxValue" (change)=onZoomChange($event)
42+
aria-label="units" [discrete]="thumbLabel" [value]="value"><input matSliderThumb [(ngModel)]="value"/></mat-slider>
43+
</span>
4344
</div>
4445
</mat-menu>
4546

4647
<sag-topnav-item [matMenuTriggerFor]="matMenuTheme" title="Style" itemType="button" itemIcon="dlt-icon-palette"
4748
itemStyle="color:white">
4849
</sag-topnav-item>
4950
<mat-menu #matMenuTheme="matMenu">
50-
<mat-radio-group [(ngModel)]="themeColor">
51-
<mat-menu-content style="display: flex; flex-direction: column; padding: 0px 8px 0px 15px;">
52-
<mat-menu-item *ngFor="let color of themeColors; index as i">
53-
<mat-radio-button [id]="getColor(color)" [style.--border-color]="getColor(color)" [value]="color"
54-
[matTooltip]="color" [matTooltipPosition]="'after'"
55-
(change)="changeBackgroundColor($event.value)"></mat-radio-button>
56-
</mat-menu-item>
57-
</mat-menu-content>
58-
</mat-radio-group>
51+
<mat-radio-group [(ngModel)]="themeColor">
52+
<mat-menu-content style="display: flex; flex-direction: column; padding: 0px 8px 0px 8px;width: 54px; align-items: center;">
53+
<mat-menu-item *ngFor="let color of themeColors; index as i">
54+
<mat-radio-button style="padding: 5px 5px;" [class]="getColor(color)" [id]="getColor(color)" [style.--border-color]="getColor(color)" [value]="color"
55+
[matTooltip]="color" [matTooltipPosition]="'after'"
56+
(change)="changeBackgroundColor($event.value)"></mat-radio-button>
57+
</mat-menu-item>
58+
</mat-menu-content>
59+
</mat-radio-group>
5960
</mat-menu>
6061
<sag-topnav-item itemType="button" [disable]='false' title="Refresh" (click)="reload()" itemId="reload"
6162
itemName="" itemIcon="dlt-icon-refresh" itemStyle="color:white">

‎src/app/app.component.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ export class AppComponent implements OnInit, OnDestroy {
6565
zoomStep: number = GXUtils.zoomStep;
6666
isOpenThemeStyle: boolean = false;
6767
themeColor: string = GXUtils.defaultThemeColor;
68+
thumbLabel:boolean=true;
69+
value:number=0;
6870

6971
@HostListener('document:keydown', ['$event'])
7072
handleKeyboardEvent(event: KeyboardEvent): void {
@@ -134,6 +136,7 @@ export class AppComponent implements OnInit, OnDestroy {
134136
this.zoomDefault = 20;
135137
}
136138
document.documentElement.style.setProperty('--text-font-size', this.zoomDefault + 'px');
139+
this.value = this.zoomDefault;
137140
}
138141

139142
getLoggerConfiguration() {
@@ -456,8 +459,8 @@ export class AppComponent implements OnInit, OnDestroy {
456459
}
457460

458461
onZoomChange(value: number) {
459-
if (this.zoomDefault !== value) {
460-
this.zoomDefault = value;
462+
if (this.zoomDefault !== this.value) {
463+
this.zoomDefault = this.value;
461464
document.documentElement.style.setProperty('--text-font-size', this.zoomDefault + 'px');
462465
}
463466
}
@@ -558,6 +561,7 @@ export class AppComponent implements OnInit, OnDestroy {
558561
this.zoomDefault = 20;
559562
}
560563
document.documentElement.style.setProperty('--text-font-size', this.zoomDefault + 'px');
564+
this.value = this.zoomDefault;
561565
}
562566

563567
getColor(color: string): string {

‎src/styles.css

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -830,4 +830,18 @@ div[name="Menu"]#gx_screenArea input.gx_intf {
830830
.unselectable {
831831
-moz-user-select: none;
832832
-webkit-user-select: none;
833-
}
833+
}
834+
835+
/* .mat-mdc-slider .mdc-slider__track--active_fill {
836+
border-color: white !important;
837+
background-color: white !important;
838+
}
839+
840+
.mat-mdc-slider .mdc-slider__thumb-knob {
841+
border-color: white !important;
842+
background-color: white !important;
843+
}
844+
845+
.mat-mdc-menu-content{
846+
padding: 0px !important;
847+
} */

‎tsconfig.app.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
"extends": "./tsconfig.base.json",
44
"compilerOptions": {
55
"outDir": "./out-tsc/app",
6-
"types": []
6+
"types": [],
7+
"useDefineForClassFields": false,
8+
"target": "ES2022"
79
},
810
"files": [
911
"src/main.ts",

0 commit comments

Comments
 (0)