inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-4036] Move ay11 focus feature to one file and fix 'jumping' (#2805)

Browse Source 
* [ACS-4036] Move ay11 focus feature to one file and fix 'jumping'

* [ACS-4036] Move ay11 stylesheet to correct folder
This commit is contained in:
MichalKinas 2022-11-24 10:11:38 +01:00 committed by GitHub
parent 456454fee1
commit ad9b532c53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 213 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/app/content-plugin/ui/custom-theme.scss
View File

@ -1,6 +1,7 @@
@use '@angular/material' as mat;
@import './overrides/adf-style-fixes.theme';
@import './overrides/adf-pagination.theme';
@import './overrides/ay11';
@import './colors';
$mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
@ -20,4 +21,5 @@ $custom-theme: mat.define-light-theme(
@include adf-core-theme($theme);
@include adf-style-fixes($theme);
@include adf-pagination-theme($theme);
@include ay11-theme();
}

9
app/src/app/content-plugin/ui/mixins.scss
View File

@ -15,7 +15,12 @@
overflow: hidden;
}
@mixin rounded-border($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
border: $thickness solid $border-color;
@mixin rounded-outline($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
outline: $thickness solid $border-color;
border-radius: $radius;
}
@mixin rounded-border($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
border: $thickness solid $border-color !important;
border-radius: $radius;
}

16
app/src/app/content-plugin/ui/overrides/adf-pagination.theme.scss
View File

@ -14,22 +14,6 @@
line-height: 24px !important;
padding: 16px 0;
background: var(--theme-pagination-background-color);
&__perpage-block,
&__actualinfo-block {
.mat-icon-button {
&:focus {
border: none;
left: 3px;
}
&.cdk-focused {
.mat-icon {
@include rounded-border();
}
}
}
}
}
.adf-pagination__range-block {

204
app/src/app/content-plugin/ui/overrides/ay11.scss Normal file
View File

@ -0,0 +1,204 @@
@mixin ay11-theme() {
.adf-pagination {
&__perpage-block,
&__actualinfo-block {
.mat-icon-button {
left: 3px;
&:focus-visible {
outline: none;
}
&.cdk-keyboard-focused {
.mat-icon {
@include rounded-outline();
}
}
}
}
}
.mat-icon-button, .mat-button, .mat-checkbox, .mat-raised-button {
&:focus-visible {
@include rounded-outline();
}
.mat-ripple-element {
display: none;
}
&.cdk-keyboard-focused {
.mat-button-focus-overlay {
display: none;
}
.mat-checkbox-ripple {
@include rounded-outline();
height: 22px;
width: 22px;
left: calc(50% - 11px);
top: calc(50% - 11px);
}
}
}
.adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected > svg {
fill: var(--theme-blue-button-color) !important;
}
.mat-list-base .mat-list-option {
&:focus-visible {
background-color: white;
.mat-list-item-content {
@include rounded-border();
}
}
.mat-list-item-content {
@include rounded-border(transparent);
}
}
.acs-close-members-container {
.mat-icon-button {
outline: none;
line-height: 36px !important;
@include rounded-border(transparent);
&:focus-visible {
@include rounded-border();
}
}
}
.adf-search-user-button, .app-search-button {
line-height: 36px !important;
@include rounded-border(transparent);
&:focus-visible {
outline: none;
@include rounded-border();
}
}
.mat-menu-item {
.mat-menu-ripple {
display: none;
}
@include rounded-border(transparent);
&:focus-visible {
@include rounded-border();
background-color: white;
}
&.cdk-keyboard-focused:not([disabled]) {
background-color: white;
}
}
.adf-toolbar-title {
padding: 2px;
}
.mat-option {
&.cdk-keyboard-focused {
.mat-option-ripple {
@include rounded-outline();
}
}
}
.mat-slide-toggle {
&.mat-primary.mat-checked:not(.mat-disabled) {
.mat-slide-toggle-bar {
background-color: var(--theme-blue-button-color);
}
.mat-slide-toggle-thumb {
background-color: white;
}
}
.mat-slide-toggle-thumb {
width: 15px;
height: 15px;
transform: translate(20%, 50%);
background-color: #484a4d;
}
.mat-slide-toggle-bar {
border-radius: 15px;
height: 20px;
}
.mat-slide-toggle-thumb-container {
top: -5px;
}
.mat-slide-toggle-ripple {
display: none;
}
&.cdk-keyboard-focused {
.mat-slide-toggle-bar {
outline: 2px solid var(--theme-blue-button-color);
}
}
}
.mat-stroked-button, .mat-flat-button {
&.cdk-keyboard-focused {
.mat-button-ripple.mat-ripple {
outline: 2px solid var(--theme-blue-button-color);
top: -4px;
left: -4px;
bottom: -4px;
right: -4px;
}
}
}
.mat-option {
&.cdk-keyboard-focused {
.mat-option-ripple {
@include rounded-outline();
}
}
}
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
background-color: white !important;
outline: 2px solid var(--theme-blue-button-color);
}
.mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
background-color: #2254b2;
}
.mat-expansion-panel .mat-expansion-panel-header {
border: 2px solid transparent;
.mat-button {
outline: none;
@include rounded-border(transparent);
&:focus-visible {
@include rounded-border();
background-color: white;
}
}
&.cdk-keyboard-focused:not([aria-disabled=true]) {
background-color: white;
@include rounded-border();
}
}
.adf-error-snackbar {
background-color: #ba1b1b;
.mat-simple-snackbar, .mat-simple-snackbar-action {
color: white;
}
}
.adf-info-snackbar {
background-color: var(--theme-blue-button-color);
.mat-simple-snackbar, .mat-simple-snackbar-action {
color: white;
}
}
.adf-filter-button {
margin-left: -2px !important;
}
}

139
app/src/app/content-plugin/ui/theme.scss
View File

@ -51,145 +51,6 @@ $contrast-gray: #646569;
color: $contrast-gray !important;
}
.mat-icon-button, .mat-button, .mat-checkbox, .mat-raised-button {
&:focus {
@include rounded-border();
}
.mat-ripple-element {
display: none;
}
&.cdk-focused {
.mat-button-focus-overlay {
display: none;
}
.mat-checkbox-ripple {
@include rounded-border();
height: 22px;
width: 22px;
left: calc(50% - 13px);
top: calc(50% - 13px);
}
}
}
.adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected > svg {
fill: var(--theme-blue-button-color) !important;
}
.mat-list-base .mat-list-option:focus {
background-color: white;
.mat-list-item-content {
border: 2px solid var(--theme-blue-button-color);
}
}
.mat-menu-item {
.mat-menu-ripple {
display: none;
}
&:focus {
@include rounded-border();
background-color: white;
}
&.cdk-keyboard-focused:not([disabled]) {
background-color: white;
}
}
.mat-option {
&.cdk-focused {
.mat-option-ripple {
@include rounded-border();
}
}
}
.mat-slide-toggle {
.mat-slide-toggle-thumb {
width: 15px;
height: 15px;
transform: translate(20%, 50%);
background-color: #484a4d;
}
.mat-slide-toggle-bar {
border-radius: 15px;
height: 20px;
}
.mat-slide-toggle-thumb-container {
top: -5px;
}
&.mat-primary.mat-checked:not(.mat-disabled) {
.mat-slide-toggle-bar {
background-color: var(--theme-blue-button-color);
}
.mat-slide-toggle-thumb {
background-color: white;
}
}
.mat-slide-toggle-ripple {
display: none;
}
&.cdk-focused {
.mat-slide-toggle-bar {
border: 2px solid var(--theme-blue-button-color);
}
}
}
.mat-stroked-button, .mat-flat-button {
&.cdk-focused {
.mat-button-ripple.mat-ripple {
border: 2px solid var(--theme-blue-button-color);
top: -4px;
left: -4px;
bottom: -4px;
right: -4px;
}
}
}
.mat-option {
&.cdk-focused {
.mat-option-ripple {
@include rounded-border();
}
}
}
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
background-color: white !important;
border: 2px solid var(--theme-blue-button-color);
}
.mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
background-color: #2254b2;
}
.mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]) {
background-color: white;
border: 2px solid var(--theme-blue-button-color);
}
.adf-error-snackbar {
background-color: #ba1b1b;
.mat-simple-snackbar, .mat-simple-snackbar-action {
color: white;
}
}
.adf-info-snackbar {
background-color: var(--theme-blue-button-color);
.mat-simple-snackbar, .mat-simple-snackbar-action {
color: white;
}
}
.adf-empty-content__icon {
color: $contrast-gray;
}