194 lines
3.7 KiB
Vue
194 lines
3.7 KiB
Vue
<template>
|
|
<div class="panel">
|
|
<div class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
|
|
<div class="tab-group">
|
|
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
|
|
<span>{{tabLabel}}</span>
|
|
<button v-if="tabCloseButtons">
|
|
<CloseX width="16" height="16" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-options-ellipsis">
|
|
<VerticalEllipsis />
|
|
</div>
|
|
</div>
|
|
<div class="panel-content">
|
|
<component :is="panelType" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.panel {
|
|
background: #111;
|
|
border-radius: 8px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
.tab-bar {
|
|
height: 28px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&.min-widths .tab-group .tab {
|
|
min-width: 120px;
|
|
max-width: 360px;
|
|
}
|
|
|
|
.tab-group {
|
|
flex: 1 1 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
|
|
.tab {
|
|
height: 100%;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
&.active {
|
|
background: #333;
|
|
border-radius: 8px 8px 0 0;
|
|
position: relative;
|
|
|
|
&::before, &::after {
|
|
content: "";
|
|
width: 16px;
|
|
height: 8px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
box-shadow: #333;
|
|
}
|
|
|
|
&::before {
|
|
left: -16px;
|
|
border-bottom-right-radius: 8px;
|
|
box-shadow: 8px 0 0 0 #333;
|
|
}
|
|
|
|
&::after {
|
|
right: -16px;
|
|
border-bottom-left-radius: 8px;
|
|
box-shadow: -8px 0 0 0 #333;
|
|
}
|
|
}
|
|
|
|
span {
|
|
flex: 1 1 100%;
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
// Height and line-height required because https://stackoverflow.com/a/21611191/775283
|
|
height: 100%;
|
|
line-height: 28px;
|
|
}
|
|
|
|
button {
|
|
flex: 0 0 auto;
|
|
outline: none;
|
|
border: none;
|
|
padding: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: none;
|
|
color: #ddd;
|
|
font-weight: bold;
|
|
font-size: 10px;
|
|
border-radius: 2px;
|
|
margin-left: 8px;
|
|
fill: #ddd;
|
|
|
|
&:hover {
|
|
background: #555;
|
|
color: white;
|
|
fill: white;
|
|
}
|
|
}
|
|
|
|
&:not(.active) + .tab:not(.active) {
|
|
margin-left: 1px;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -1px;
|
|
width: 1px;
|
|
height: 16px;
|
|
background: #444;
|
|
}
|
|
}
|
|
|
|
&:last-of-type:not(.active) {
|
|
margin-right: 1px;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -1px;
|
|
width: 1px;
|
|
height: 16px;
|
|
background: #444;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-options-ellipsis {
|
|
width: 16px;
|
|
height: 24px;
|
|
margin: 2px 4px;
|
|
|
|
svg {
|
|
width: 16px;
|
|
height: 24px;
|
|
border-radius: 2px;
|
|
fill: #ddd;
|
|
}
|
|
|
|
&:hover svg {
|
|
background: #555;
|
|
fill: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-content {
|
|
background: #333;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import Document from "../panels/DocumentPanel.vue";
|
|
import Properties from "../panels/PropertiesPanel.vue";
|
|
import Layers from "../panels/LayersPanel.vue";
|
|
import Minimap from "../panels/MinimapPanel.vue";
|
|
import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
|
|
import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
Document,
|
|
Properties,
|
|
Layers,
|
|
Minimap,
|
|
CloseX,
|
|
VerticalEllipsis,
|
|
},
|
|
props: {
|
|
tabMinWidths: { type: Boolean, default: false },
|
|
tabCloseButtons: { type: Boolean, default: false },
|
|
tabLabels: { type: Array, required: true },
|
|
tabActiveIndex: { type: Number, required: true },
|
|
panelType: { type: String, required: true },
|
|
},
|
|
});
|
|
</script>
|