Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-11-23 04:34:44 +03:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -29,6 +29,7 @@
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.18.0",
"sass-loader": "^7.1.0",
"vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {

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 -->

15
vue.config.js Normal file
View File

@ -0,0 +1,15 @@
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg");
},
configureWebpack: {
module: {
rules: [
{
test: /.svg$/,
loader: 'vue-svg-loader',
},
],
}
}
};

62
yarn.lock
View File

@ -2661,6 +2661,22 @@ css-tree@1.0.0-alpha.33:
mdn-data "2.0.4"
source-map "^0.5.3"
css-tree@1.0.0-alpha.37:
version "1.0.0-alpha.37"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
dependencies:
mdn-data "2.0.4"
source-map "^0.6.1"
css-tree@^1.1.2:
version "1.1.3"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
dependencies:
mdn-data "2.0.14"
source-map "^0.6.1"
css-unit-converter@^1.1.1:
version "1.1.1"
resolved "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz"
@ -2756,6 +2772,13 @@ csso@^3.5.1:
dependencies:
css-tree "1.0.0-alpha.29"
csso@^4.0.2:
version "4.2.0"
resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
dependencies:
css-tree "^1.1.2"
current-script-polyfill@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/current-script-polyfill/-/current-script-polyfill-1.0.0.tgz"
@ -5348,6 +5371,11 @@ md5.js@^1.3.4:
inherits "^2.0.1"
safe-buffer "^5.1.2"
mdn-data@2.0.14:
version "2.0.14"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
mdn-data@2.0.4:
version "2.0.4"
resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz"
@ -7919,6 +7947,13 @@ svg-tags@^1.0.0:
resolved "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz"
integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
svg-to-vue@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/svg-to-vue/-/svg-to-vue-0.7.0.tgz#ec86deb1742be38319462e36703af1dfa2f9fad9"
integrity sha512-Tg2nMmf3BQorYCAjxbtTkYyWPVSeox5AZUFvfy4MoWK/5tuQlnA/h3LAlTjV3sEvOC5FtUNovRSj3p784l4KOA==
dependencies:
svgo "^1.3.2"
svgo@^1.0.0:
version "1.3.0"
resolved "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz"
@ -7938,6 +7973,25 @@ svgo@^1.0.0:
unquote "~1.1.1"
util.promisify "~1.0.0"
svgo@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
dependencies:
chalk "^2.4.1"
coa "^2.0.2"
css-select "^2.0.0"
css-select-base-adapter "^0.1.1"
css-tree "1.0.0-alpha.37"
csso "^4.0.2"
js-yaml "^3.13.1"
mkdirp "~0.5.1"
object.values "^1.1.0"
sax "~1.2.4"
stable "^0.1.8"
unquote "~1.1.1"
util.promisify "~1.0.0"
table@4.0.2:
version "4.0.2"
resolved "https://registry.npmjs.org/table/-/table-4.0.2.tgz"
@ -8472,6 +8526,14 @@ vue-style-loader@^4.1.0:
hash-sum "^1.0.2"
loader-utils "^1.0.2"
vue-svg-loader@^0.16.0:
version "0.16.0"
resolved "https://registry.yarnpkg.com/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz#adccbdc9aca90132bde9c9d96cd49f74efecd345"
integrity sha512-2RtFXlTCYWm8YAEO2qAOZ2SuIF2NvLutB5muc3KDYoZq5ZeCHf8ggzSan3ksbbca7CJ/Aw57ZnDF4B7W/AkGtw==
dependencies:
loader-utils "^1.2.3"
svg-to-vue "^0.7.0"
vue-template-compiler@^2.6.10:
version "2.6.10"
resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz"