[Gtk-3.20] Refactor toolbar code. Fixes #486
Now that out button code has changed, it is necessary to refactor & restructure toolbar code to keep things synchronized.pull/546/head
Csaba Jakosa
Khurshid Alam
parent
ff98d448fc
commit
e2658ff44d
|
|
@ -28,18 +28,6 @@
|
|||
|
||||
.linked > button { @include linked_button($bg_color); }
|
||||
|
||||
combobox button {
|
||||
padding: $spacing - 1px;
|
||||
|
||||
&.text-button {
|
||||
padding: $spacing;
|
||||
}
|
||||
|
||||
&.image-button {
|
||||
padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
separator, separator:disabled {
|
||||
color: shade($bg_color, ($contrast + .1));
|
||||
border-color: currentColor;
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@
|
|||
.top {
|
||||
border: 1px solid $wm_border_focused;
|
||||
border-bottom: 0;
|
||||
border-radius: 2px 2px 0 0;
|
||||
padding: 1px ($spacing * 2) 0;
|
||||
border-radius: $roundness $roundness 0 0;
|
||||
padding: 1px ($spacing + 3px) 0 ($spacing + 3px);
|
||||
background-color: $titlebar_bg_color;
|
||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
||||
text-shadow: none;
|
||||
|
|
@ -40,9 +40,9 @@
|
|||
}
|
||||
|
||||
.left, .right, .bottom {
|
||||
background-color: $wm_border_focused;
|
||||
background-color: $titlebar_bg_color;
|
||||
|
||||
&:backdrop { background-color: $wm_border_unfocused; }
|
||||
&:backdrop { background-color: mix(shade($titlebar_bg_color, .7), $titlebar_fg_color, .21); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
@include linear-gradient($bg);
|
||||
@include border($bg);
|
||||
|
||||
padding: $spacing * 2;
|
||||
color: $fg;
|
||||
|
||||
&:disabled {
|
||||
|
|
@ -33,86 +32,94 @@
|
|||
.linked > button { @include linked_button($bg); }
|
||||
|
||||
combobox, button {
|
||||
padding: $spacing - 1px;
|
||||
padding: $spacing;
|
||||
|
||||
&.text-button { padding: $spacing; }
|
||||
|
||||
&.image-button { padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing; }
|
||||
&.image-button { padding: $spacing; }
|
||||
}
|
||||
|
||||
// toolbar separators
|
||||
&.horizontal separator { margin: 0 ($spacing + 2px) 1px ($spacing + 2px); }
|
||||
separator {
|
||||
&, &:disabled {
|
||||
color: shade($bg, ($contrast - .2));
|
||||
border-color: currentColor;
|
||||
|
||||
&.vertical separator { margin: ($spacing + 2px) 1px ($spacing + 2px) 0; }
|
||||
|
||||
separator, separator:disabled {
|
||||
color: shade($bg, ($contrast - .2));
|
||||
border-color: currentColor;
|
||||
|
||||
-GtkWidget-window-dragging: true;
|
||||
}
|
||||
|
||||
.menubar, menubar { -GtkToolbar-button-relief: normal; }
|
||||
}
|
||||
|
||||
@include exports("toolbar") {
|
||||
toolbar {
|
||||
@include toolbar($toolbar_bg_color, $toolbar_fg_color);
|
||||
|
||||
border-style: none;
|
||||
|
||||
&.inline-toolbar {
|
||||
background-image: none;
|
||||
border-width: 0 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: $borders_color;
|
||||
background-color: mix($borders_color, $bg_color, .7);
|
||||
|
||||
&:backdrop {
|
||||
border-color: $backdrop_borders_color;
|
||||
background-color: $backdrop_dark_fill;
|
||||
transition: 200ms ease-out;
|
||||
}
|
||||
|
||||
button { @include button($toolbar_bg_color, $toolbar_fg_color); }
|
||||
|
||||
toolbutton,
|
||||
toolbutton:backdrop {
|
||||
> button.flat { @extend %linked_middle; }
|
||||
|
||||
&:first-child > button.flat { @extend %linked_button:first-child; }
|
||||
|
||||
&:last-child > button.flat { @extend %linked_button:last-child; }
|
||||
|
||||
&:only-child > button.flat { @extend %linked_button:only-child; }
|
||||
}
|
||||
-GtkWidget-window-dragging: true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
headerbar {
|
||||
@include toolbar($titlebar_bg_color, $titlebar_fg_color);
|
||||
@mixin inline-toolbar($bg, $fg) {
|
||||
background-image: none;
|
||||
border-width: 0 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: $borders_color;
|
||||
background-color: mix($borders_color, $bg_color, .7);
|
||||
|
||||
&:backdrop {
|
||||
border-color: $backdrop_borders_color;
|
||||
background-color: $backdrop_dark_fill;
|
||||
transition: 200ms ease-out;
|
||||
}
|
||||
|
||||
button { @include button($toolbar_bg_color, $toolbar_fg_color); }
|
||||
|
||||
toolbutton,
|
||||
toolbutton:backdrop {
|
||||
> button.flat { @extend %linked_middle; }
|
||||
|
||||
&:first-child > button.flat { @extend %linked_button:first-child; }
|
||||
|
||||
&:last-child > button.flat { @extend %linked_button:last-child; }
|
||||
|
||||
&:only-child > button.flat { @extend %linked_button:only-child; }
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("toolbar_extends") {
|
||||
%toolbar {
|
||||
padding: $spacing - 1px;
|
||||
border-style: none;
|
||||
|
||||
// toolbar separators
|
||||
&.horizontal separator { margin: 0 ($spacing + 2px) 1px; }
|
||||
|
||||
&.vertical separator { margin: ($spacing + 2px) 1px ($spacing + 2px) 0; }
|
||||
}
|
||||
|
||||
%headerbar {
|
||||
border-width: 0 0 1px;
|
||||
border-style: solid;
|
||||
|
||||
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
|
||||
entry,
|
||||
spinbutton,
|
||||
separator,
|
||||
switch,
|
||||
button { // Size height
|
||||
margin-top: $spacing + 3px;
|
||||
margin-bottom: $spacing + 3px;
|
||||
}
|
||||
|
||||
switch { // Size height
|
||||
margin-top: $spacing + 1px;
|
||||
margin-bottom: $spacing + 1px;
|
||||
}
|
||||
|
||||
window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
|
||||
window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: $roundness; } }
|
||||
|
||||
window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: $roundness; } }
|
||||
}
|
||||
|
||||
.background:not(.tiled):not(.maximized) .titlebar {
|
||||
&:backdrop, & {
|
||||
border-top-left-radius: $roundness;
|
||||
border-top-right-radius: $roundness;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
%titlebar { // Default headerbar and titlebar code.
|
||||
@include toolbar($titlebar_bg_color, $titlebar_fg_color);
|
||||
@include linear-gradient($titlebar_bg_color);
|
||||
|
||||
border-radius: $roundness $roundness 0 0;
|
||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
||||
padding: 0 $spacing;
|
||||
min-height: 42px;
|
||||
|
||||
&:backdrop {
|
||||
@include linear-gradient($titlebar_bg_color);
|
||||
|
|
@ -121,24 +128,32 @@
|
|||
text-shadow: none;
|
||||
}
|
||||
|
||||
&.default-decoration {
|
||||
border: 0;
|
||||
&.default-decoration { // Default titlebar (old metacity)
|
||||
min-height: 24px;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
|
||||
button.titlebutton {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tiled &, .maximized & { border-radius: 0; }
|
||||
.tiled &,
|
||||
.maximized & { &:backdrop, & { border-radius: 0; } } // squared corners when the window is maximized or tiled
|
||||
|
||||
.title { font-weight: bold; }
|
||||
|
||||
separator.titlebutton { margin-left: $spacing * 2; }
|
||||
separator.titlebutton { margin-left: $spacing; }
|
||||
|
||||
button.titlebutton + separator.titlebutton {
|
||||
margin-left: 0;
|
||||
margin-right: $spacing * 2;
|
||||
margin-right: $spacing;
|
||||
}
|
||||
|
||||
button.titlebutton {
|
||||
padding: $spacing;
|
||||
border: 0;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
|
|
@ -167,3 +182,41 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("toolbar") {
|
||||
toolbar {
|
||||
@include toolbar($toolbar_bg_color, $toolbar_fg_color);
|
||||
|
||||
@extend %toolbar;
|
||||
|
||||
&.inline-toolbar { @include inline-toolbar($toolbar_bg_color, $toolbar_fg_color); }
|
||||
}
|
||||
|
||||
headerbar {
|
||||
@extend %titlebar;
|
||||
@extend %headerbar;
|
||||
}
|
||||
|
||||
.titlebar:not(headerbar) {
|
||||
window.csd > & {
|
||||
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-style: none;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> separator { background-color: shade($titlebar_bg_color, .88); } // $borders_color
|
||||
|
||||
@extend %titlebar;
|
||||
}
|
||||
|
||||
.background:not(.tiled):not(.maximized) .titlebar {
|
||||
&:backdrop, & {
|
||||
border-top-left-radius: $roundness;
|
||||
border-top-right-radius: $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue