+
diff --git a/src/app/components/user/user-form/user-form.component.scss b/src/app/components/user/user-form/user-form.component.scss
index 6ac2a9e..d672c2c 100644
--- a/src/app/components/user/user-form/user-form.component.scss
+++ b/src/app/components/user/user-form/user-form.component.scss
@@ -40,6 +40,11 @@
}
}
+ .form-actions{
+ display: flex;
+ gap: 0 10px;
+ }
+
.advanced {
border-top: 1px solid #444c56b3;
margin-top: 50px;
diff --git a/src/app/components/user/user.component.scss b/src/app/components/user/user.component.scss
index 393c8ce..9aed6c9 100644
--- a/src/app/components/user/user.component.scss
+++ b/src/app/components/user/user.component.scss
@@ -21,6 +21,12 @@
overflow: auto;
.table {
width: 100%;
+ font-size: 14px;
+ th {
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.54);
+ font-weight: 400;
+ }
.mat-column-email {
&.inactive {
@@ -31,7 +37,8 @@
.mat-column-actions {
.actions-menu {
cursor: pointer;
- }
+ font-weight: bold;
+ }
}
.mat-column-actions,
@@ -49,19 +56,13 @@
padding: 5px;
}
- .mat-cell.mat-column-isOwner,
+ .mat-mdc-cell.mat-column-isOwner,
.mat-cell.mat-column-actions,
.mat-cell.mat-column-active,
.mat-cell.mat-column-verified {
padding-left: 10px;
}
}
-
- .mat-paginator-sticky {
- bottom: 0px;
- position: sticky;
- z-index: 10;
- }
}
.button-actions {
@@ -69,25 +70,22 @@
}
.group {
- &-container {
- padding: 5px;
- }
&-item {
&:after {
- content: '\2022';
+ content: "\2022";
display: inline-block;
margin: 2px 4px;
}
&:last-of-type:after {
- content: ''
+ content: "";
}
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
- .content .table{
+ .content .table {
.mat-column-actions,
.mat-column-active,
.mat-column-verified,
@@ -106,7 +104,7 @@
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
- .content .table{
+ .content .table {
.mat-column-actions,
.mat-column-active,
.mat-column-verified,
@@ -121,12 +119,11 @@
text-align: start;
}
}
-
}
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 2500px) {
- .content .table{
+ .content .table {
.mat-column-actions,
.mat-column-active,
.mat-column-verified,
diff --git a/src/colors.scss b/src/colors.scss
index ad74328..d5229a1 100644
--- a/src/colors.scss
+++ b/src/colors.scss
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import "~@angular/material/theming";
+@import "@angular/material/theming";
$arlas-app-primary: mat-palette($mat-cyan);
$arlas-app-accent: mat-palette($mat-deep-orange);
diff --git a/src/settings.yaml b/src/settings.yaml
index 7681056..6dd32b1 100644
--- a/src/settings.yaml
+++ b/src/settings.yaml
@@ -4,5 +4,5 @@ authentication:
force_connect: false
use_discovery: false
threshold: 60000
- url: http://localhost:9997/arlas_iam_server
+ url: https://localhost/arlas_iam_server
sign_up_enabled: true
diff --git a/src/styles.scss b/src/styles.scss
index 804587e..7ba124b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -16,6 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
+
+@import 'styles/material-override.scss';
+@import 'styles/paginator.scss';
+
/* You can add global styles to this file, and also import other style files */
@font-face {
font-family: "Material Icons";
diff --git a/src/styles/material-override.scss b/src/styles/material-override.scss
new file mode 100644
index 0000000..98991d4
--- /dev/null
+++ b/src/styles/material-override.scss
@@ -0,0 +1,92 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// Avoid whitesmoke background of input
+.mat-mdc-text-field-wrapper {
+ background-color: white !important;
+ padding: 0 !important;
+}
+.mat-mdc-form-field-focus-overlay {
+ opacity: 0 !important;
+}
+
+// Align text and icon in left menu
+.mdc-list-item__primary-text {
+ display: flex;
+}
+
+mat-select {
+ .mat-mdc-select-arrow-wrapper {
+ padding-right: 10px;
+ }
+}
+
+.mat-mdc-option .mdc-list-item__primary-text {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.mat-mdc-paginator-container {
+ min-height: unset;
+
+ .mat-mdc-icon-button {
+ padding: 0;
+ height: 24px;
+ width: 24px;
+
+ .mat-mdc-button-touch-target {
+ width: 24px;
+ height: 24px;
+ }
+ }
+}
+
+.mat-mdc-menu-item .mdc-list-item__primary-text {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+// Tighten input form
+.mat-mdc-form-field-infix {
+ min-height: unset;
+ padding-bottom: 12px;
+ width: 90%;
+ margin: 0 10px;
+}
+.mdc-text-field--outlined .mdc-floating-label {
+ top: 24px !important;
+}
+
+// set white text for accent buttons
+.mdc-button.mat-accent {
+ color: white !important;
+}
+
+// reduce tooltip size
+.mat-mdc-tooltip {
+ margin: 5px !important;
+ font-size: 12px;
+}
+
+// reduce menu font size
+.mat-mdc-menu-content {
+ font-size: 14px;
+}
diff --git a/src/styles/paginator.scss b/src/styles/paginator.scss
new file mode 100644
index 0000000..c6999be
--- /dev/null
+++ b/src/styles/paginator.scss
@@ -0,0 +1,27 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.mat-mdc-paginator {
+ font-size: 12px;
+ &.mat-paginator-sticky {
+ bottom: 0;
+ position: sticky;
+ z-index: 10;
+ }
+}
diff --git a/src/test.ts b/src/test.ts
index 00025da..51bb020 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -7,20 +7,8 @@ import {
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
-declare const require: {
- context(path: string, deep?: boolean, filter?: RegExp): {
- (id: string): T;
- keys(): string[];
- };
-};
-
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
);
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/src/arlas-wui-theme.scss b/src/theme.scss
similarity index 72%
rename from src/arlas-wui-theme.scss
rename to src/theme.scss
index 7e8408c..ca26b92 100644
--- a/src/arlas-wui-theme.scss
+++ b/src/theme.scss
@@ -17,28 +17,31 @@
* under the License.
*/
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
-$arlas-app-primary: mat-palette($mat-cyan);
-$arlas-app-accent: mat-palette($mat-deep-orange);
+$app-primary: mat.define-palette(mat.$blue-palette, 500);
+$app-accent: mat.define-palette(mat.$deep-orange-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
-$arlas-app-warn: mat-palette($mat-red);
+$app-warn: mat.define-palette(mat.$red-palette);
// Create the theme object (a Sass map containing all of the palettes).
-$arlas-app-theme: mat-light-theme($arlas-app-primary, $arlas-app-accent, $arlas-app-warn);
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include angular-material-theme($arlas-app-theme);
+$app-theme: mat.define-light-theme((
+ color: (
+ primary: $app-primary,
+ accent: $app-accent,
+ warn: $app-warn
+ ),
+ density: 0
+));
+@include mat.all-component-themes($app-theme);
diff --git a/tsconfig.json b/tsconfig.json
index d36a35c..9b2afac 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,9 +2,11 @@
{
"compileOnSave": false,
"compilerOptions": {
+ "skipLibCheck": true,
"baseUrl": "src",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
+ "strict": true,
"strictNullChecks": false,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
@@ -14,12 +16,12 @@
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
- "allowSyntheticDefaultImports":true,
+ "allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"moduleResolution": "node",
"importHelpers": true,
- "target": "es6",
- "module": "esnext",
+ "target": "ES2022",
+ "module": "es2020",
"allowJs": true,
"lib": [
"es2015",
@@ -43,11 +45,11 @@
"@environments/*": [
"environments/*"
],
-
"@app/*": [
"app/*"
- ],
- }
+ ]
+ },
+ "useDefineForClassFields": false
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,