Commit 05d43aef authored by Benjamin Fischer's avatar Benjamin Fischer
Browse files

MainView: custom styles for other than the current WS

fixes #2426
parent a0afc5ad
......@@ -133,6 +133,10 @@ body{overflow:hidden}
.vispa-ui-dropzone[data-sector=left]>.vispa-ui-highlight{position:absolute;top:0;right:50%;bottom:0;left:0}
.vispa-ui-dropzone[data-sector=right]>.vispa-ui-highlight{position:absolute;top:0;right:0;bottom:0;left:50%}
.vispa-caret-icon>i>i{position:absolute;height:50%;width:50%;font-size:.7em;line-height:.7em;top:75%;left:85%}
.vispa-body[data-ws-other-style=fade] .vispa-ui-tab.vispa-other-ws{background-color:#010101!important;color:#999}
.vispa-body[data-ws-other-style=collapse] .vispa-ui-tab.vispa-other-ws{width:33px!important}
.vispa-body[data-ws-other-style=collapse] .vispa-ui-tab.vispa-other-ws .vispa-comp-badge,.vispa-body[data-ws-other-style=collapse] .vispa-ui-tab.vispa-other-ws .vispa-comp-close,.vispa-body[data-ws-other-style=collapse] .vispa-ui-tab.vispa-other-ws .vispa-comp-label{display:none}
.vispa-body[data-ws-other-style=hide] .vispa-ui-tab.vispa-other-ws{display:none!important}
.vispa-body .vispa-ui-tabber{position:absolute;top:0;right:0;bottom:0;left:0}
.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}
......@@ -146,7 +150,7 @@ body{overflow:hidden}
.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-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:30px;padding:0}
.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}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-spawner .ws-menu>a:focus,.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-spawner .ws-menu>a:hover{background-color:inherit}
.vispa-body .vispa-ui-tabber>.vispa-ui-tabbar>.vispa-ui-spawner .ws-menu>.dropdown-menu{top:5px}
......@@ -171,9 +175,9 @@ body{overflow:hidden}
.vispa-fastmenu-entry a.fastmenu-del,.vispa-fastmenu-entry.deletable .btn-group,.vispa-fastmenu-entry.deletable a.fastmenu-orig,.vispa-fastmenu-entry.keepable a.fastmenu-del{display:none}
.vispa-centerview-content-loader{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-color:rgba(0,0,0,.4);box-shadow:inset 0 0 20px rgba(0,0,0,.4)}
.vispa-centerview-tabs-wrapper{position:absolute;top:0;right:0;left:0;height:30px;background-color:#ddd;box-shadow:inset 0 -1px 0 #b8b8b8}
.vispa-centerview-tabs-container{position:absolute;top:0;right:5px;bottom:0;left:40px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}
.vispa-centerview-tabs-menu-button{position:absolute;top:-30px;left:5px;height:30px;width:30px;z-index:5;background-color:#fff;box-shadow:inset 1px 0 0 #b8b8b8,inset -1px 0 0 #b8b8b8;cursor:pointer}
.vispa-centerview-tabs-menu-button>a{position:absolute;top:5px;left:5px;font-size:20px;line-height:100%;color:inherit}
.vispa-centerview-tabs-container{position:absolute;top:0;right:5px;bottom:0;left:43px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}
.vispa-centerview-tabs-menu-button{position:absolute;top:-30px;left:5px;height:30px;width:33px;z-index:5;background-color:#fff;box-shadow:inset 1px 0 0 #b8b8b8,inset -1px 0 0 #b8b8b8;cursor:pointer}
.vispa-centerview-tabs-menu-button>a{position:absolute;top:5px;left:6.5px;font-size:20px;line-height:100%;color:inherit}
.vispa-centerview-tab{position:relative;height:29px;min-width:100px;max-width:300px;width:300px;margin-left:-1px;font-weight:700;font-size:12px;color:#444;background-color:#ddd;cursor:pointer;box-shadow:inset 2px 0 0 #b8b8b8,inset -1px 0 0 #b8b8b8;transition:background-color 50ms;-webkit-transition:background-color 50ms;-moz-transition:background-color 50ms;-o-transition:background-color 50ms}
.vispa-centerview-tab:first-child{margin-left:0}
.vispa-centerview-tab:hover{color:#000}
......
......@@ -11,7 +11,7 @@
@tab-bar-height: 30px;
@menu-bar-height: 39px;
@border-offset: 5px;
@tab-bar-button-width: 30px;
@tab-bar-button-width: 33px;
@tab-bar-button-size: 20px;
@tab-min-width: 100px;
@tab-max-width: 300px;
......@@ -607,6 +607,22 @@ body {
left: 85%;
}
.vispa-body {
&[data-ws-other-style=fade] .vispa-ui-tab.vispa-other-ws {
background-color: #010101 !important;
color: #999;
}
&[data-ws-other-style=collapse] .vispa-ui-tab.vispa-other-ws {
.vispa-comp-label, .vispa-comp-badge, .vispa-comp-close {
display: none;
}
width: @tab-bar-button-width !important;
}
&[data-ws-other-style=hide] .vispa-ui-tab.vispa-other-ws {
display: none !important;
}
}
.vispa-body .vispa-ui-tabber {
.vispa-absolute;
......
<div class="vispa-ui-tab" :style="style">
<div :class="{
'vispa-ui-tab': true,
'vispa-other-ws': !isCurrentWs,
}" :style="style">
<menu-button
:items="menuItems"
class="vispa-comp-icon"
......
......@@ -76,6 +76,13 @@ define([
return "";
}
},
isCurrentWs: function() {
var ws = this.instance.workspace;
if (!ws) return true; // no own workspace
var currentWsId = vispa.wsManager._vueData.current;
if (!currentWsId) return true;
return ws.id === currentWsId;
},
},
methods: {
focus: function(event) {
......
......@@ -303,15 +303,29 @@ define([
// start session managment
this.sessionManager._jsondata._pullProcess(null, vispa.args.session);
// bind mainViewManager events
this.mainViewManager.on("viewmanager.*" ,
this.sessionManager.save.bind(this.sessionManager, 20));
this.mainViewManager.on("viewmanager.focus",
this.sessionManager.save.bind(this.sessionManager, 1));
this.mainViewManager.on("viewmanager.blur" ,
this.sessionManager.save.bind(this.sessionManager, 1));
this.mainViewManager.on("viewmanager.focus", function(){
if (this.focusInstance && this.focusInstance.workspace) {
vispa.wsManager.current = this.focusInstance.workspace;
}
vispa.sessionManager.save(1);
}.bind(this.mainViewManager));
// configure syling for other ws
var applyOtherStyle = function(style) {
vispa.mainViewManager.$node.attr("data-ws-other-style", style);
};
applyOtherStyle(this.wsManager.prefs.get("otherStyle"));
this.wsManager.prefs.watch("otherStyle", applyOtherStyle);
// start session manager
this.sessionManager.run();
// apply the current fragment
window.addEventListener("popstate", this.applyFragment.bind(this));
}.bind(this));
......
......@@ -469,7 +469,7 @@ define([
" focused tab.",
type: "string",
value: "none",
options: ["none","fade","collapse"],
options: ["none","fade","collapse","hide"],
global: true,
flat: true,
},
......
Supports Markdown
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