ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix design, dark mode and keyboard navigation of the board list

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-08-20 16:48:24 +02:00
parent 6699eb7f70
commit 897c42609b
5 changed files with 29 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/collections.css
View File

@@ -1,7 +1,3 @@
.icon-deck {
background-image: url('../img/deck-dark.svg');
}
.resource-type-deck img {
opacity: 0.4 !important;
}

80
css/icons.scss
View File

@@ -1,81 +1,27 @@
/**
* Custom icons
*/
.icon-deck {
background-image: url('../img/deck-dark.svg');
}
.icon-help {
background-image: url('../../../settings/img/help.svg');
}
.icon-add-white {
background-image: url('../img/add-white.svg');
}
.icon-attach {
background-image: url('../img/attach.svg');
}
.icon-archive {
background-image: url('../img/archive.svg');
}
.icon-archive-white {
background-image: url('../img/archive-white.svg');
}
.icon-details {
background-image: url('../img/details.svg');
}
.icon-details-white {
background-image: url('../img/details-white.svg');
}
.icon-home {
background-image: var(--icon-home-000, url('../../../core/img/places/home.svg'));
}
.icon-description {
background-image: var(--icon-text-000, url('../img/description.svg'));
}
.icon-badge {
background-image: url('../img/calendar-dark.svg');
}
@include icon-black-white('deck', 'deck', 1);
@include icon-black-white('archive', 'deck', 1);
@include icon-black-white('circles', 'deck', 1);
@include icon-black-white('clone', 'deck', 1);
@include icon-black-white('filter', 'deck', 1);
@include icon-black-white('filter_set', 'deck', 1);
@include icon-black-white('attach', 'deck', 1);
@include icon-black-white('reply', 'deck', 1);
.icon-toggle-compact-collapsed {
background-image: url('../img/toggle-view-expand.svg');
@include icon-color('toggle-view-expand', 'deck', $color-black);
}
.icon-toggle-compact-expanded {
background-image: url('../img/toggle-view-collapse.svg');
@include icon-color('toggle-view-collapse', 'deck', $color-black);
}
.icon-activity {
@include icon-color('activity-dark', 'activity', $color-black);
}
@if mixin-exists('icon-black-white') {
@include icon-black-white('deck', 'deck', 1);
@include icon-black-white('archive', 'deck', 1);
@include icon-black-white('circles', 'deck', 1);
@include icon-black-white('clone', 'deck', 1);
@include icon-black-white('filter', 'deck', 1);
@include icon-black-white('filter_set', 'deck', 1);
@include icon-black-white('attach', 'deck', 1);
@include icon-black-white('reply', 'deck', 1);
.icon-toggle-compact-collapsed {
@include icon-color('toggle-view-expand', 'deck', $color-black);
}
.icon-toggle-compact-expanded {
@include icon-color('toggle-view-collapse', 'deck', $color-black);
}
.icon-activity {
@include icon-color('activity-dark', 'activity', $color-black);
}
}
.avatardiv.circles {
background: var(--color-primary);
}

9
src/components/boards/BoardItem.vue
View File

@@ -25,7 +25,7 @@
:title="board.title"
:to="routeTo"
class="board-list-row"
tag="div">
tag="a">
<div class="board-list-bullet-cell">
<div :style="{ 'background-color': `#${board.color}` }" class="board-list-bullet" />
</div>
@@ -78,6 +78,13 @@ export default {
<style lang="scss" scoped>
.board-list-row {
&:hover, &:focus {
background-color: var(--color-background-hover);
}
cursor: pointer;
}
.board-list-bullet-cell {
padding: 6px 15px;

4
src/components/boards/Boards.vue
View File

@@ -79,10 +79,11 @@ export default {
<style lang="scss">
.board-list {
margin-top: -44px;
.board-list-row {
align-items: center;
border-bottom: 1px solid #ededed;
border-bottom: 1px solid var(--color-border);
display: flex;
}
@@ -93,6 +94,7 @@ export default {
.board-list-header-row {
color: var(--color-text-lighter);
height: 44px;
}
.board-list-bullet-cell,

6
src/components/cards/CardItem.vue
View File

@@ -189,11 +189,15 @@ export default {
.card {
transition: box-shadow 0.1s ease-in-out;
box-shadow: 0 0 2px 0 var(--color-box-shadow);
border-radius: 3px;
border-radius: var(--border-radius-large);
font-size: 100%;
background-color: var(--color-main-background);
margin-bottom: $card-spacing;
body.dark &, body.theme--dark & {
border: 2px solid var(--color-border);
}
&.current-card {
box-shadow: 0 0 5px 0 var(--color-box-shadow);
}