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)

Browse Source 
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #227
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
This commit is contained in:
Adam Bem
2023-06-16 14:38:53 +02:00
parent 3ec139c8bd
commit 3c79bddde3
21 changed files with 497 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref , onMounted } from 'vue'
import { ref , onMounted} from 'vue'
import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
import logoDark from '@assets/logo_biale.svg';
@@ -7,49 +7,47 @@ import logoWhite from '@assets/logo_czarne.svg';
const logoR11 = ref( logoDark );
function changeLogoForTheme(){
logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
}
function isDarkModeSet(){
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
onMounted( () => {
changeLogoForTheme();
} )
function changeLogoForTheme(){
if (isDarkModeSet()) {
logoR11.value = logoDark;
} else{
logoR11.value = logoWhite;
}
}
})
</script>
<template>
<aside class="relative top-0 left-0 z-40 w-1/12 h-screen transition-transform -translate-x-full sm:translate-x-0" >
<div class="h-full px-3 py-4 overflow-y-auto bg-gray-100 dark:bg-gray-800">
<aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen" >
<div class="h-full px-3 pt-2 pb-4 overflow-y-auto">
<a href="https://release11.com/">
<img :src="logoR11" class="w-72 h-16 p-2 dark:bg-gray-800"/>
<img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
</a>
<ul class="space-y-2 font-medium">
<div class="flex flex-col font-medium items-center">
<sidebar-menu-element-component category-name="XML">
<li><SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" /></li>
<li><SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" /></li>
<li><SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" /></li>
<li><SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" /></li>
<SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
<SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
<SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
<SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" />
</sidebar-menu-element-component>
<sidebar-menu-element-component category-name="Formatter">
<li><SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" /></li>
<li><SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" /></li>
<li><SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" /></li>
<SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" />
<SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" />
<SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
</sidebar-menu-element-component>
<li><SidebarToolLinkComponent class="text-left" path-to="/rest/mock" element-content="REST Mock" /></li>
</ul>
<sidebar-menu-element-component category-name="REST">
<SidebarToolLinkComponent path-to="/rest/mock" element-content="Mock" />
</sidebar-menu-element-component>
</div>
</div>
</aside>
</template>

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

@@ -1,13 +1,9 @@
<script setup lang="ts">
import { ref } from 'vue'
const hiddenOrActive = ref('hidden');
const isActive = ref(true);
function switchHiddenElement(){
if(hiddenOrActive.value == 'hidden'){
hiddenOrActive.value = "active";
} else{
hiddenOrActive.value = "hidden"
}
isActive.value = !isActive.value;
}
const props = defineProps(
@@ -21,12 +17,12 @@ const props = defineProps(
<template>
<li>
<button @click="switchHiddenElement()" type="button" class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
<span class="flex-1 ml-3 text-left whitespace-nowrap">{{props.categoryName}}</span>
<div class="w-full mb-4 p-2 rounded-xl shadow-md bg-gradient-to-r from-blue-400 to-blue-200 dark:from-sky-700 dark:to-sky-900">
<button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100 dark:hover:bg-slate-600">
<span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
</button>
<ul class='py-2 space-y-2 bg-gray-50 dark:bg-gray-700 rounded-xl' :class="hiddenOrActive">
<div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
<slot></slot>
</ul>
</li>
</div>
</div>
</template>

16
Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
View File

@@ -2,13 +2,21 @@
import { RouterLink } from 'vue-router';
const props = defineProps(
{
elementContent: {required: false},
pathTo: {type: String, required:true}
elementContent: { required: false },
pathTo: { type: String, required: true }
}
)
</script>
<template>
<RouterLink class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" :to="props.pathTo">{{ props.elementContent }}</RouterLink>
</template>
<RouterLink
class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-slate-600"
:to="props.pathTo">{{ props.elementContent }}</RouterLink>
</template>
<style>
.router-link-active {
font-weight: 500;
}
</style>