diff --git a/docs/presentation.md b/docs/presentation.md index 61eb1a4d..4a1e59a5 100644 --- a/docs/presentation.md +++ b/docs/presentation.md @@ -10,11 +10,16 @@ - [**`bootstrapping/`**](./../src/presentation/bootstrapping/): Registers Vue global objects including components and plugins. - [**`components/`**](./../src/presentation/components/): Contains all Vue components and their helper classes. - [**`Shared/`**](./../src/presentation/components/Shared): Contains Vue components and component helpers that are shared across other components. - - [**`styles/`**](./../src/presentation/styles/): Contains shared styles used throughout different components. + - [**`assets/`**](./../src/presentation/assets/styles/): Contains assets that will be processed by webpack. + - [**`fonts/`**](./../src/presentation/assets/fonts/): Contains fonts + - [**`styles/`**](./../src/presentation/assets/styles/): Contains shared styles used throughout different components. + - [**`components/`**](./../src/presentation/assets/styles/components): Contains styles that are reusable and tightly coupled a Vue/HTML component. + - [**`vendors-extensions/`**](./../src/presentation/assets/styles/third-party-extensions): Contains styles that override third-party components used. + - [**`main.scss`**](./../src/presentation/assets/styles/main.scss): Primary Sass file, passes along all other styles, should be the only file used from other components. - [**`main.ts`**](./../src/presentation/main.ts): Application entry point that mounts and starts Vue application. - - [`electron/`](./../src/presentation/electron/): Electron configuration for the desktop application. + - [**`electron/`**](./../src/presentation/electron/): Electron configuration for the desktop application. - [**`main.ts`**](./../src/presentation/main.ts): Main process of Electron, started as first thing when app starts. -- [**`/public/`**](./../public/): Contains static assets that will simply be copied and not go through webpack. +- [**`/public/`**](./../public/): Contains static assets that will directly be copied and not go through webpack. - [**`/vue.config.js`**](./../vue.config.js): Global Vue CLI configurations loaded by `@vue/cli-service` - [**`/postcss.config.js`**](./../postcss.config.js): PostCSS configurations that are used by Vue CLI internally - [**`/babel.config.js`**](./../babel.config.js): Babel configurations for polyfills used by `@vue/cli-plugin-babel` @@ -50,3 +55,18 @@
Show dialog
``` + +## Sass naming convention + +- Use lowercase for variables/functions/mixins e.g. + - Variable: `$variable: value;` + - Function: `@function function() {}` + - Mixin: `@mixin mixin() {}` +- Use - for a phrase/compound word e.g. + - Variable: `$some-variable: value;` + - Function: `@function some-function() {}` + - Mixin: `@mixin some-mixin() {}` +- Grouping and name variables from generic to specific e.g. + - ✅ `$border-blue`, `$border-blue-light`, `$border-blue-lightest`, `$border-red` + - ❌ `$blue-border`, `$light-blue-border`, `$lightest-blue-border`, `$red-border` + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 240ddbb9..832a9a43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,8 @@ "requires": true, "packages": { "": { - "version": "0.11.0", + "name": "privacy.sexy", + "version": "0.11.1", "hasInstallScript": true, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.36", @@ -27936,6 +27937,7 @@ "integrity": "sha512-P13AJv5FDt2XnpZ92K0VMxBS7Pe+gnibxtXMsa8rXLBkEE1NkmtaG5pyXh3fulkmF2/21efOcuh6yFP7k0KuZg==", "dev": true, "requires": { + "@babel/core": "^7.11.0", "@babel/helper-compilation-targets": "^7.9.6", "@babel/helper-module-imports": "^7.8.3", "@babel/plugin-proposal-class-properties": "^7.8.3", @@ -27948,6 +27950,7 @@ "@vue/babel-plugin-jsx": "^1.0.3", "@vue/babel-preset-jsx": "^1.2.4", "babel-plugin-dynamic-import-node": "^2.3.3", + "core-js": "^3.6.5", "core-js-compat": "^3.6.5", "semver": "^6.1.0" } diff --git a/src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.eot b/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot similarity index 100% rename from src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.eot rename to src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot diff --git a/src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.svg b/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.svg similarity index 100% rename from src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.svg rename to src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.svg diff --git a/src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf b/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf similarity index 100% rename from src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf rename to src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf diff --git a/src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff b/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff similarity index 100% rename from src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff rename to src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff diff --git a/src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2 b/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2 similarity index 100% rename from src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2 rename to src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2 diff --git a/src/presentation/styles/fonts/yesteryear-v8-latin-regular.eot b/src/presentation/assets/fonts/yesteryear-v8-latin-regular.eot similarity index 100% rename from src/presentation/styles/fonts/yesteryear-v8-latin-regular.eot rename to src/presentation/assets/fonts/yesteryear-v8-latin-regular.eot diff --git a/src/presentation/styles/fonts/yesteryear-v8-latin-regular.svg b/src/presentation/assets/fonts/yesteryear-v8-latin-regular.svg similarity index 100% rename from src/presentation/styles/fonts/yesteryear-v8-latin-regular.svg rename to src/presentation/assets/fonts/yesteryear-v8-latin-regular.svg diff --git a/src/presentation/styles/fonts/yesteryear-v8-latin-regular.ttf b/src/presentation/assets/fonts/yesteryear-v8-latin-regular.ttf similarity index 100% rename from src/presentation/styles/fonts/yesteryear-v8-latin-regular.ttf rename to src/presentation/assets/fonts/yesteryear-v8-latin-regular.ttf diff --git a/src/presentation/styles/fonts/yesteryear-v8-latin-regular.woff b/src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff similarity index 100% rename from src/presentation/styles/fonts/yesteryear-v8-latin-regular.woff rename to src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff diff --git a/src/presentation/styles/fonts/yesteryear-v8-latin-regular.woff2 b/src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff2 similarity index 100% rename from src/presentation/styles/fonts/yesteryear-v8-latin-regular.woff2 rename to src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff2 diff --git a/src/presentation/styles/colors.scss b/src/presentation/assets/styles/_colors.scss similarity index 100% rename from src/presentation/styles/colors.scss rename to src/presentation/assets/styles/_colors.scss diff --git a/src/presentation/styles/fonts.scss b/src/presentation/assets/styles/_fonts.scss similarity index 54% rename from src/presentation/styles/fonts.scss rename to src/presentation/assets/styles/_fonts.scss index 49e6421e..265f9561 100644 --- a/src/presentation/styles/fonts.scss +++ b/src/presentation/assets/styles/_fonts.scss @@ -5,13 +5,13 @@ font-family: 'Slabo 27px'; font-style: normal; font-weight: 400; - src: url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ + src: url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ src: local('Slabo 27px'), local('Slabo27px-Regular'), - url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ - url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.svg#Slabo27px') format('svg'); /* Legacy iOS */ + url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ + url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.svg#Slabo27px') format('svg'); /* Legacy iOS */ } /* yesteryear-regular - latin */ @@ -19,15 +19,15 @@ font-family: 'Yesteryear'; font-style: normal; font-weight: 400; - src: url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.eot'); /* IE9 Compat Modes */ + src: url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Yesteryear'), local('Yesteryear-Regular'), - url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.svg#Yesteryear') format('svg'); /* Legacy iOS */ + url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.svg#Yesteryear') format('svg'); /* Legacy iOS */ } -$normal-font: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; -$artistic-font: 'Yesteryear', cursive; -$main-font: 'Slabo 27px'; \ No newline at end of file +$font-normal : 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; +$font-artistic : 'Yesteryear', cursive; +$font-main : 'Slabo 27px'; diff --git a/src/presentation/assets/styles/_globals.scss b/src/presentation/assets/styles/_globals.scss new file mode 100644 index 00000000..72cfbcfb --- /dev/null +++ b/src/presentation/assets/styles/_globals.scss @@ -0,0 +1,25 @@ +/* + Defines global styles that applies to globally defined tags by default (body, main, article, div etc.) +*/ + +@use "@/presentation/assets/styles/colors" as *; +@use "@/presentation/assets/styles/fonts" as *; + + +* { + box-sizing: border-box; +} + +a { + color:inherit; + text-decoration: underline; + cursor: pointer; + &:hover { + color: $color-primary; + } +} + +body { + background: $color-background; + font-family: $font-main; +} diff --git a/src/presentation/assets/styles/_media.scss b/src/presentation/assets/styles/_media.scss new file mode 100644 index 00000000..1a48faf0 --- /dev/null +++ b/src/presentation/assets/styles/_media.scss @@ -0,0 +1,5 @@ +$media-screen-big-width : 992px; +$media-screen-medium-width : 768px; +$media-screen-small-width : 380px; + +$media-vertical-view-breakpoint : 992px; diff --git a/src/presentation/styles/components/card.scss b/src/presentation/assets/styles/components/_card.scss similarity index 100% rename from src/presentation/styles/components/card.scss rename to src/presentation/assets/styles/components/_card.scss diff --git a/src/presentation/assets/styles/main.scss b/src/presentation/assets/styles/main.scss new file mode 100644 index 00000000..0b3490a8 --- /dev/null +++ b/src/presentation/assets/styles/main.scss @@ -0,0 +1,11 @@ +/* This class is not supposed to more than forwarding other styles */ + +@forward "./fonts"; +@forward "./media"; +@forward "./colors"; +@forward "./globals"; + +@forward "./components/card"; + +@forward "./third-party-extensions/tooltip.scss"; +@forward "./third-party-extensions/tree.scss"; diff --git a/src/presentation/styles/tooltip.scss b/src/presentation/assets/styles/third-party-extensions/_tooltip.scss similarity index 95% rename from src/presentation/styles/tooltip.scss rename to src/presentation/assets/styles/third-party-extensions/_tooltip.scss index 81f15d94..49fc1b60 100644 --- a/src/presentation/styles/tooltip.scss +++ b/src/presentation/assets/styles/third-party-extensions/_tooltip.scss @@ -1,5 +1,5 @@ // Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303 -@import "@/presentation/styles/colors.scss"; +@use "@/presentation/assets/styles/colors" as *; .tooltip { display: block !important; diff --git a/src/presentation/assets/styles/third-party-extensions/_tree.scss b/src/presentation/assets/styles/third-party-extensions/_tree.scss new file mode 100644 index 00000000..1e3b785b --- /dev/null +++ b/src/presentation/assets/styles/third-party-extensions/_tree.scss @@ -0,0 +1,58 @@ +// Overrides base styling for LiquorTree +@use "@/presentation/assets/styles/colors" as *; + +$color-tree-bg : $color-primary-darker; +$color-node-arrow : $color-on-primary; +$color-node-fg : $color-on-primary; +$color-node-hover-bg : $color-primary-dark; +$color-node-keyboard-bg : $color-surface; +$color-node-keyboard-fg : $color-on-surface; +$color-node-checkbox-bg-checked : $color-secondary; +$color-node-checkbox-bg-unchecked : $color-primary-darkest; +$color-node-checkbox-border-checked : $color-secondary; +$color-node-checkbox-border-unchecked : $color-on-primary; +$color-node-checkbox-tick-checked : $color-on-secondary; + +.tree { + background: $color-tree-bg; + &-node { + white-space: normal !important; + > .tree-content { + > .tree-anchor > span { + color: $color-node-fg; + text-transform: uppercase; + font-size: 1.5em; + } + &:hover { + background: $color-node-hover-bg !important; + } + } + &.selected { // When using keyboard navigation it highlights current item and its child items + background: $color-node-keyboard-bg; + .tree-text { + color: $color-node-keyboard-fg !important; // $block + } + } + } + &-checkbox { + border-color: $color-node-checkbox-border-unchecked !important; + &.checked { + background: $color-node-checkbox-bg-checked !important; + border-color: $color-node-checkbox-border-checked !important; + &:after { + border-color: $color-node-checkbox-tick-checked !important; + } + } + &.indeterminate { + border-color: $color-node-checkbox-border-unchecked !important; + } + background: $color-node-checkbox-bg-unchecked !important; + } + &-arrow { + &.has-child { + &.rtl:after, &:after { + border-color: $color-node-arrow !important; + } + } + } +} diff --git a/src/presentation/components/App.vue b/src/presentation/components/App.vue index 387788fb..df2920a5 100644 --- a/src/presentation/components/App.vue +++ b/src/presentation/components/App.vue @@ -33,27 +33,7 @@ export default class App extends Vue { diff --git a/src/presentation/components/Code/CodeButtons/Code.vue b/src/presentation/components/Code/CodeButtons/Code.vue index af9136ad..ca6c8666 100644 --- a/src/presentation/components/Code/CodeButtons/Code.vue +++ b/src/presentation/components/Code/CodeButtons/Code.vue @@ -25,13 +25,12 @@ export default class Code extends Vue { \ No newline at end of file diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue index b9a60dda..406537b9 100644 --- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue +++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue @@ -95,9 +95,7 @@ export default class CardListItem extends StatefulVue { \ No newline at end of file diff --git a/src/presentation/components/Scripts/View/TheScriptsView.vue b/src/presentation/components/Scripts/View/TheScriptsView.vue index 8579e013..f045a135 100644 --- a/src/presentation/components/Scripts/View/TheScriptsView.vue +++ b/src/presentation/components/Scripts/View/TheScriptsView.vue @@ -95,15 +95,13 @@ export default class TheScriptsView extends StatefulVue {