PandaDEV/Qopy
1
0
Fork 0
mirror of https://github.com/0PandaDEV/Qopy.git synced 2025-04-21 13:14:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: update layout structure in settings.vue and settings.scss for improved responsiveness and clarity; replace .bg with <main> and integrate BottomBar component

Browse source
This commit is contained in:
PandaDEV 2025-03-15 00:33:21 +01:00
parent ff6cdac1a3
commit 60d17442fc
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C
2 changed files with 20 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

17
assets/css/settings.scss
View file

@ -6,15 +6,15 @@ $text: #e5dfd5;
$text2: #ada9a1; $text2: #ada9a1;
$mutedtext: #78756f; $mutedtext: #78756f;
.bg { main {
width: 750px; width: 100vw;
height: 474px; height: 100vh;
background-color: $primary; background-color: $primary;
border: 1px solid $divider; border: 1px solid $divider;
display: flex;
flex-direction: column;
border-radius: 12px; border-radius: 12px;
z-index: -1; justify-content: space-between;
position: fixed;
outline: none;
} }
.back { .back {
@ -42,6 +42,7 @@ p {
.settings-container { .settings-container {
width: 100%; width: 100%;
height: 100%;
margin-top: 26px; margin-top: 26px;
position: relative; position: relative;
font-size: 12px; font-size: 12px;
@ -59,7 +60,7 @@ p {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
p { p {
font-family: SFRoundedSemiBold; font-family: SFRoundedSemiBold;
color: $text2; color: $text2;
@ -144,7 +145,7 @@ p {
.top-bar { .top-bar {
width: 100%; width: 100%;
height: 56px; min-height: 56px;
border-bottom: 1px solid $divider; border-bottom: 1px solid $divider;
} }

33
pages/settings.vue
View file

@ -1,30 +1,11 @@
<template> <template>
<div class="bg"> <main>
<div class="top-bar"> <div class="top-bar">
<NuxtLink to="/" class="back"> <NuxtLink to="/" class="back">
<img src="../public/back_arrow.svg" /> <img src="../public/back_arrow.svg" />
<p>Back</p> <p>Back</p>
</NuxtLink> </NuxtLink>
</div> </div>
<div class="bottom-bar">
<div class="left">
<img alt="" class="logo" src="../public/logo.png" width="18px" />
<p>Qopy</p>
</div>
<div class="right">
<div
@click="saveKeybind"
class="actions"
:class="{ disabled: keybind.length === 0 }">
<p>Save</p>
<div>
<IconsCmd v-if="os === 'macos'" />
<IconsCtrl v-if="os === 'linux' || os === 'windows'" />
<IconsEnter />
</div>
</div>
</div>
</div>
<div class="settings-container"> <div class="settings-container">
<div class="settings"> <div class="settings">
<div class="names"> <div class="names">
@ -82,17 +63,25 @@
</div> </div>
</div> </div>
</div> </div>
</div> <BottomBar
:primary-action="{
text: 'Save',
icon: IconsEnter,
onClick: saveKeybind,
showModifier: true,
}" />
</main>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { invoke } from "@tauri-apps/api/core";
import { onMounted, onUnmounted, reactive, ref } from "vue"; import { onMounted, onUnmounted, reactive, ref } from "vue";
import { platform } from "@tauri-apps/plugin-os"; import { platform } from "@tauri-apps/plugin-os";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { KeyValues, KeyLabels } from "../types/keys"; import { KeyValues, KeyLabels } from "../types/keys";
import { disable, enable } from "@tauri-apps/plugin-autostart"; import { disable, enable } from "@tauri-apps/plugin-autostart";
import { Key, keyboard } from "wrdu-keyboard"; import { Key, keyboard } from "wrdu-keyboard";
import BottomBar from "../components/BottomBar.vue";
import IconsEnter from "~/components/Icons/Enter.vue";
const activeModifiers = reactive<Set<KeyValues>>(new Set()); const activeModifiers = reactive<Set<KeyValues>>(new Set());
const isKeybindInputFocused = ref(false); const isKeybindInputFocused = ref(false);