🔥 Moves theme configurator to its own component

This commit is contained in:
Alicia Sykes 2021-07-16 21:07:54 +01:00
parent 2e5f0c6bb7
commit aaacb22c15

View File

@ -14,17 +14,13 @@
v-if="selectedTheme === 'custom'" v-if="selectedTheme === 'custom'"
@click="openThemeConfigurator" @click="openThemeConfigurator"
/> />
<div <CustomThemeMaker v-if="themeConfiguratorOpen" />
v-if="themeConfiguratorOpen"
class="theme-configurator-wrapper"
>
<p>Custom Theme Configurator</p>
</div>
</div> </div>
</template> </template>
<script> <script>
import CustomThemeMaker from '@/components/Settings/CustomThemeMaker';
import { LoadExternalTheme, ApplyLocalTheme, ApplyCustomTheme } from '@/utils/ThemeHelper'; import { LoadExternalTheme, ApplyLocalTheme, ApplyCustomTheme } from '@/utils/ThemeHelper';
import Defaults, { localStorageKeys } from '@/utils/defaults'; import Defaults, { localStorageKeys } from '@/utils/defaults';
import IconPalette from '@/assets/interface-icons/config-color-palette.svg'; import IconPalette from '@/assets/interface-icons/config-color-palette.svg';
@ -37,6 +33,7 @@ export default {
userThemes: Array, userThemes: Array,
}, },
components: { components: {
CustomThemeMaker,
IconPalette, IconPalette,
}, },
watch: { watch: {
@ -178,17 +175,4 @@ svg.color-button {
} }
} }
div.theme-configurator-wrapper {
position: absolute;
right: 2rem;
top: 3rem;
width: 30%;
height: 50%;
padding: 0.5rem;
background: var(--config-settings-background);
color: var(--config-settings-color);
border-radius: var(--curve-factor);
box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.6), 1px 1px 6px var(--primary);
}
</style> </style>