Skip to content

Commit 7d1550f

Browse files
eksrhaeksrha
authored
Merge pull request #18 from fullstack-devops/bugfix/theme
fix missing style.scss
2 parents 87d9100 + 9ea41be commit 7d1550f

File tree

12 files changed

+135
-111
lines changed

12 files changed

+135
-111
lines changed

‎.vscode/extensions.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
22
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3-
"recommendations": ["angular.ng-template"]
4-
}
3+
"recommendations": [
4+
"angular.ng-template",
5+
"bradlc.vscode-tailwindcss"
6+
]
7+
}

‎.vscode/settings.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,7 @@
2323
"[typescript]": {
2424
"editor.defaultFormatter": "vscode.typescript-language-features"
2525
},
26-
}
26+
"[scss]": {
27+
"editor.defaultFormatter": "vscode.css-language-features"
28+
},
29+
}

‎angular.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@
6666
"projects/lib-workspace/src/assets"
6767
],
6868
"styles": [
69-
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
69+
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
70+
"projects/lib-workspace/src/styles.scss"
7071
],
7172
"scripts": []
7273
},
@@ -143,4 +144,4 @@
143144
}
144145
}
145146
}
146-
}
147+
}

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,11 @@
2727
"@angular/platform-browser": "~13.3.11",
2828
"@angular/platform-browser-dynamic": "~13.3.11",
2929
"@angular/router": "~13.3.11",
30+
"autoprefixer": "^10.4.13",
3031
"date-fns": "^2.29.3",
32+
"postcss": "^8.4.20",
3133
"rxjs": "~7.5.6",
34+
"tailwindcss": "^3.2.4",
3235
"tslib": "^2.4.0",
3336
"zone.js": "~0.11.7"
3437
},

‎projects/lib-workspace/src/app/app.component.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,18 @@
1616

1717
<fs-ui-frame-toolbar-side>
1818
<!-- <a>Test the side</a> -->
19-
<mat-form-field appearance="outline">
19+
<!-- <mat-form-field appearance="outline">
2020
<input matInput placeholder="Search" type="search" />
21-
<!-- <mat-icon matSuffix>close</mat-icon> -->
22-
</mat-form-field>
21+
</mat-form-field> -->
22+
<div>
23+
<input type="search" id="dummy-search"
24+
class="block w-full p-2 pl-4 text-sm text-gray-900 border border-gray-300 rounded-lg"
25+
placeholder="Dummy Search">
26+
</div>
2327
</fs-ui-frame-toolbar-side>
2428
</fs-ui-frame-toolbar>
2529

2630
<fs-ui-frame-content>
2731
<router-outlet></router-outlet>
2832
</fs-ui-frame-content>
29-
</fs-ui-frame>
33+
</fs-ui-frame>

‎projects/lib-workspace/src/styles.scss‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -157,18 +157,17 @@ body {
157157
--text-primary-lighter-color: #{$dark-primary-text};
158158
--text-primary-darker-color: #{$light-primary-text};
159159
}
160+
160161
$mat-primary: (
161162
main: #4c7c3c,
162163
lighter: #c9d8c5,
163164
darker: #335f27,
164165
200: #4c7c3c,
165166
// For slide toggle,
166-
contrast:
167-
(
168-
main: $light-primary-text,
169-
lighter: $dark-primary-text,
170-
darker: $light-primary-text,
171-
),
167+
contrast: (main: $light-primary-text,
168+
lighter: $dark-primary-text,
169+
darker: $light-primary-text,
170+
),
172171
);
173172
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
174173

@@ -180,18 +179,17 @@ body {
180179
--text-accent-lighter-color: #{$dark-primary-text};
181180
--text-accent-darker-color: #{$light-primary-text};
182181
}
182+
183183
$mat-accent: (
184184
main: #498497,
185185
lighter: #c8dae0,
186186
darker: #31677a,
187187
200: #498497,
188188
// For slide toggle,
189-
contrast:
190-
(
191-
main: $light-primary-text,
192-
lighter: $dark-primary-text,
193-
darker: $light-primary-text,
194-
),
189+
contrast: (main: $light-primary-text,
190+
lighter: $dark-primary-text,
191+
darker: $light-primary-text,
192+
),
195193
);
196194
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
197195

@@ -203,18 +201,17 @@ body {
203201
--text-warn-lighter-color: #{$dark-primary-text};
204202
--text-warn-darker-color: #{$dark-primary-text};
205203
}
204+
206205
$mat-warn: (
207206
main: #ef9b00,
208207
lighter: #fae1b3,
209208
darker: #e87f00,
210209
200: #ef9b00,
211210
// For slide toggle,
212-
contrast:
213-
(
214-
main: $dark-primary-text,
215-
lighter: $dark-primary-text,
216-
darker: $dark-primary-text,
217-
),
211+
contrast: (main: $dark-primary-text,
212+
lighter: $dark-primary-text,
213+
darker: $dark-primary-text,
214+
),
218215
);
219216
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);
220217
$theme: (
@@ -254,6 +251,7 @@ $altTheme: (
254251
.material-icons {
255252
font-size: 24px;
256253
font-family: "Material Icons", "Material Icons";
254+
257255
.mat-badge-content {
258256
font-family: "Roboto";
259257
}
@@ -275,3 +273,7 @@ $foreground: map.get($theme, "foreground");
275273
$background: map.get($altTheme, "background");
276274
$foreground: map.get($altTheme, "foreground");
277275
}
276+
277+
@tailwind base;
278+
@tailwind components;
279+
@tailwind utilities;

‎projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.module.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
33
import { MatButtonModule } from '@angular/material/button';
44
import { MatDividerModule } from '@angular/material/divider';
5-
import { MatTableModule } from '@angular/material/table';
65
import { FsCalendarPanelsComponent } from './calendar-panels/calendar-panels.component';
76
import { FsCalendarTableComponent } from './calendar-table/fs-calendar-table.component';
87
import { FsCalendarTableNameDirective } from './directives/fs-calendar-table-name.directive';
@@ -13,7 +12,7 @@ import { FsCalendarTableNameDirective } from './directives/fs-calendar-table-nam
1312
FsCalendarTableComponent,
1413
FsCalendarTableNameDirective,
1514
],
16-
imports: [CommonModule, MatButtonModule, MatDividerModule, MatTableModule],
15+
imports: [CommonModule, MatButtonModule, MatDividerModule],
1716
exports: [
1817
FsCalendarPanelsComponent,
1918
FsCalendarTableComponent,

‎projects/ng-mat-components/src/lib/fs-ui-frame/fs-ui-frame.component.html‎

Lines changed: 61 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,76 @@
11
<div class="fs-ui-frame-toolbar-logo" [class.opened]="!isClosed">
2-
<div class="logo-span">
3-
<div class="logo">
4-
<button mat-icon-button (click)="toggleSidemenu()">
5-
<div class="logo-picture" *ngIf="frameConfig.logo != ''"
6-
style="background-image: url('{{ frameConfig.logo }}');">
2+
<div class="logo-span">
3+
<div class="logo">
4+
<button mat-icon-button (click)="toggleSidemenu()">
5+
<div class="logo-picture" *ngIf="frameConfig.logo != ''"
6+
style="background-image: url('{{ frameConfig.logo }}');">
77

8-
</div>
9-
<span class="material-icons" *ngIf="frameConfig.logo === ''">
10-
menu
11-
</span>
12-
</button>
13-
</div>
14-
<div class="sidebar-name-span">
15-
<span *ngIf="!isClosed" style="font-size: 24px;">{{frameConfig.appName}}</span>
16-
</div>
17-
</div>
8+
</div>
9+
<span class="material-icons" *ngIf="frameConfig.logo === ''">
10+
menu
11+
</span>
12+
</button>
13+
</div>
14+
<div class="sidebar-name-span">
15+
<span *ngIf="!isClosed">{{frameConfig.appName}}</span>
16+
</div>
17+
</div>
1818
</div>
1919

2020
<ng-content select="fs-ui-frame-toolbar"></ng-content>
2121

2222

2323
<div class="sidebar" [class.opened]="!isClosed">
24-
<!-- Logo / Branding -->
25-
<div class="app-name">
26-
<span *ngIf="isClosed">{{frameConfig.appNameShort}}</span>
27-
</div>
24+
<!-- Logo / Branding -->
25+
<div class="app-name">
26+
<span *ngIf="isClosed">{{frameConfig.appNameShort}}</span>
27+
</div>
2828

29-
<!-- Navigation -->
30-
<ul class="nav-links">
31-
<li>
32-
<button mat-button *ngFor="let item of navList" [class.active]="item.path === isActivePath"
33-
[routerLink]="item.path">
34-
<span class="material-icons">
35-
{{item.data?.sidenavIcon}}
36-
</span>
37-
<span class="link-name" *ngIf="!isClosed">{{item.data?.sidenavText}}</span>
38-
</button>
39-
</li>
40-
</ul>
29+
<!-- Navigation -->
30+
<ul class="nav-links">
31+
<li>
32+
<button mat-button *ngFor="let item of navList" [class.active]="item.path === isActivePath"
33+
[routerLink]="item.path">
34+
<span class="material-icons">
35+
{{item.data?.sidenavIcon}}
36+
</span>
37+
<span class="link-name" *ngIf="!isClosed">{{item.data?.sidenavText}}</span>
38+
</button>
39+
</li>
40+
</ul>
4141

42-
<!-- User Profile -->
43-
<div class="profile" *ngIf="navUser != undefined">
44-
<!-- <div class="profile-picture" *ngIf="navUser.profilePicture != ''"
45-
style="background-image: url('{{ navUser.profilePicture }}');">
42+
<!-- User Profile -->
43+
<div class="profile" *ngIf="navUser != undefined">
44+
<div class="profile-pic-button-wrapper">
45+
<button mat-icon-button (click)="toggleSidemenu()">
46+
<div class="pic" *ngIf="navUser.profilePicture != ''"
47+
style="background-image: url('{{ navUser.profilePicture }}');">
48+
</div>
49+
<span class="material-icons" *ngIf="navUser.profilePicture === ''">
50+
account_circle
51+
</span>
52+
</button>
53+
</div>
4654

47-
<span class="material-icons" style="font-size: 48px;" *ngIf="navUser.profilePicture === ''">
48-
account_circle
49-
</span>
50-
</div> -->
5155

52-
<div class="fs-ui-frame-pic-button-wrapper">
53-
<button mat-icon-button (click)="toggleSidemenu()">
54-
<div class="pic" *ngIf="navUser.profilePicture != ''"
55-
style="background-image: url('{{ navUser.profilePicture }}');">
56-
</div>
57-
<span class="material-icons" *ngIf="navUser.profilePicture === ''">
58-
account_circle
59-
</span>
60-
</button>
61-
</div>
62-
63-
64-
<div class="sidebar-name-span" *ngIf="!isClosed">
65-
<div class="user-infos">
66-
<span style="font-size: 14px;">{{navUser.name}}</span>
67-
<span style="font-size: 10px;">{{navUser.role}}</span>
68-
</div>
69-
<button mat-icon-button (click)="onManageAccount()">
70-
<span class="material-icons">
71-
manage_accounts
72-
</span>
73-
</button>
74-
<button mat-icon-button (click)="onLogout()">
75-
<span class="material-icons">
76-
logout
77-
</span>
78-
</button>
79-
</div>
80-
</div>
56+
<div class="profile-content-wrapper" *ngIf="!isClosed">
57+
<div class="user-infos">
58+
<span class="name">{{navUser.name}}</span>
59+
<span class="role">{{navUser.role}}</span>
60+
</div>
61+
<button mat-icon-button (click)="onManageAccount()">
62+
<span class="material-icons">
63+
manage_accounts
64+
</span>
65+
</button>
66+
<button mat-icon-button (click)="onLogout()">
67+
<span class="material-icons">
68+
logout
69+
</span>
70+
</button>
71+
</div>
72+
</div>
8173
</div>
8274

8375

84-
<ng-content select="fs-ui-frame-content"></ng-content>
76+
<ng-content select="fs-ui-frame-content"></ng-content>

‎projects/ng-mat-components/src/lib/fs-ui-frame/fs-ui-frame.component.scss‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ $toolbar-width-opened: 264px;
1212
height: $toolbar-height;
1313
transition: all 0.3s ease-in-out;
1414
}
15+
1516
::ng-deep .fs-ui-frame-toolbar {
1617
position: fixed;
1718
z-index: 1;
@@ -49,7 +50,7 @@ $toolbar-width-opened: 264px;
4950
justify-content: center;
5051
}
5152

52-
.fs-ui-frame-pic-button-wrapper {
53+
.profile-pic-button-wrapper {
5354
width: 64px;
5455
height: 64px;
5556
display: flex;
@@ -103,13 +104,19 @@ $toolbar-width-opened: 264px;
103104
overflow: auto;
104105
}
105106

106-
.sidebar-name-span {
107+
.sidebar-name-span,
108+
.profile-content-wrapper {
107109
width: calc(100% - $toolbar-width-closed);
108110
display: flex;
109111
justify-content: flex-start;
110112
align-items: center;
111113
}
112114

115+
.sidebar-name-span span,
116+
.profile-content-wrapper span {
117+
font-size: 1.5rem;
118+
}
119+
113120
.sidebar .profile {
114121
position: absolute;
115122
width: 100%;
@@ -144,6 +151,14 @@ $toolbar-width-opened: 264px;
144151
width: 100%;
145152
}
146153

154+
.sidebar .profile .user-infos .name {
155+
font-size: 1rem;
156+
}
157+
158+
.sidebar .profile .user-infos .role {
159+
font-size: .8rem;
160+
}
161+
147162
.nav-links li {
148163
position: relative;
149164
list-style: none;
@@ -181,4 +196,4 @@ $toolbar-width-opened: 264px;
181196
overflow: auto;
182197
box-shadow: inset 5px 2px 4px -1px rgba(0, 0, 0, 0.2),
183198
4px 4px 5px 0px rgba(0, 0, 0, 0.14);
184-
}
199+
}

0 commit comments

Comments
 (0)