Commit ac9e04e8 authored by Benjamin Fischer's avatar Benjamin Fischer
Browse files

Tabber: fixed display of too long labels, removed title & cleanup

parent 924b67df
......@@ -146,14 +146,15 @@ body{overflow:hidden}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar{height:30px;background-color:#ddd;border-bottom:1px solid #b8b8b8;padding:0 5px}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar.vispa-ui-recieving{background:#5cb85c}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>*{height:30px;margin-left:-1px;font-size:1em;color:#444;background-color:#ddd!important;cursor:pointer;border-width:1px;border-top-width:0;border-style:solid;border-color:#b8b8b8;border-color-bottom:#b8b8b8!important}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:300px;padding:0 calc(2px) 0 3px}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:300px;padding:0 2px 0 3px}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab.shown{border-bottom-color:transparent;background-color:#eee!important}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab.focused{background-color:#fff!important}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab:hover{color:#000}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab.ui-sortable-helper{border-width:1px;border-color:#b8b8b8}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab[style^=border-color]{padding:0;border-width:3px calc(4px) 3px 3px}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab[style^=border-color]{padding:0;border-width:3px 4px 3px 3px}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab>.vispa-comp-icon{text-align:center}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab>.vispa-comp-label{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;text-overflow:ellipsis}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab>.vispa-comp-label{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab>.vispa-comp-label>div{position:absolute;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;top:0}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-tab>.vispa-comp-close{width:24px;text-align:center}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-spawner>button{border:none;background:inherit;height:100%;width:33px;padding:0}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-spawner .ws-menu{background-color:#e5e5e5;margin-top:-5px;padding:5px 0}
......
......@@ -661,7 +661,7 @@ body {
flex-direction: row;
align-items: center;
width: @tab-max-width;
padding: 0px calc(@tab-border-width - 1px) 0px @tab-border-width;
padding: 0px (@tab-border-width - 1px) 0px @tab-border-width;
&.shown {
border-bottom-color: transparent;
background-color: @tab-color-shown !important;
......@@ -678,7 +678,7 @@ body {
}
&[style^="border-color"] {
padding: 0px;
border-width: @tab-border-width calc(@tab-border-width + 1px) @tab-border-width @tab-border-width;
border-width: @tab-border-width (@tab-border-width + 1px) @tab-border-width @tab-border-width;
> .vispa-comp-icon {
// width: calc(@tab-bar-height - @tab-border-width);
}
......@@ -693,7 +693,15 @@ body {
// left: @tab-bar-button-width;
// right: @tab-cross-width;
flex-grow: 1;
text-overflow: ellipsis;
position: relative;
> div {
position: absolute;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
top: 0;
}
}
> .vispa-comp-badge {
// position: absolute;
......
......@@ -24,17 +24,12 @@
</menu-button>
<span
class="vispa-comp-label vispa-ui-handle"
data-toggle="tooltip"
data-placement="bottom"
data-delay="500"
:title="labelFull"
@click.prevent="focus"
@vmousedown="hideTooltip"
@mouseup="mayClose($event)"
v-el:label
>
{{labelShort}}
</span>
>&nbsp;<div>{{labelShort}}</div></span>
<span v-show="badge" class="vispa-comp-badge">
<span class="badge">{{badge}}</span>
</span>
......
......@@ -33,19 +33,6 @@ define([
var MainViewTab = Vue.extend({
template: tTab.trim(),
watch: {
labelShort: function(newLabel, oldLabel) {
if (newLabel === oldLabel) return;
var $label = $(this.$els.label);
var wasShown = $label.hasClass("tooltip");
if (wasShown)
$label.tooltip("hide");
$label.tooltip("fixTitle");
if (wasShown)
$label.tooltip("show");
},
},
computed: {
instance: {
cached: false,
......@@ -105,9 +92,6 @@ define([
close: function(event) {
this.instance.close();
},
hideTooltip: function() {
$(this).tooltip("hide");
},
mayClose: function(event) {
if (event.which == 2) {
this.close();
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment