sup39/firefish
1
0
Fork 0
Code Issues Pull requests Activity

style: rearrange buttons in page editor

Browse source
This commit is contained in:
sup39 2024-01-19 04:01:55 +09:00
parent 881fd5f5d8
commit 6039e15cd5
Signed by: sup39
GPG key ID: 111C00916C1641E5
1 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/client/src/pages/page-editor/page-editor.container.vue
View file

@ -1,12 +1,14 @@
<template> <template>
<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }"> <div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
<header> <header>
<div class="title"><slot name="header"></slot></div>
<div class="buttons"> <div class="buttons">
<slot name="func"></slot>
<button v-if="removable" class="_button" @click="remove()"> <button v-if="removable" class="_button" @click="remove()">
<i :class="icon('ph-trash')"></i> <i :class="icon('ph-trash')"></i>
</button> </button>
</div>
<div class="title"><slot name="header"></slot></div>
<div class="buttons">
<slot name="func"></slot>
<div v-if="draggable" class="drag-handle _button"> <div v-if="draggable" class="drag-handle _button">
<i :class="icon('ph-list')"></i> <i :class="icon('ph-list')"></i>
</div> </div>
@ -115,14 +117,16 @@ export default defineComponent({
} }
> header { > header {
display: flex;
padding-top: 0.5em;
> .title { > .title {
z-index: 1; z-index: 1;
margin: 0; margin: 0;
padding: 0 16px;
line-height: 42px;
font-size: 0.9em; font-size: 0.9em;
font-weight: bold; font-weight: bold;
box-shadow: 0 1px rgba(#000, 0.07); box-shadow: 0 1px rgba(#000, 0.07);
flex: 1;
> i { > i {
margin-inline-end: 6px; margin-inline-end: 6px;
@ -134,16 +138,13 @@ export default defineComponent({
} }
> .buttons { > .buttons {
position: absolute;
z-index: 2; z-index: 2;
top: 0;
inset-inline-end: 0;
> ._button { > ._button,
> :slotted(._button) {
padding: 0; padding: 0;
width: 42px; width: 42px;
font-size: 0.9em; font-size: 0.9em;
line-height: 42px;
text-align: center; text-align: center;
} }