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 std::path::Path;
use std::fs;
use serde::{Deserialize, Serialize};
use tauri::ipc::Response;
#[tauri::command]
@ -39,4 +40,17 @@ pub async fn del_folder(path: String) -> bool {
}
}
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 class="titlebar-icon-wrapper colbox">
<template v-if="mode == 'mac'">
<div class="titlebar-button titlebar-close button-style-mac" @click="close"></div>
<div class="titlebar-button titlebar-minimize button-style-mac" @click="minimize"></div>
<div class="titlebar-button titlebar-maximize button-style-mac" @click="toggleMaximize"></div>
</template>
<div class="titlebar-button titlebar-close button-style-mac" @click="close">
<svg-icon name="window-close" :size="button_size_mac"></svg-icon>
</div>
<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">
<div class="titlebar-icon-title">
Wallitor
</div>
</div>
<div class="titlebar-button-wrapper colbox">
<div class="titlebar-button" id="titlebar-settings" @click="openSettings">
<div class="titlebar-button-rect">
<svg-icon name="setting" :size="button_size_default"></svg-icon>
</div>
<div class="titlebar-button-wrapper colbox">
<div class="titlebar-button" id="titlebar-settings" @click="openSettings">
<div class="titlebar-button-rect">
<svg-icon name="setting" :size="button_size_default"></svg-icon>
</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-rect">
<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">
<template v-if="maximized">
<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>
</template>
<template v-else>
@ -42,7 +48,7 @@
</div>
</div>
</template>
</div>
</div>
</div>
</template>
@ -60,6 +66,8 @@ type Mode = "win" | "mac";
const maximized = ref(false);
const button_size_default = ref("18px");
const button_size_alter = ref("15px")
const button_size_mac = ref("11px")
const props = defineProps({
mode: {
type: String as PropType<Mode>,
@ -145,7 +153,7 @@ function openSettings() {
justify-content: center;
}
#titlebar-settings{
#titlebar-settings {
cursor: pointer;
}
@ -168,21 +176,44 @@ function openSettings() {
}
.button-style-mac.titlebar-button{
width: 14px;
height: 14px;
.button-style-mac.titlebar-button {
width: 13px;
height: 13px;
border-radius: 100%;
margin-left: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #000000b4
}
.button-style-mac.titlebar-minimize {
background-color: red;
background: #FFBB39;
border: 1px solid #CFA64E;
}
.button-style-mac.titlebar-maximize {
background-color: green;
margin-right: 6px;
background: #606060;
border: 1px solid #656565;
margin-right: 8px;
}
.button-style-mac:hover.titlebar-maximize {
background: #00CD4E;
border: 1px solid #0EA642;
}
.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>

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

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