tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-21 12:45:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Improves how modal styles are applied

Browse Source
This commit is contained in:
Alicia Sykes 2021-06-20 17:02:34 +01:00
parent 978064e75a
commit 561c8a7dfb
5 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Configuration/JsonEditor.vue
View File

@ -3,7 +3,7 @@
<v-jsoneditor <v-jsoneditor
v-model="jsonData" v-model="jsonData"
:options="options" :options="options"
height="580px" height="530px"
/> />
<button :class="`save-button ${!isValid ? 'err' : ''}`" @click="save()">Save Changes</button> <button :class="`save-button ${!isValid ? 'err' : ''}`" @click="save()">Save Changes</button>
<p class="errors"> <p class="errors">

9
src/components/FormElements/Button.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<button @click="click()"> <button @click="click()" :disabled="disabled">
<slot></slot> <slot></slot>
<slot name="text"></slot> <slot name="text"></slot>
<slot name="icon"></slot> <slot name="icon"></slot>
@ -13,6 +13,7 @@ export default {
props: { props: {
text: String, text: String,
click: Function, click: Function,
disabled: Boolean,
}, },
}; };
</script> </script>
@ -45,10 +46,14 @@ button {
background: var(--background); background: var(--background);
border: 1px solid var(--primary); border: 1px solid var(--primary);
border-radius: var(--curve-factor); border-radius: var(--curve-factor);
&:hover { &:hover:not(:disabled) {
color: var(--background); color: var(--background);
background: var(--primary); background: var(--primary);
border-color: var(--background); border-color: var(--background);
} }
&:disabled {
cursor: progress;
opacity: var(--dimming-factor);
}
} }
</style> </style>

7
src/components/LinkItems/IframeModal.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<modal :name="name" :resizable="true" width="80%" height="80%" @closed="modalClosed()"> <modal :name="name" :resizable="true" width="80%" height="80%" @closed="modalClosed()"
classes="dashy-modal">
<div slot="top-right" @click="hide()">Close</div> <div slot="top-right" @click="hide()">Close</div>
<a @click="hide()" class="close-button" title="Close">x</a> <a @click="hide()" class="close-button" title="Close">x</a>
<iframe v-if="url" :src="url" @keydown.esc="close" class="frame"/> <iframe v-if="url" :src="url" @keydown.esc="close" class="frame"/>
@ -17,12 +18,12 @@ export default {
url: '#', url: '#',
}), }),
methods: { methods: {
show: function show(url) { show(url) {
this.url = url; this.url = url;
this.$modal.show(this.name); this.$modal.show(this.name);
this.$emit('modalChanged', true); this.$emit('modalChanged', true);
}, },
hide: function hide() { hide() {
this.$modal.hide(this.name); this.$modal.hide(this.name);
}, },
modalClosed() { modalClosed() {

15
src/components/Settings/ConfigLauncher.vue
View File

@ -11,13 +11,13 @@
<!-- Modal containing all the configuration options --> <!-- Modal containing all the configuration options -->
<modal :name="modalNames.CONF_EDITOR" :resizable="true" width="60%" height="80%" <modal :name="modalNames.CONF_EDITOR" :resizable="true" width="60%" height="80%"
@closed="$emit('modalChanged', false)"> @closed="$emit('modalChanged', false)" classes="dashy-modal">
<ConfigContainer :config="combineConfig()" /> <ConfigContainer :config="combineConfig()" />
</modal> </modal>
<!-- Modal for cloud backup and restore options --> <!-- Modal for cloud backup and restore options -->
<modal :name="modalNames.CLOUD_BACKUP" :resizable="true" width="65%" height="60%" <modal :name="modalNames.CLOUD_BACKUP" :resizable="true" width="65%" height="60%"
@closed="$emit('modalChanged', false)"> @closed="$emit('modalChanged', false)" classes="dashy-modal">
<CloudBackupRestore :config="combineConfig()" /> <CloudBackupRestore :config="combineConfig()" />
</modal> </modal>
</div> </div>
@ -100,14 +100,3 @@ export default {
} }
} }
</style> </style>
<style lang="scss">
.vm--modal {
box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary);
min-width: 350px;
min-height: 600px;
}
.vm--overlay {
background: #00000080;
}
</style>

10
src/components/Settings/SearchBar.vue
View File

@ -105,15 +105,19 @@ export default {
} }
} }
.clear-search { .clear-search {
position: absolute; //position: absolute;
color: var(--settings-text-color); color: var(--settings-text-color);
margin: 0.55rem 0 0 -2.2rem;
padding: 0 0.4rem; padding: 0 0.4rem;
font-style: normal; font-style: normal;
font-size: 1.5rem; font-size: 1rem;
opacity: var(--dimming-factor); opacity: var(--dimming-factor);
border-radius: 50px; border-radius: 50px;
cursor: pointer; cursor: pointer;
right: 0.5rem;
top: 1rem;
border: 1px solid var(--settings-text-color);
font-size: 1rem;
margin: 0.5rem;
&:hover { &:hover {
opacity: 1; opacity: 1;
background: var(--background-darker); background: var(--background-darker);