josh/dashy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Uses SVGs instead of images for interface icons

Browse Source
This commit is contained in:
Alicia Sykes
2021-04-04 22:17:10 +01:00
parent 4fffa2b698
commit 5ca3192992
8 changed files with 119 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/icons/layout-default.svg Normal file
View File

@@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="th" class="svg-inline--fa fa-th fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/assets/icons/layout-horizontal.svg Normal file
View File

@@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="grip-horizontal" class="svg-inline--fa fa-grip-horizontal fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M96 288H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm160 0h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm160 0h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM96 96H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm160 0h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm160 0h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 933 B

1
src/assets/icons/layout-vertical.svg Normal file
View File

@@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="grip-vertical" class="svg-inline--fa fa-grip-vertical fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 924 B

55
src/components/FilterTile.vue
View File

@@ -17,9 +17,12 @@
<div class="options-container">
<span class="options-label">Layout</span>
<div class="display-options">
<i class="fas fa-th" @click="updateDisplayLayout('default')"></i>
<i class="fas fa-grip-vertical" @click="updateDisplayLayout('vertical')"></i>
<i class="fas fa-grip-horizontal" @click="updateDisplayLayout('horizontal')"></i>
<IconDeafault @click="updateDisplayLayout('default')"
:class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" />
<IconHorizontal class="layout-icon" @click="updateDisplayLayout('horizontal')"
:class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" />
<IconVertical class="layout-icon" @click="updateDisplayLayout('vertical')"
:class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" />
</div>
</div>
<KeyboardShortcutInfo />
@@ -29,6 +32,10 @@
<script>
import KeyboardShortcutInfo from '@/components/KeyboardShortcutInfo';
import IconDeafault from '@/assets/icons/layout-default.svg';
import IconHorizontal from '@/assets/icons/layout-horizontal.svg';
import IconVertical from '@/assets/icons/layout-vertical.svg';
export default {
name: 'FilterTile',
data() {
@@ -36,8 +43,14 @@ export default {
input: '',
};
},
props: {
displayLayout: String,
},
components: {
KeyboardShortcutInfo,
IconDeafault,
IconHorizontal,
IconVertical,
},
methods: {
userIsTypingSomething() {
@@ -131,24 +144,30 @@ export default {
span.options-label {
font-size: 0.8rem;
color: #5cabca;
width: 6rem;
width: 5.5rem;
text-align: left;
}
i.fas {
min-width: 1.2rem;
font-size: 1rem;
margin: 0.2rem;
padding: 0.2rem;
text-align: center;
color: #5cabca;
background: #05070e;
border: 1px solid #5cabca;
border-radius: 4px;
opacity: 0.8;
cursor: pointer;
&:hover {
opacity: 1;
.display-options {
color: $ascent;
svg {
path {
fill: $ascent;
}
width: 1rem;
height: 1rem;
margin: 0.2rem;
padding: 0.2rem;
text-align: center;
background: $background;
border: 1px solid currentColor;
border-radius: 4px;
opacity: 0.8;
cursor: pointer;
&:hover, &.selected {
background: $ascent;
path { fill: $background; }
}
}
}
}

1
src/views/Home.vue
View File

@@ -6,6 +6,7 @@
<FilterTile ref="filterComp"
@user-is-searchin="searching"
@change-display-layout="setLayoutOrientation"
:displayLayout="layout"
class="filter-container"
/>
<!-- Main content, section for each group of items -->