jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve panel tabs to fix pixel mislaignments and support MMB closing

This commit is contained in:
Keavon Chambers 2021-07-09 16:49:54 -07:00
parent 13e73b92bd
commit bc8fe2d844
1 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/web/src/components/workspace/Panel.vue
View File

@ -2,7 +2,14 @@
<div class="panel"> <div class="panel">
<div class="tab-bar" :class="{ 'min-widths': tabMinWidths }"> <div class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
<div class="tab-group"> <div class="tab-group">
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel" @click="handleTabClick(tabIndex)"> <div
class="tab"
:class="{ active: tabIndex === tabActiveIndex }"
v-for="(tabLabel, tabIndex) in tabLabels"
:key="tabLabel"
@click.middle="closeTab(tabIndex)"
@click="handleTabClick(tabIndex)"
>
<span>{{ tabLabel }}</span> <span>{{ tabLabel }}</span>
<IconButton :icon="'CloseX'" :size="16" v-if="tabCloseButtons" @click.stop="closeTab(tabIndex)" /> <IconButton :icon="'CloseX'" :size="16" v-if="tabCloseButtons" @click.stop="closeTab(tabIndex)" />
</div> </div>
@ -91,23 +98,23 @@
margin-left: 8px; margin-left: 8px;
} }
&:not(.active) + .tab:not(.active) { & + .tab {
margin-left: 1px; margin-left: 1px;
&::before {
content: "";
position: absolute;
left: -1px;
width: 1px;
height: 16px;
background: var(--color-4-dimgray);
}
} }
&:last-of-type:not(.active) { &:not(.active) + .tab:not(.active)::before {
content: "";
position: absolute;
left: -1px;
width: 1px;
height: 16px;
background: var(--color-4-dimgray);
}
&:last-of-type {
margin-right: 1px; margin-right: 1px;
&::after { &:not(.active)::after {
content: ""; content: "";
position: absolute; position: absolute;
right: -1px; right: -1px;