Skip to content
Snippets Groups Projects
Commit 2e49ddd5 authored by Xiao Gui's avatar Xiao Gui
Browse files

fixing styles (WIP)

parent 96ae8866
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 121 additions and 109 deletions
src/atlasComponents/sapiViews/core/atlas/splashScreen/splashScreen.style.css
+ 2
− 2
View file @ 2e49ddd5
......@@ -6,7 +6,7 @@
width: 100%;
}
.font-stretch
mat-card
{
font-stretch: extra-condensed;
margin: 5rem;
}
\ No newline at end of file
src/atlasComponents/sapiViews/core/atlas/splashScreen/splashScreen.template.html
+ 15
− 30
View file @ 2e49ddd5
<!-- 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>
src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css
+ 1
− 2
View file @ 2e49ddd5
.vanishing-border
mat-card-header
{
padding: 16px;
margin: -16px!important;
}
.feature-list-container
......
src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
+ 11
− 10
View file @ 2e49ddd5
......@@ -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>
......
src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.style.scss
+ 19
− 0
View file @ 2e49ddd5
......@@ -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;
}
}
src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.template.html
+ 30
− 26
View file @ 2e49ddd5
......@@ -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>
......
src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.template.html
+ 1
− 0
View file @ 2e49ddd5
<mat-form-field
class="sxplr-w-100"
subscriptSizing="dynamic"
floatLabel="auto">
<input
placeholder="Search for regions"
......
src/components/smartChip/component/smartChip.template.html
+ 0
− 1
View file @ 2e49ddd5
<div [style.background-color]="color"
[matMenuTriggerFor]="noMenuFlag ? null : mainMenu"
(menuOpened)="menuOpened.emit()"
......
src/extra_styles.css
+ 2
− 0
View file @ 2e49ddd5
......@@ -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"],
......
src/theme.scss
+ 26
− 30
View file @ 2e49ddd5
......@@ -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;
}
}
......
src/ui/dialogInfo/tmpl/tmpl.template.html
+ 6
− 7
View file @ 2e49ddd5
......@@ -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>
......
src/viewerModule/viewerCmp/viewerCmp.style.css
+ 6
− 0
View file @ 2e49ddd5
......@@ -165,3 +165,9 @@ sxplr-overlay-ui
width: 100%;
height: 100%;
}
sxplr-sapiviews-core-region-region-list-item
{
display: flex;
align-items: center;
}
src/viewerModule/viewerCmp/viewerCmp.template.html
+ 2
− 1
View file @ 2e49ddd5
......@@ -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"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment