Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
3pia
VISPA
VISPA web
Commits
05d43aef
Commit
05d43aef
authored
Aug 29, 2016
by
Benjamin Fischer
Browse files
MainView: custom styles for other than the current WS
fixes #2426
parent
a0afc5ad
Changes
6
Hide whitespace changes
Inline
Side-by-side
vispa/static/css/index.css
View file @
05d43aef
...
...
@@ -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
:
3
0
px
;
padding
:
0
}
.vispa-body
.vispa-ui-tabber
>
.vispa-ui-tabbar
>
.vispa-ui-spawner
>
button
{
border
:
none
;
background
:
inherit
;
height
:
100%
;
width
:
3
3
px
;
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
:
4
0
px
;
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
:
3
0
px
;
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
:
4
3
px
;
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
:
3
3
px
;
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
}
...
...
vispa/static/css/index.less
View file @
05d43aef
...
...
@@ -11,7 +11,7 @@
@tab-bar-height: 30px;
@menu-bar-height: 39px;
@border-offset: 5px;
@tab-bar-button-width: 3
0
px;
@tab-bar-button-width: 3
3
px;
@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;
...
...
vispa/static/html/index/mainview/tab.html
View file @
05d43aef
<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"
...
...
vispa/static/js/views/main.js
View file @
05d43aef
...
...
@@ -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
)
{
...
...
vispa/static/js/vispa.js
View file @
05d43aef
...
...
@@ -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
));
...
...
vispa/static/js/workspace.js
View file @
05d43aef
...
...
@@ -469,7 +469,7 @@ define([
"
focused tab.
"
,
type
:
"
string
"
,
value
:
"
none
"
,
options
:
[
"
none
"
,
"
fade
"
,
"
collapse
"
],
options
:
[
"
none
"
,
"
fade
"
,
"
collapse
"
,
"
hide
"
],
global
:
true
,
flat
:
true
,
},
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment