github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-16 05:35:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

Modules store and bar (#112)

Browse Source 
* Register views globally

* Use global private view in debug route

* Register login route

* Add barebones login form

* Add auth check on routing

* Add tests and extract checkAuth function

* Fix tests of router

* Move stores into subfolders

* Register modules from modules store

* Register name / icon in modules store

* Update module configs

* Render v-button in module sidebar

* Render correct paths in module sidebar

* Add activated style to button

* Use correct color for button in module bar

* Use correct icons for system modules

* Add tests for modules store

* Remove readme in favor of inline comments
This commit is contained in:
Rijk van Zanten
2020-02-19 15:21:54 -05:00
committed by GitHub
parent a16569f45d
commit 031bae4ac8
31 changed files with 270 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/v-button/v-button.readme.md
View File

@@ -73,12 +73,14 @@ The loading slot is rendered _on top_ of the content that was there before. Make
| `click` | User clicks on button | `MouseEvent` |
## CSS Variables
| Variable | Default |
|-------------------------------------|------------------------------------------------|
| `--v-button-width` | `auto` |
| `--v-button-height` | `44px` |
| `--v-button-color` | `var(--button-primary-foreground-color)` |
| `--v-button-background-color` | `var(--button-primary-background-color)` |
| `--v-button-color-hover` | `var(--button-primary-foreground-color-hover)` |
| `--v-button-background-color-hover` | `var(--button-primary-background-color-hover)` |
| `--v-button-font-size` | `16px` |
| Variable | Default |
|-----------------------------------------|----------------------------------------------------|
| `--v-button-width` | `auto` |
| `--v-button-height` | `44px` |
| `--v-button-color` | `var(--button-primary-foreground-color)` |
| `--v-button-color-hover` | `var(--button-primary-foreground-color-hover)` |
| `--v-button-color-activated` | `var(--button-primary-foreground-color-activated)` |
| `--v-button-background-color` | `var(--button-primary-background-color)` |
| `--v-button-background-color-hover` | `var(--button-primary-background-color-hover)` |
| `--v-button-background-color-activated` | `var(--button-primary-background-color-activated)` |
| `--v-button-font-size` | `16px` |

13
src/components/v-button/v-button.vue
View File

@@ -1,6 +1,7 @@
<template>
<component
:is="component"
active-class="activated"
class="v-button"
:class="[sizeClass, { block, rounded, icon, outlined, loading }]"
:type="type"
@@ -80,8 +81,10 @@ export default createComponent({
--v-button-height: 44px;
--v-button-color: var(--button-primary-foreground-color);
--v-button-color-hover: var(--button-primary-foreground-color-hover);
--v-button-color-activated: var(--button-primary-foreground-color-activated);
--v-button-background-color: var(--button-primary-background-color);
--v-button-background-color-hover: var(--button-primary-background-color-hover);
--v-button-background-color-activated: var(--button-primary-background-color-activated);
--v-button-font-size: 16px;
position: relative;
@@ -122,7 +125,7 @@ export default createComponent({
}
}
&:not(.loading):not(:disabled):hover {
&:not(.loading):not(:disabled):not(.activated):hover {
color: var(--v-button-color-hover);
background-color: var(--v-button-background-color-hover);
border: var(--button-border-width) solid var(--v-button-background-color-hover);
@@ -165,7 +168,7 @@ export default createComponent({
}
&.x-large {
--v-button-height: 58px;
--v-button-height: 64px;
--v-button-font-size: 18px;
min-width: 120px;
@@ -192,7 +195,6 @@ export default createComponent({
.content {
position: relative;
top: -1px;
&.invisible {
opacity: 0;
@@ -210,5 +212,10 @@ export default createComponent({
--v-progress-circular-background-color: transparent;
}
}
&.activated {
--v-button-color: var(--v-button-color-activated) !important;
--v-button-background-color: var(--v-button-background-color-activated) !important;
}
}
</style>