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

adjust style

master
cast1e 2024-10-16 22:29:31 +08:00
parent be030c2ae9
commit 56ccc04f2a
3 changed files with 107 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
wallitor-gui/src-tauri/src/handler/file.rs
View File

@ -1,6 +1,7 @@
use crate::reader; use crate::reader;
use std::path::Path; use std::path::Path;
use std::fs; use std::fs;
use serde::{Deserialize, Serialize};
use tauri::ipc::Response; use tauri::ipc::Response;
#[tauri::command] #[tauri::command]
@ -39,4 +40,17 @@ pub async fn del_folder(path: String) -> bool {
} }
} }
false false
}
#[derive(Serialize,Deserialize)]
struct settings{
title_bar:String,
auto_start:bool,
auto_pause:bool
}
#[tauri::command]
pub async fn get_config() -> String{
if let Ok()
} }

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

@ -2,23 +2,29 @@
<div data-tauri-drag-region class="titlebar colbox"> <div data-tauri-drag-region class="titlebar colbox">
<div class="titlebar-icon-wrapper colbox"> <div class="titlebar-icon-wrapper colbox">
<template v-if="mode == 'mac'"> <template v-if="mode == 'mac'">
<div class="titlebar-button titlebar-close button-style-mac" @click="close"></div> <div class="titlebar-button titlebar-close button-style-mac" @click="close">
<div class="titlebar-button titlebar-minimize button-style-mac" @click="minimize"></div> <svg-icon name="window-close" :size="button_size_mac"></svg-icon>
<div class="titlebar-button titlebar-maximize button-style-mac" @click="toggleMaximize"></div> </div>
</template> <div class="titlebar-button titlebar-minimize button-style-mac" @click="minimize">
<svg-icon name="window-minimize" :size="button_size_mac"></svg-icon>
</div>
<div class="titlebar-button titlebar-maximize button-style-mac" @click="toggleMaximize">
<svg-icon name="window-maximize" :size="button_size_mac"></svg-icon>
</div>
</template>
<img src="@/assets/vw.png" class="titlebar-icon"> <img src="@/assets/vw.png" class="titlebar-icon">
<div class="titlebar-icon-title"> <div class="titlebar-icon-title">
Wallitor Wallitor
</div> </div>
</div> </div>
<div class="titlebar-button-wrapper colbox"> <div class="titlebar-button-wrapper colbox">
<div class="titlebar-button" id="titlebar-settings" @click="openSettings"> <div class="titlebar-button" id="titlebar-settings" @click="openSettings">
<div class="titlebar-button-rect"> <div class="titlebar-button-rect">
<svg-icon name="setting" :size="button_size_default"></svg-icon> <svg-icon name="setting" :size="button_size_default"></svg-icon>
</div>
</div> </div>
<template v-if="mode == 'win'"> </div>
<template v-if="mode == 'win'">
<div class="titlebar-button titlebar-minimize button-style-win" @click="minimize"> <div class="titlebar-button titlebar-minimize button-style-win" @click="minimize">
<div class="titlebar-button-rect"> <div class="titlebar-button-rect">
<svg-icon name="window-minimize" :size="button_size_default"></svg-icon> <svg-icon name="window-minimize" :size="button_size_default"></svg-icon>
@ -27,7 +33,7 @@
<div class="titlebar-button titlebar-maximize button-style-win" @click="toggleMaximize"> <div class="titlebar-button titlebar-maximize button-style-win" @click="toggleMaximize">
<template v-if="maximized"> <template v-if="maximized">
<div class="titlebar-button-rect"> <div class="titlebar-button-rect">
<svg-icon name="window-maximized button-style-win" :size="button_size_alter"></svg-icon> <svg-icon name="window-maximized" :size="button_size_alter"></svg-icon>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -42,7 +48,7 @@
</div> </div>
</div> </div>
</template> </template>
</div> </div>
</div> </div>
</template> </template>
@ -60,6 +66,8 @@ type Mode = "win" | "mac";
const maximized = ref(false); const maximized = ref(false);
const button_size_default = ref("18px"); const button_size_default = ref("18px");
const button_size_alter = ref("15px") const button_size_alter = ref("15px")
const button_size_mac = ref("11px")
const props = defineProps({ const props = defineProps({
mode: { mode: {
type: String as PropType<Mode>, type: String as PropType<Mode>,
@ -145,7 +153,7 @@ function openSettings() {
justify-content: center; justify-content: center;
} }
#titlebar-settings{ #titlebar-settings {
cursor: pointer; cursor: pointer;
} }
@ -168,21 +176,44 @@ function openSettings() {
} }
.button-style-mac.titlebar-button{ .button-style-mac.titlebar-button {
width: 14px; width: 13px;
height: 14px; height: 13px;
border-radius: 100%; border-radius: 100%;
margin-left: 6px; margin-left: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #000000b4
} }
.button-style-mac.titlebar-minimize { .button-style-mac.titlebar-minimize {
background-color: red; background: #FFBB39;
border: 1px solid #CFA64E;
} }
.button-style-mac.titlebar-maximize { .button-style-mac.titlebar-maximize {
background-color: green; background: #606060;
margin-right: 6px; border: 1px solid #656565;
margin-right: 8px;
} }
.button-style-mac:hover.titlebar-maximize {
background: #00CD4E;
border: 1px solid #0EA642;
}
.button-style-mac.titlebar-close { .button-style-mac.titlebar-close {
background-color: yellow; background: #FF5D5B;
border: 1px solid #CF544D;
}
.button-style-mac svg {
opacity: 0;
transition: .2s;
}
.button-style-mac:hover svg {
opacity: 1;
} }
</style> </style>

67
wallitor-gui/src/views/SettingsView.vue
View File

@ -1,30 +1,36 @@
<template> <template>
<div class="settings-wrapper"> <div class="settings-wrapper">
<div class="settings-back" @click="back_home"> <div class="settings-back colbox" @click="back_home">
<SvgIcon name="direction-left"></SvgIcon> <SvgIcon name="direction-left"></SvgIcon>
返回 <div class="settings-back-text">返回</div>
</div> </div>
<table class="settings-table"> <table class="settings-table">
<tbody class="setting-table-body"> <tbody class="setting-table-body">
<tr> <tr>
<td><div class="settings-label"> <td>
<div class="settings-label-title">标题栏样式</div> <div class="settings-label">
<div class="settings-label-subtitle">选择选题栏关闭按钮样式</div> <div class="settings-label-title">标题栏样式</div>
</div></td> <div class="settings-label-subtitle">选择选题栏关闭按钮样式</div>
</div>
</td>
<td><el-switch></el-switch></td> <td><el-switch></el-switch></td>
</tr> </tr>
<tr> <tr>
<td><div class="settings-label"> <td>
<div class="settings-label-title">开机自启</div> <div class="settings-label">
<div class="settings-label-subtitle">开机自启</div> <div class="settings-label-title">开机自启</div>
</div></td> <div class="settings-label-subtitle">开机自启</div>
</div>
</td>
<td><el-switch></el-switch></td> <td><el-switch></el-switch></td>
</tr> </tr>
<tr> <tr>
<td><div class="settings-label"> <td>
<div class="settings-label-title">最大化自动暂停</div> <div class="settings-label">
<div class="settings-label-subtitle">最大化自动暂停</div> <div class="settings-label-title">最大化自动暂停</div>
</div></td> <div class="settings-label-subtitle">最大化自动暂停</div>
</div>
</td>
<td><el-switch></el-switch></td> <td><el-switch></el-switch></td>
</tr> </tr>
</tbody> </tbody>
@ -40,9 +46,9 @@ import { onMounted } from 'vue';
import SvgIcon from '@/components/SvgIcon.vue'; import SvgIcon from '@/components/SvgIcon.vue';
const router = useRouter(); const router = useRouter();
onMounted(()=>{ onMounted(() => {
const table_body = document.querySelector(".setting-table-body") as HTMLElement; const table_body = document.querySelector(".setting-table-body") as HTMLElement;
entry("left",table_body,50); entry("left", table_body, 50);
}) })
function back_home() { function back_home() {
@ -51,14 +57,15 @@ function back_home() {
</script> </script>
<style> <style>
.settings-wrapper{ .settings-wrapper {
padding-left:30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
width: calc(100% - 60px); width: calc(100% - 60px);
} }
.settings-back{
.settings-back {
color: var(--text-color); color: var(--text-color);
padding:8px; padding: 8px;
margin: 5px; margin: 5px;
width: fit-content; width: fit-content;
border-radius: 10px; border-radius: 10px;
@ -66,33 +73,41 @@ function back_home() {
cursor: pointer; cursor: pointer;
} }
.settings-back:hover{ .settings-back:hover {
background-color: var(--bg-color-alter); background-color: var(--bg-color-alter);
} }
.settings-back:active{ .settings-back:active {
transform: scale(0.95); transform: scale(0.95);
} }
.settings-table{ .settings-table {
width: calc(100% - 80px); width: calc(100% - 80px);
margin-left: 40px; margin-left: 40px;
margin-right: 40px; margin-right: 40px;
} }
.settings-table td,th{
.settings-table td,
th {
padding: 5px; padding: 5px;
color: var(--text-color); color: var(--text-color);
} }
.settings-label-title{ .settings-label-title {
margin-bottom: 3px; margin-bottom: 3px;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
.settings-label-subtitle{ .settings-label-subtitle {
font-size: 13px; font-size: 13px;
font-weight: 300; font-weight: 300;
margin-bottom: 10px; margin-bottom: 10px;
} }
.settings-back-text {
transform: translateY(-3px);
margin-left: 4px;
font-weight: 600;
}
</style> </style>