cast1e
/
wallitor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Dialog

master
cast1e 2024-09-26 22:02:51 +08:00
parent e5882e8532
commit 9ce56708cd
7 changed files with 98 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
wallitor-gui/src/assets/svgs/add.svg 100644
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 155 B

1
wallitor-gui/src/assets/svgs/keyboard-arrow-down.svg 100644
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 165 B

83
wallitor-gui/src/components/AddItem.vue 100644
View File

@ -0,0 +1,83 @@
<template>
<div ref="bg" class="item-add-bg" :class="{
'item-add-show': visible,
}">
<div class="item-add-content">
<header class="colbox item-add-header">
<div class="colbox item-add-header-icon item-add-header-item" @click="visible = !visible">
<template v-if="visible">
<SvgIcon name="keyboard-arrow-down" size="20px"></SvgIcon>
</template>
<template v-else>
<SvgIcon name="add" size="20px"></SvgIcon>
</template>
</div>
<div class="item-add-header-item item-add-header-title">
<div>添加</div>
</div>
</header>
</div>
</div>
</template>
<script setup lang="ts">
import { defineExpose, defineModel, ref } from 'vue';
import SvgIcon from './SvgIcon.vue';
const visible = defineModel<boolean>();
const bg = ref<HTMLDivElement | null>(null);
defineExpose({ open })
</script>
<style>
.item-add-bg {
border: solid var(--bd-color) 1px;
backdrop-filter: blur(30px) saturate(180%);
box-shadow: var(--shadow-edge-glow), var(--shadow);
background-color: var(--bg-color-alpha-darker);
border-radius: 8px;
left: 50%;
top: calc(100% - 60px);
transform: translate(-50%, 0);
position: absolute;
width: 85%;
height: calc(100% - 60px);
transition: .8s cubic-bezier(0.9, 0, 0, 1.1);
}
.item-add-show {
top: 60px;
}
.item-add-content {
padding: 10px;
height: calc(100% - 20px);
overflow: auto;
}
.item-add-header-icon {
width: 40px;
height: 40px;
border-radius: 5px;
background-color: #3b93ff;
transition: .3s;
align-items: center;
justify-content: center;
}
.item-add-header-icon:hover {
background-color: #1e5daa;
cursor: pointer;
}
.item-add-header-item {
display: flex;
align-items: center;
color: var(--text-color);
}
.item-add-header-title {
font-size: 20px;
font-weight: 500;
margin-left: 10px;
}
</style>

1
wallitor-gui/src/components/ApplyBar.vue
View File

@ -115,7 +115,6 @@ function open(conFig: Config) {
.apply-bar-bg {
border: solid var(--bd-color) 1px;
border: solid 1px var(--bd-color);
backdrop-filter: blur(30px) saturate(180%);
box-shadow: var(--shadow-edge-glow), var(--shadow);
background-color: var(--bg-color-alpha-darker);

8
wallitor-gui/src/components/SvgIcon.vue
View File

@ -1,5 +1,5 @@
<template>
<svg :style="{ width, height}">
<svg :style="{ width: size, height: size }">
<use :href="prefix + name" :fill="color"></use>
</svg>
</template>
@ -18,13 +18,9 @@ defineProps({
type: String,
default: "#ffffff"
},
width: {
size: {
type: String,
default: "16px"
},
height: {
type: String,
default: "16px"
}
});
</script>

12
wallitor-gui/src/components/TitleBar.vue
View File

@ -28,24 +28,24 @@
<div class="titlebar-button-wrapper colbox">
<div class="titlebar-button" id="titlebar-minimize" @click="minimize">
<div class="titlebar-button-rect">
<svg-icon name="window-minimize" :width="button_size_default" :height="button_size_default"></svg-icon>
<svg-icon name="window-minimize" :size="button_size_default"></svg-icon>
</div>
</div>
<div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
<template v-if="maximized">
<div class="titlebar-button-rect">
<svg-icon name="window-maximized" :width="button_size_alter" :height="button_size_alter"></svg-icon>
<svg-icon name="window-maximized" :size="button_size_alter"></svg-icon>
</div>
</template>
<template v-else>
<div class="titlebar-button-rect">
<svg-icon name="window-maximize" :width="button_size_alter" :height="button_size_alter"></svg-icon>
<svg-icon name="window-maximize" :size="button_size_alter"></svg-icon>
</div>
</template>
</div>
<div class="titlebar-button" id="titlebar-close" @click="close">
<div class="titlebar-button-rect">
<svg-icon name="window-close" :width="button_size_default" :height="button_size_default"></svg-icon>
<svg-icon name="window-close" :size="button_size_default"></svg-icon>
</div>
</div>
</div>
@ -106,12 +106,12 @@ function close() {
.titlebar-icon-title {
font-weight: 500;
font-size: 20px;
font-size: 23px;
margin-left: 10px;
}
.titlebar-icon {
height: calc(var(--titlebar-height) - 10px);
height: var(--titlebar-height);
}
.titlebar-button-wrapper {

3
wallitor-gui/src/views/HomeView.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import ItemCard from '@/components/ItemCard.vue';
import ApplyBar from '@/components/ApplyBar.vue';
import AddItem from '@/components/AddItem.vue';
import { ref, onMounted } from 'vue';
import { entry } from '@/ts/entry';
interface Config {
@ -16,6 +17,7 @@ const items = ref<Config[]>([{
}])
const apply_bar_visible = ref(false);
const applyBar = ref<InstanceType<typeof ApplyBar> | null>(null);
const item_add_visible = ref(false);
onMounted(() => {
const main = document.querySelector(".home-main") as HTMLElement;
@ -34,6 +36,7 @@ function openCard(config: Config) {
<ItemCard v-for="(item, index) in items" :key="index" :config="item" @click="openCard(item)"></ItemCard>
</main>
<ApplyBar v-model="apply_bar_visible" ref="applyBar"></ApplyBar>
<AddItem v-model="item_add_visible"></AddItem>
</template>
<style>