From 2e49ddd5f219ff49ee0f99a9915ba761287b6b08 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Fri, 20 Oct 2023 19:32:40 +0200
Subject: [PATCH] fixing styles (WIP)
---
.../atlas/splashScreen/splashScreen.style.css | 4 +-
.../splashScreen/splashScreen.template.html | 45 +++++----------
.../region/region/rich/region.rich.style.css | 3 +-
.../region/rich/region.rich.template.html | 21 +++----
.../pureDumb/pureATPSelector.style.scss | 19 +++++++
.../pureDumb/pureATPSelector.template.html | 56 ++++++++++---------
.../regionListSearch.template.html | 1 +
.../component/smartChip.template.html | 1 -
src/extra_styles.css | 2 +
src/theme.scss | 56 +++++++++----------
src/ui/dialogInfo/tmpl/tmpl.template.html | 13 ++---
.../viewerCmp/viewerCmp.style.css | 6 ++
.../viewerCmp/viewerCmp.template.html | 3 +-
13 files changed, 121 insertions(+), 109 deletions(-)
diff --git a/src/atlasComponents/sapiViews/core/atlas/splashScreen/splashScreen.style.css b/src/atlasComponents/sapiViews/core/atlas/splashScreen/splashScreen.style.css
index 105dc67a4..0a7e4fcd6 100644
--- a/src/atlasComponents/sapiViews/core/atlas/splashScreen/splashScreen.style.css
+++ b/src/atlasComponents/sapiViews/core/atlas/splashScreen/splashScreen.style.css
@@ -6,7 +6,7 @@
width: 100%;
}
-.font-stretch
+mat-card
{
- font-stretch: extra-condensed;
+ margin: 5rem;
}
\ No newline at end of file
diff --git a/src/atlasComponents/sapiViews/core/atlas/splashScreen/splashScreen.template.html b/src/atlasComponents/sapiViews/core/atlas/splashScreen/splashScreen.template.html
index 5b54e6284..a68d5bdc6 100644
--- a/src/atlasComponents/sapiViews/core/atlas/splashScreen/splashScreen.template.html
+++ b/src/atlasComponents/sapiViews/core/atlas/splashScreen/splashScreen.template.html
@@ -1,32 +1,17 @@
-<!-- n.b. div wrapper is required for scrolling to work properly -->
-<div class="h-100 w-100 overflow-auto">
-
- <div
- #parentContainer
- class="p-5 w-100 d-flex flex-column flex-wrap justify-content-center align-items-stretch pe-all">
- <mat-card
- (click)="selectAtlas(atlas)"
- matRipple
+<mat-card>
+ <mat-card-header>
+ <mat-card-title>
+ <div class="mat-h4">
+ siibra-explorer
+ </div>
+ </mat-card-title>
+ </mat-card-header>
+ <mat-card-content>
+ <button mat-button
*ngFor="let atlas of atlases$ | async"
- class="m-3 col-md-12 col-lg-12 pe-all mat-elevation-z2">
- <mat-card-header>
- <h1 class="mat-h1 sxplr-p-2">
- {{ atlas.name }}
- </h1>
- </mat-card-header>
+ (click)="selectAtlas(atlas)">
- <!-- required... or on ripple, angular adds 16px margin to the bottom -->
- <!-- see https://github.com/angular/components/issues/10898 -->
- <mat-card-footer>
- </mat-card-footer>
- </mat-card>
-
- <ng-template [ngIf]="!finishedLoading">
- <div class="d-flex align-items-center sxplr-p-4">
- <h1 class="mat-h1">
- <spinner-cmp></spinner-cmp>
- </h1>
- </div>
- </ng-template>
- </div>
-</div>
\ No newline at end of file
+ {{ atlas.name }}
+ </button>
+ </mat-card-content>
+</mat-card>
diff --git a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css
index 036aa20b5..8405a0f94 100644
--- a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css
+++ b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css
@@ -1,7 +1,6 @@
-.vanishing-border
+mat-card-header
{
padding: 16px;
- margin: -16px!important;
}
.feature-list-container
diff --git a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
index e58d9a708..774d96389 100644
--- a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
+++ b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
@@ -5,16 +5,17 @@
<ng-template [ngIf]="region">
<mat-card class="mat-elevation-z4">
- <div
+ <mat-card-header
[style.backgroundColor]="regionRgbString"
- class="vanishing-border"
[ngClass]="{
'darktheme': regionDarkmode === true,
'lighttheme': regionDarkmode === false
}">
- <ng-template [ngTemplateOutlet]="headerTmpl"></ng-template>
-
+ <mat-card-subtitle>
+ <ng-template [ngTemplateOutlet]="headerTmpl"></ng-template>
+ </mat-card-subtitle>
+
<mat-card-subtitle>
<span class="muted-text">
Brain region
@@ -25,7 +26,7 @@
{{ region.name }}
</mat-card-title>
- </div>
+ </mat-card-header>
</mat-card>
@@ -34,7 +35,7 @@
<!-- Overview -->
<mat-tab label="Overview">
- <mat-action-list class="overview-container" dense>
+ <mat-action-list class="overview-container">
<!-- parcellation button -->
<button
@@ -46,14 +47,14 @@
descMd: parcellation.desc,
actions: parcellation | parcTmplDoiPipe
}">
- <mat-icon mat-list-icon fontSet="fas" fontIcon="fa-brain"></mat-icon>
+ <mat-icon matListItemIcon fontSet="fas" fontIcon="fa-brain"></mat-icon>
<div mat-line class="overview-content">{{ parcellation.name }}</div>
</button>
<!-- region position (if eixsts) -->
<ng-template [ngIf]="regionPosition">
<button mat-list-item (click)="navigateTo(regionPosition)">
- <mat-icon mat-list-icon fontSet="fas" fontIcon="fa-map-marker"></mat-icon>
+ <mat-icon matListItemIcon fontSet="fas" fontIcon="fa-map-marker"></mat-icon>
<div mat-line class="overview-content">Centroid: {{ regionPosition | numbers | addUnitAndJoin : 'mm' }}</div>
</button>
</ng-template>
@@ -61,7 +62,7 @@
<!-- all dois -->
<ng-template ngFor [ngForOf]="dois$ | async" let-doi>
<a mat-list-item [href]="doi" target="_blank" class="no-hover">
- <mat-icon mat-list-icon fontSet="ai" fontIcon="ai-doi"></mat-icon>
+ <mat-icon matListItemIcon fontSet="ai" fontIcon="ai-doi"></mat-icon>
<div mat-line>{{ doi }}</div>
</a>
</ng-template>
@@ -77,7 +78,7 @@
<button mat-list-item
[sxplr-dialog]="relatedRegionsTmpl"
sxplr-dialog-size="auto">
- <mat-icon mat-list-icon fontSet="fas" fontIcon="fa-link"></mat-icon>
+ <mat-icon matListItemIcon fontSet="fas" fontIcon="fa-link"></mat-icon>
<div mat-line class="overview-content">Related Regions ({{ relatedRegions.length }})</div>
</button>
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.style.scss b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.style.scss
index 5ad8ab80f..44811a51b 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.style.scss
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.style.scss
@@ -42,3 +42,22 @@ sxplr-smart-chip:not(:last-child)
padding-left: 1rem;
}
}
+
+.parent
+{
+ display: flex;
+ flex-wrap: nowrap;
+
+ > :first-child,
+ > :last-child
+ {
+ flex: 0 0 1rem;
+ }
+ > .text
+ {
+ flex: 1 1 auto;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+}
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.template.html b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.template.html
index d1a85f1b6..936214c58 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.template.html
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.template.html
@@ -156,36 +156,40 @@
let-overrideSuffixIcon="overrideSuffixIcon"
let-suffixText="suffixText">
- <!-- prefix -->
- <ng-template [ngIf]="overridePrefixIconTmpl" [ngIfElse]="defaultPrefix">
- <ng-template [ngTemplateOutlet]="overridePrefixIconTmpl"></ng-template>
- </ng-template>
- <ng-template #defaultPrefix>
- <ng-template [ngIf]="view.selectedIds" let-selectedIds>
- <mat-icon
- fontSet="fas"
- [fontIcon]="selectedIds.includes(item.id) ? 'fa-circle' : 'fa-none'"
- >
- </mat-icon>
+ <div class="parent">
+ <!-- prefix -->
+ <ng-template [ngIf]="overridePrefixIconTmpl" [ngIfElse]="defaultPrefix">
+ <ng-template [ngTemplateOutlet]="overridePrefixIconTmpl"></ng-template>
+ </ng-template>
+ <ng-template #defaultPrefix>
+ <ng-template [ngIf]="view.selectedIds" let-selectedIds>
+ <mat-icon
+ class="icon"
+ fontSet="fas"
+ [fontIcon]="selectedIds.includes(item.id) ? 'fa-circle' : 'fa-none'"
+ >
+ </mat-icon>
+ </ng-template>
</ng-template>
- </ng-template>
- <!-- button body -->
- <span *ngIf="item" class="full-sized-button"
- [matTooltip]="item.version?.name || item.name || item.fullName"
- [matTooltipPosition]="'above'">
- {{ item.version?.name || item.shortName || item.name || item.fullName }}
- <ng-template [ngIf]="suffixText">
- <span class="text-muted">
- {{ suffixText }}
- </span>
+ <!-- button body -->
+ <span *ngIf="item" class="full-sized-button text"
+ [matTooltip]="item.version?.name || item.name || item.fullName"
+ [matTooltipPosition]="'above'">
+ {{ item.version?.name || item.shortName || item.name || item.fullName }}
+ <ng-template [ngIf]="suffixText">
+ <span class="text-muted">
+ {{ suffixText }}
+ </span>
+ </ng-template>
+ </span>
+
+ <!-- suffix -->
+ <ng-template [ngIf]="overrideSuffixIcon">
+ <i [class]="overrideSuffixIcon"></i>
</ng-template>
- </span>
+ </div>
- <!-- suffix -->
- <ng-template [ngIf]="overrideSuffixIcon">
- <i [class]="overrideSuffixIcon"></i>
- </ng-template>
</ng-template>
</ng-template>
diff --git a/src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.template.html b/src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.template.html
index c56656a7e..9e5f46b03 100644
--- a/src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.template.html
+++ b/src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.template.html
@@ -1,5 +1,6 @@
<mat-form-field
class="sxplr-w-100"
+ subscriptSizing="dynamic"
floatLabel="auto">
<input
placeholder="Search for regions"
diff --git a/src/components/smartChip/component/smartChip.template.html b/src/components/smartChip/component/smartChip.template.html
index 2baef9e66..7516b1b19 100644
--- a/src/components/smartChip/component/smartChip.template.html
+++ b/src/components/smartChip/component/smartChip.template.html
@@ -1,4 +1,3 @@
-
<div [style.background-color]="color"
[matMenuTriggerFor]="noMenuFlag ? null : mainMenu"
(menuOpened)="menuOpened.emit()"
diff --git a/src/extra_styles.css b/src/extra_styles.css
index 41762c096..427f8e8e9 100644
--- a/src/extra_styles.css
+++ b/src/extra_styles.css
@@ -603,6 +603,8 @@ markdown-dom p
.mat-drawer-content-overflow-visible > mat-drawer > .mat-drawer-inner-container
{
overflow: visible!important;
+ /** monkey patch to hide sidebar */
+ height: 99%;
}
mat-icon[fontset="fas"],
diff --git a/src/theme.scss b/src/theme.scss
index b163b1c26..5a9d897e8 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -3,19 +3,19 @@
@include mat.core();
-$sxplr-primary: mat.define-palette(mat.$indigo-palette, 500);
+$sxplr-primary: mat.define-palette(mat.$indigo-palette, 400);
$sxplr-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
$sxplr-warn: mat.define-palette(mat.$red-palette);
-// The "warn" palette is optional and defaults to red if not specified.
-$sxplr-warn: mat.define-palette(mat.$red-palette);
+$typographic-connfig: mat.define-typography-config();
+
$sxplr-light-theme: mat.define-light-theme((
color: (
primary: $sxplr-primary,
accent: $sxplr-accent,
warn: $sxplr-warn,
),
- typography: mat.define-typography-config(),
+ typography: $typographic-connfig,
density: 0,
));
@@ -26,7 +26,7 @@ $sxplr-dark-theme: mat.define-dark-theme((
accent: $sxplr-accent,
warn: $sxplr-warn,
),
- typography: mat.define-typography-config(),
+ typography: $typographic-connfig,
density: 0,
));
@@ -40,9 +40,6 @@ $sxplr-dark-theme: mat.define-dark-theme((
// you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
-// @include mat.all-legacy-component-typographies();
-// @include mat.legacy-core();
-
@mixin custom-cmp($theme) {
$color-config: mat.get-color-config($theme);
@@ -150,38 +147,37 @@ $sxplr-dark-theme: mat.define-dark-theme((
{
@include mat.all-component-themes($sxplr-dark-theme);
@include custom-cmp($sxplr-dark-theme);
+ input[type="text"]
+ {
+ caret-color: white!important;
+ }
}
[darktheme=false],
.lighttheme.lighttheme
{
- @include custom-cmp($sxplr-light-theme);
@include mat.all-component-themes($sxplr-light-theme);
+ @include custom-cmp($sxplr-light-theme);
+ input[type="text"]
+ {
+ caret-color: black!important;
+ }
}
-.iav-dialog-class
+button[mat-icon-button]
{
+ width:40px;
+ height:40px;
+ font-size:18px;
+}
- @media (min-width: 576px) {
-
- }
-
- // Medium devices (tablets, 768px and up)
- @media (min-width: 768px) {
-
- max-width: 50vw!important;
- }
-
- // Large devices (desktops, 992px and up)
- @media (min-width: 992px) {
-
- max-width: 50vw!important;
- }
-
- // Extra large devices (large desktops, 1200px and up)
- @media (min-width: 1200px) {
-
- max-width: 50vw!important;
+a[mat-list-item]
+{
+ > mat-icon
+ {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
}
}
diff --git a/src/ui/dialogInfo/tmpl/tmpl.template.html b/src/ui/dialogInfo/tmpl/tmpl.template.html
index 01b8d2026..807a5c4cc 100644
--- a/src/ui/dialogInfo/tmpl/tmpl.template.html
+++ b/src/ui/dialogInfo/tmpl/tmpl.template.html
@@ -11,15 +11,14 @@
<mat-dialog-content>
- <div *ngIf="data.descMd || data.desc" mat-dialog-content class="mat-body">
+ <div *ngIf="data.descMd || data.desc" class="mat-body">
- <div class="sxplr-dialog-body">
- <ng-template [ngIf]="data.desc">
- {{ data.desc }}
- </ng-template>
- </div>
+
+ <ng-template [ngIf]="data.desc">
+ {{ data.desc }}
+ </ng-template>
- <markdown-dom class="sxplr-dialog-body" *ngIf="data.descMd" [markdown]="data.descMd">
+ <markdown-dom *ngIf="data.descMd" [markdown]="data.descMd">
</markdown-dom>
</div>
diff --git a/src/viewerModule/viewerCmp/viewerCmp.style.css b/src/viewerModule/viewerCmp/viewerCmp.style.css
index 750f6bace..cc90a9f06 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.style.css
+++ b/src/viewerModule/viewerCmp/viewerCmp.style.css
@@ -165,3 +165,9 @@ sxplr-overlay-ui
width: 100%;
height: 100%;
}
+
+sxplr-sapiviews-core-region-region-list-item
+{
+ display: flex;
+ align-items: center;
+}
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 9035dc990..62d496a66 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -544,9 +544,10 @@
<ng-template #autocompleteTmpl let-showTour="showTour">
<ng-template [ngIf]="view$ | async" let-view>
- <div class="sxplr-custom-cmp bg card ml-2 mr-2 mat-elevation-z8 pe-all auto-complete-container">
+ <div class="ml-2 mr-2 pe-all auto-complete-container">
<sxplr-sapiviews-core-rich-regionlistsearch
+ class="mat-elevation-z4"
[sxplr-sapiviews-core-rich-regionlistsearch-regions]="allAvailableRegions$ | async"
[sxplr-sapiviews-core-rich-regionlistsearch-mapped-region-names]="view.labelMappedRegionNames"
[sxplr-sapiviews-core-rich-regionlistsearch-current-search]="view.selectedRegions.length === 1 ? view.selectedRegions[0].name : null"
--
GitLab