From 5676260809d8cc3e24c67a862dddf59ddde85b93 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 24 Jul 2021 18:03:09 -0500
Subject: [PATCH] Fixed visual issues with minimize button
---
src/components/system/LayerTab.vue | 26 ++++++++++++++++----------
1 file changed, 16 insertions(+), 10 deletions(-)
diff --git a/src/components/system/LayerTab.vue b/src/components/system/LayerTab.vue
index d5c16ae..91021a6 100644
--- a/src/components/system/LayerTab.vue
+++ b/src/components/system/LayerTab.vue
@@ -5,7 +5,7 @@
<button class="layer-tab minimized" v-if="minimized" @click="toggleMinimized"><div>{{ name }}</div></button>
<div class="layer-tab" :style="style" :class="{ hasSubtabs: subtabs }" v-else>
<branches>
- <sticky v-if="subtabs" class="subtabs-container" :class="{ floating, firstTab: firstTab || !allowGoBack }">
+ <sticky v-if="subtabs" class="subtabs-container" :class="{ floating, firstTab: firstTab || !allowGoBack, minimizable }">
<div class="subtabs">
<tab-button v-for="(subtab, id) in subtabs" @selectTab="selectSubtab(id)" :key="id"
:activeTab="id === activeSubtab" :options="subtab" :text="id" />
@@ -253,6 +253,10 @@ export default {
border-top: 0;
}
+.subtabs-container.minimizable:not(.floating):first-child {
+ padding-right: 50px;
+}
+
.subtabs-container:not(.floating):first-child .subtabs {
margin-top: -50px;
}
@@ -263,22 +267,24 @@ export default {
.minimize {
position: absolute;
- top: 0;
- right: 0;
- background-color: transparent;
- border: 1px solid transparent;
+ top: 6px;
+ right: 16px;
+ z-index: 7;
+ line-height: 30px;
+ width: 30px;
+ border: none;
+ background: var(--background);
+ box-shadow: var(--background) 0 2px 3px 5px;
+ border-radius: 50%;
color: var(--color);
font-size: 40px;
cursor: pointer;
- line-height: 40px;
- z-index: 7;
- width: 60px;
- background: var(--background);
+ padding: 0;
}
.minimized + .minimize {
transform: rotate(-90deg);
- top: 3px;
+ top: 10px;
}
.goBack {