R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Reimplemented XML Tools and added styling #227

Merged
bema merged 18 commits from bema/func/styling into master 2023-06-16 14:38:55 +02:00
Conversation 1 Commits 18 Files Changed 21 +9 -9
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 517afaabff - Show all commits

13
Frontend/src/components/sidebar/SidebarComponent.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref , onMounted } from 'vue' import { ref , onMounted, watch } from 'vue'
import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue'; import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue'; import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
import logoDark from '@assets/logo_biale.svg'; import logoDark from '@assets/logo_biale.svg';
@@ -7,6 +7,11 @@ import logoWhite from '@assets/logo_czarne.svg';
const logoR11 = ref( logoDark ); const logoR11 = ref( logoDark );
function changeLogoForTheme(){
logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
}
function isDarkModeSet(){ function isDarkModeSet(){
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
} }
@@ -15,12 +20,6 @@ onMounted( () => {
changeLogoForTheme(); changeLogoForTheme();
} ) } )
function changeLogoForTheme(){
logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
}
</script> </script>
<template> <template>

5
Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
View File

@@ -17,11 +17,12 @@ const props = defineProps(
<template> <template>
<div class="mb-4 w-full">
<button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-t-lg bg-white dark:bg-gray-700' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-gray-600"> <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-t-lg bg-white dark:bg-gray-700' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-gray-600">
<span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span> <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
</button> </button>
<div class="flex flex-col w-full mb-4 py-2 bg-white dark:bg-gray-700 rounded-b-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']"> <div class="flex flex-col w-full py-2 bg-white dark:bg-gray-700 rounded-b-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
<slot></slot> <slot></slot>
</div> </div>
</div>
</template> </template>