From 66ce006f0003eb4502ec733cf4e555fce3d98663 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Dzi=C4=99giel?= Date: Tue, 30 Mar 2021 22:15:12 +0200 Subject: [PATCH] Move buttons margins to CSS and tweak them a little --- css/styles.css | 41 ++++++++++++++++++++++++++++------------- src/buttons.js | 35 ++++++++++++++++++----------------- src/controls.js | 8 +------- 3 files changed, 47 insertions(+), 37 deletions(-) diff --git a/css/styles.css b/css/styles.css index 8d669014..2e81acfd 100644 --- a/css/styles.css +++ b/css/styles.css @@ -9,7 +9,7 @@ radio { .osd list { background: none; } -.osd list row { +.osd list row image { -gtk-icon-shadow: none; } .gtk402 trough highlight { @@ -75,9 +75,28 @@ radio { font-size: 21px; font-weight: 500; } -.tvmode button { +.playercontrols { + margin-bottom: -1px; + margin-left: 2px; + margin-right: 2px; +} +.tvmode .playercontrols { + margin-left: 1px; + margin-right: 1px; +} +.playercontrols button { + margin: 3px; + margin-left: 1px; + margin-right: 1px; +} +.tvmode .playercontrols button { min-width: 32px; min-height: 32px; + margin: 4px; + margin-left: 3px; + margin-right: 3px; +} +.tvmode button image { -gtk-icon-shadow: none; } .tvmode radio { @@ -88,7 +107,7 @@ radio { min-height: 17px; } -.tvmode .playercontrols { +.tvmode .playercontrols button image { -gtk-icon-size: 24px; } .adwicons .playbackicon { @@ -97,18 +116,16 @@ radio { .adwicons.tvmode .playbackicon { -gtk-icon-size: 28px; } -.labelbutton { +.labelbuttonlabel { margin-left: -4px; margin-right: -4px; - margin-top: 1px; min-width: 8px; font-family: 'Cantarell', sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; } -.tvmode .labelbutton { - margin-top: 0px; - font-size: 23px; +.tvmode .labelbuttonlabel { + font-size: 22px; text-shadow: none; } @@ -146,11 +163,9 @@ radio { /* Position Scale */ .positionscale { - margin-top: -2px; - margin-bottom: -2px; -} -.tvmode .positionscale { - margin-top: -1px; + margin: -2px; + margin-left: -4px; + margin-right: -4px; } .positionscale trough highlight { min-height: 4px; diff --git a/src/buttons.js b/src/buttons.js index bc717a0b..09234303 100644 --- a/src/buttons.js +++ b/src/buttons.js @@ -1,5 +1,11 @@ const { GObject, Gtk } = imports.gi; +/* Negative values from CSS */ +const PopoverOffset = { + DEFAULT: -3, + TVMODE: -4, +}; + var CustomButton = GObject.registerClass( class ClapperCustomButton extends Gtk.Button { @@ -8,10 +14,8 @@ class ClapperCustomButton extends Gtk.Button opts = opts || {}; const defaults = { - margin_top: 4, - margin_bottom: 4, - margin_start: 2, - margin_end: 2, + halign: Gtk.Align.CENTER, + valign: Gtk.Align.CENTER, can_focus: false, }; Object.assign(opts, defaults); @@ -27,9 +31,6 @@ class ClapperCustomButton extends Gtk.Button if(this.isFullscreen === isFullscreen) return; - this.margin_top = (isFullscreen) ? 5 : 4; - this.margin_start = (isFullscreen) ? 3 : 2; - this.margin_end = (isFullscreen) ? 3 : 2; this.can_focus = isFullscreen; /* Redraw icon after style class change */ @@ -79,10 +80,8 @@ class ClapperPopoverButtonBase extends Gtk.ToggleButton _init() { super._init({ - margin_top: 4, - margin_bottom: 4, - margin_start: 2, - margin_end: 2, + halign: Gtk.Align.CENTER, + valign: Gtk.Align.CENTER, can_focus: false, }); @@ -97,7 +96,7 @@ class ClapperPopoverButtonBase extends Gtk.ToggleButton }); this.popover.set_child(this.popoverBox); - this.popover.set_offset(0, -this.margin_top); + this.popover.set_offset(0, PopoverOffset.DEFAULT); if(this.isFullscreen) this.popover.add_css_class('osd'); @@ -111,9 +110,6 @@ class ClapperPopoverButtonBase extends Gtk.ToggleButton if(this.isFullscreen === isFullscreen) return; - this.margin_top = (isFullscreen) ? 5 : 4; - this.margin_start = (isFullscreen) ? 3 : 2; - this.margin_end = (isFullscreen) ? 3 : 2; this.can_focus = isFullscreen; /* Redraw icon after style class change */ @@ -122,7 +118,12 @@ class ClapperPopoverButtonBase extends Gtk.ToggleButton this.isFullscreen = isFullscreen; - this.popover.set_offset(0, -this.margin_top); + /* TODO: Fullscreen non-tv mode */ + const offset = (isFullscreen) + ? PopoverOffset.TVMODE + : PopoverOffset.DEFAULT; + + this.popover.set_offset(0, offset); const cssClass = 'osd'; if(isFullscreen === this.popover.has_css_class(cssClass)) @@ -189,7 +190,7 @@ class ClapperLabelPopoverButton extends PopoverButtonBase label: text, single_line_mode: true, }); - this.customLabel.add_css_class('labelbutton'); + this.customLabel.add_css_class('labelbuttonlabel'); this.set_child(this.customLabel); } diff --git a/src/controls.js b/src/controls.js index e3bf5736..81a5d6e3 100644 --- a/src/controls.js +++ b/src/controls.js @@ -4,9 +4,6 @@ const Debug = imports.src.debug; const Misc = imports.src.misc; const Revealers = imports.src.revealers; -const CONTROLS_MARGIN = 2; -const CONTROLS_SPACING = 0; - const { debug } = Debug; const { settings } = Misc; @@ -17,9 +14,6 @@ class ClapperControls extends Gtk.Box { super._init({ orientation: Gtk.Orientation.HORIZONTAL, - margin_start: CONTROLS_MARGIN, - margin_end: CONTROLS_MARGIN, - spacing: CONTROLS_SPACING, valign: Gtk.Align.END, can_focus: false, }); @@ -439,7 +433,7 @@ class ClapperControls extends Gtk.Box const scaleHeight = this.positionScale.parent.get_height(); this.chapterPopover.set_pointing_to(new Gdk.Rectangle({ - x: 2, + x: -2, y: -(controlsHeight - scaleHeight) / 2, width: 2 * end, height: 0,