tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🐛 Fixes bugs caused by the upgrade of vue-material-tabs

This commit is contained in:
Alicia Sykes 2021-07-08 21:30:37 +01:00
parent 8d0a86ee80
commit 094f8589db
1 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Configuration/ConfigContainer.vue
View File

@ -9,11 +9,11 @@
Download Config Download Config
</button> </button>
</a> </a>
<button class="config-button center" @click="goToEdit()"> <button class="config-button center" @click="() => navigateToTab(2)">
<EditIcon class="button-icon"/> <EditIcon class="button-icon"/>
Edit Config Edit Config
</button> </button>
<button class="config-button center" @click="goToCustomCss()"> <button class="config-button center" @click="() => navigateToTab(3)">
<CustomCssIcon class="button-icon"/> <CustomCssIcon class="button-icon"/>
Edit Custom CSS Edit Custom CSS
</button> </button>
@ -119,18 +119,10 @@ export default {
IconAbout, IconAbout,
}, },
methods: { methods: {
/* Seletcs the edit tab of the tab view */ /* Progamatically navigates to a given tab by index */
goToEdit() { navigateToTab(tabInxex) {
const itemToSelect = this.$refs.tabView.navItems[2]; const itemToSelect = this.$refs.tabView.navItems[tabInxex];
this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true }); this.$refs.tabView.activeTabItem(itemToSelect);
},
goToMetaEdit() {
const itemToSelect = this.$refs.tabView.navItems[3];
this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
},
goToCustomCss() {
const itemToSelect = this.$refs.tabView.navItems[3];
this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
}, },
openRebuildAppModal() { openRebuildAppModal() {
this.$modal.show(modalNames.REBUILD_APP); this.$modal.show(modalNames.REBUILD_APP);
@ -237,7 +229,7 @@ div.code-container {
} }
.yaml-action-buttons { .yaml-action-buttons {
position: absolute; position: absolute;
top: 0.5rem; top: 1.5rem;
right: 0.5rem; right: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -334,35 +326,50 @@ p.small-screen-note {
</style> </style>
<style lang="scss"> <style lang="scss">
.tabs__content {
height: -webkit-fill-available;
height: -moz-available;
height: stretch;
}
.tab-item {
background: var(--config-settings-background) !important;
}
.tab__pagination { .tab__pagination {
background: var(--config-settings-background); background: var(--config-settings-background) !important;
color: var(--config-settings-color); color: var(--config-settings-color) !important;
.tab__nav__items .tab__nav__item { .tab__nav__items .tab__nav__item {
span { span {
color: var(--config-settings-color); color: var(--config-settings-color) !important;
} }
&:hover { &:hover {
background: var(--config-settings-color) !important; background: var(--config-settings-color) !important;
span { span {
color: var(--config-settings-background); color: var(--config-settings-background) !important;
} }
} }
&.active { &.active {
span { span {
font-weight: bold; font-weight: bold !important;
color: var(--config-settings-color) !important; color: var(--config-settings-color) !important;
} }
} }
} }
.tab__nav__items .tab__nav__item.active { .tab__nav__items .tab__nav__item.active {
border-bottom: 2px solid var(--config-settings-color); border-bottom: 2px solid var(--config-settings-color) !important;
} }
hr.tab__slider { hr.tab__slider {
background: var(--config-settings-color); background: var(--config-settings-color) !important;
} }
} }
#conf-yaml .hljs-attr { #conf-yaml {
color: #9c03f5; background: var(--white);
.hljs-attr {
color: #9c03f5;
}
} }
</style> </style>