luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor z-index values to a SCSS map (#3332)

Browse source 
* refactor: move all `z-index` values to a SCSS map

* style: add newline

* chore: disallow `z-index` directly in stylelint
This commit is contained in:
Paul Esch-Laurent 2022-07-11 06:57:03 -05:00 committed by GitHub
parent 970f20a241
commit 364be89424
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 124 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
webapp/.stylelintrc.json
View file

@ -8,6 +8,7 @@
"selector-max-id": 1,
"selector-no-qualifying-type": null,
"order/properties-alphabetical-order": null,
"declaration-block-no-duplicate-properties": true
"declaration-block-no-duplicate-properties": true,
"property-disallowed-list": ["z-index"]
}
}

4
webapp/src/components/boardTemplateSelector/boardTemplateSelector.scss
View file

@ -1,7 +1,9 @@
@import '../../styles/z-index';
.BoardTemplateSelector {
@include z-index(board-template-selector);
position: absolute;
background-color: rgb(var(--center-channel-bg-rgb));
z-index: 1000;
top: 0;
left: 0;
width: 100%;

4
webapp/src/components/calendar/fullcalendar.scss
View file

@ -1,3 +1,5 @@
@import '../../styles/z-index';
.CalendarContainer {
margin-right: 80px;
margin-bottom: 10px;
@ -24,13 +26,13 @@
}
.optionsMenu {
@include z-index(calendar-options-menu);
background-color: rgb(var(--center-channel-bg-rgb));
border-radius: var(--default-rad);
display: none;
position: absolute;
right: 0;
top: 0;
z-index: 30;
.IconButton {
background-color: rgba(var(--center-channel-color-rgb), 0.13);

4
webapp/src/components/cardDetail/cardDetail.scss
View file

@ -1,3 +1,5 @@
@import '../../styles/z-index';
.CardDetail {
.title {
width: 100%;
@ -72,8 +74,8 @@
}
.ValueSelector__menu {
@include z-index(card-value-selector-menu);
max-width: 100%;
z-index: 10;
.value-menu-option {
justify-content: space-between;

4
webapp/src/components/centerPanel.scss
View file

@ -1,3 +1,5 @@
@import '../styles/z-index';
.CenterPanel {
flex: 1 1 auto;
display: flex;
@ -39,11 +41,11 @@
}
> .top-head {
@include z-index(center-panel);
position: sticky;
top: 0;
left: 0;
background: rgb(var(--center-channel-bg-rgb));
z-index: 100;
> .mid-head {
margin-top: 24px;

4
webapp/src/components/confirmationDialogBox.scss
View file

@ -1,5 +1,8 @@
@import '../styles/z-index';
.confirmation-dialog-box {
.dialog {
@include z-index(confirmation-dialog-box);
color: rgb(var(--center-channel-color-rgb));
max-width: 512px;
width: 100%;
@ -8,7 +11,6 @@
left: 50%;
transform: translate(-50%, -50%);
height: max-content;
z-index: 300;
background-color: rgb(var(--center-channel-bg-rgb));
box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,

6
webapp/src/components/dialog.scss
View file

@ -1,16 +1,18 @@
@import '../styles/z-index';
.Dialog {
&.dialog-back {
@include z-index(dialog-back);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 200;
}
.backdrop {
@include z-index(dialog-backdrop);
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
background-color: rgba(var(--center-channel-color-rgb), 0.5);

4
webapp/src/components/flashMessages.scss
View file

@ -1,4 +1,7 @@
@import '../styles/z-index';
.FlashMessages {
@include z-index(flash-messages);
display: flex;
align-items: center;
justify-content: center;
@ -17,7 +20,6 @@
font-size: 18px;
vertical-align: middle;
border-radius: 20px;
z-index: 999;
&.flashIn {
visibility: visible;

4
webapp/src/components/gallery/galleryCard.scss
View file

@ -1,3 +1,5 @@
@import '../../styles/z-index';
.GalleryCard {
position: relative;
border: 1px solid rgba(var(--center-channel-color-rgb), 0.09);
@ -25,13 +27,13 @@
}
.optionsMenu {
@include z-index(gallery-options-menu);
background-color: rgb(var(--center-channel-bg-rgb));
border-radius: var(--default-rad);
display: none;
position: absolute;
right: 10px;
top: 10px;
z-index: 30;
.IconButton {
background-color: rgba(var(--center-channel-color-rgb), 0.13);

4
webapp/src/components/kanban/calculation/calculationOption.scss
View file

@ -1,3 +1,5 @@
@import '../../../styles/z-index';
.KanbanCalculationOptions_CustomOption {
color: rgba(var(--center-channel-color-rgb), 1);
min-height: 36px;
@ -41,12 +43,12 @@
}
.dropdown-submenu {
@include z-index(calculation-dropdown);
position: fixed;
overflow: auto;
background: rgb(var(--center-channel-bg-rgb));
border: 0;
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1);
z-index: 999;
padding: 8px 0;
border-radius: 4px;
}

4
webapp/src/components/kanban/kanban.scss
View file

@ -1,8 +1,11 @@
@import '../../styles/z-index';
.Kanban {
overflow: auto;
flex: 1;
.octo-board-header {
@include z-index(kanban-board-header);
display: flex;
flex-direction: row;
width: max-content;
@ -11,7 +14,6 @@
color: #909090;
position: sticky;
top: 0;
z-index: 1;
background: rgb(var(--center-channel-bg-rgb));
}

4
webapp/src/components/modal.scss
View file

@ -1,8 +1,10 @@
@import '../styles/z-index';
.Modal {
@include z-index(modal);
position: absolute;
top: 25px;
left: -240px;
z-index: 10;
background-color: rgb(var(--center-channel-bg-rgb));
padding: 10px;
border-radius: 3px;

7
webapp/src/components/shareBoard/shareBoard.scss
View file

@ -1,3 +1,6 @@
@import '../../styles/z-index';
.ShareBoardDialog {
.dialog {
width: 600px;
@ -17,10 +20,10 @@
padding: 0;
button {
@include z-index(share-board-element);
position: absolute;
right: 16px;
top: 16px;
z-index: 5;
}
}
@ -153,8 +156,8 @@
width: 100%;
i {
@include z-index(share-board-element);
color: rgba(var(--center-channel-color-rgb), 0.64);
z-index: 5;
position: relative;
font-size: 18px;
}

4
webapp/src/components/sidebar/sidebar.scss
View file

@ -1,3 +1,5 @@
@import '../../styles/z-index';
.Sidebar {
flex: 0 0 240px;
max-width: 240px;
@ -10,10 +12,10 @@
padding: 24px 0 12px;
&.hidden {
@include z-index(sidebar-hidden);
position: absolute;
top: 0;
left: 0;
z-index: 105;
min-height: 0;
height: 50px;
width: 50px;

4
webapp/src/components/table/table.scss
View file

@ -1,3 +1,5 @@
@import '../../styles/z-index';
.Table {
margin-top: 16px;
padding-bottom: 0 !important;
@ -192,9 +194,9 @@
}
.octo-table-header {
@include z-index(table-header);
position: sticky;
top: -2px;
z-index: 1;
background: rgb(var(--center-channel-bg-rgb));
width: fit-content;

4
webapp/src/components/table/tableRow.scss
View file

@ -1,3 +1,5 @@
@import '../../styles/z-index';
.TableRow {
.open-button {
display: none;
@ -34,6 +36,7 @@
}
.action-cell {
@include z-index(table-row-action-cell);
flex: 0 0 auto;
display: flex;
flex-direction: row;
@ -47,7 +50,6 @@
font-size: 14px;
text-overflow: ellipsis;
position: fixed;
z-index: 100;
}
.octo-table-cell-btn {

4
webapp/src/components/topBar.scss
View file

@ -1,8 +1,10 @@
@import '../styles/z-index';
.TopBar {
@include z-index(top-bar);
position: absolute;
top: 8px;
right: 32px;
z-index: 10;
display: flex;
flex-direction: row;

6
webapp/src/components/tutorial_tour_tip/tutorial_tour_tip.scss
View file

@ -1,4 +1,6 @@
@import '../../styles/z-index';
.tutorial-tour-tip {
display: flex;
@ -112,8 +114,8 @@
}
&__overlay {
@include z-index(tour-tip-overlay);
position: fixed;
z-index: 999;
top: 0;
right: 0;
bottom: 0;
@ -339,8 +341,8 @@
}
.tip-backdrop {
@include z-index(tour-tip-backdrop);
position: absolute;
z-index: 999;
top: 0;
left: 0;
width: 100%;

4
webapp/src/components/workspace.scss
View file

@ -1,3 +1,5 @@
@import '../styles/z-index';
.Workspace {
flex: 1 1 auto;
display: flex;
@ -6,12 +8,12 @@
position: relative;
> .mainFrame {
@include z-index(workspace-main-frame);
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 9;
> .banner {
background-color: rgba(230, 220, 192, 0.9);

47
webapp/src/styles/_z-index.scss Normal file
View file

@ -0,0 +1,47 @@
// Keep in descending order to aid in visual grepping
//
// Usage:
// z-index: map-get($z-index, <key>)
// or
// z-index: z-index(<key>)
// or
// @include z-index(<key>)
$z-index: (
// key: value
board-template-selector: 1000,
notification-box: 1000,
calculation-dropdown: 999,
flash-messages: 999,
tour-tip-backdrop: 999,
tour-tip-overlay: 999,
confirmation-dialog-box: 300,
dialog-back: 200,
sidebar-hidden: 105,
center-panel: 100,
hover-tooltip-body: 100,
table-row-action-cell: 100,
hover-tooltip-arrow: 99,
calendar-options-menu: 30,
gallery-options-menu: 30,
sub-menu-option-sub-menu: 16,
menu: 15,
card-value-selector-menu: 10,
modal: 10,
top-bar: 10,
workspace-main-frame: 9,
share-board-element: 5,
block-hover: 1,
kanban-board-header: 1,
table-header: 1,
value-selector-delete: 1,
dialog-backdrop: -1,
);
@function z-index($key) {
@return map-get($z-index, $key);
}
@mixin z-index($key) {
z-index: z-index($key); /* stylelint-disable-line property-disallowed-list */
}

3
webapp/src/styles/main.scss
View file

@ -1,5 +1,6 @@
@import 'typography';
@import 'modifiers';
@import 'z-index';
html {
height: 100%;
@ -209,8 +210,8 @@ html {
width: 100%;
&:hover {
@include z-index(block-hover);
position: relative;
z-index: 1;
}
> * {

4
webapp/src/widgets/menu/menu.scss
View file

@ -1,3 +1,5 @@
@import '../../styles/z-index';
.status-dropdown-menu {
> .Menu {
position: inherit;
@ -5,10 +7,10 @@
}
.Menu {
@include z-index(menu);
display: flex;
flex-direction: column;
position: absolute;
z-index: 15;
background-color: rgb(var(--center-channel-bg-rgb));
color: rgb(var(--center-channel-color-rgb));
border-radius: var(--default-rad);

4
webapp/src/widgets/menu/subMenuOption.scss
View file

@ -1,3 +1,5 @@
@import '../../styles/z-index';
.Menu .menu-options .SubMenuOption.open-left {
padding: 4px 5px;
@ -18,8 +20,8 @@
}
.SubMenu {
@include z-index(sub-menu-option-sub-menu);
position: absolute;
z-index: 16;
min-width: 180px;
background-color: rgb(var(--center-channel-bg-rgb));
color: rgb(var(--center-channel-color-rgb));

4
webapp/src/widgets/notificationBox/notificationBox.scss
View file

@ -1,4 +1,7 @@
@import '../../styles/z-index';
.NotificationBox {
@include z-index(notification-box);
position: fixed;
bottom: 52px;
right: 32px;
@ -9,7 +12,6 @@
display: flex;
padding: 22px;
width: 400px;
z-index: 1000;
.NotificationBox__icon {
margin-right: 10px;

5
webapp/src/widgets/tooltip.scss
View file

@ -1,3 +1,4 @@
@import '../styles/z-index';
// Tooltip arrow width
$tooltip-arrow-width: 6px;
@ -6,6 +7,7 @@ $tooltop-horizontal-offset: 2px;
$tooltop-vertical-offset: 2px;
%hover-tooltip-body {
@include z-index(hover-tooltip-body);
position: absolute;
content: attr(data-tooltip);
padding: 2px 4px;
@ -25,10 +27,10 @@ $tooltop-vertical-offset: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
z-index: 100;
}
%hover-tooltip-arrow {
@include z-index(hover-tooltip-arrow);
content: '';
position: absolute;
width: 0;
@ -36,7 +38,6 @@ $tooltop-vertical-offset: 2px;
border-width: $tooltip-arrow-width;
border-style: solid;
border-color: #000 transparent transparent;
z-index: 99;
}
.octo-tooltip {

4
webapp/src/widgets/valueSelector.scss
View file

@ -1,3 +1,5 @@
@import '../styles/z-index';
.ValueSelector {
width: 100%;
border-radius: var(--default-rad);
@ -21,10 +23,10 @@
max-width: 100%;
.IconButton.delete-value {
@include z-index(value-selector-delete);
width: 16px;
min-width: 16px;
height: 16px;
z-index: 1;
i {
font-size: 16px;