diff --git a/clapper_src/app.js b/clapper_src/app.js index 7ac6a64a..86d27304 100644 --- a/clapper_src/app.js +++ b/clapper_src/app.js @@ -84,7 +84,7 @@ var App = GObject.registerClass({ { super.vfunc_activate(); - this.window.show(); + this.window.present(); Gtk.StyleContext.add_provider_for_display( Gdk.Display.get_default(), this.cssProvider, @@ -307,8 +307,10 @@ var App = GObject.registerClass({ if(!this.inhibitCookie) return; + /* Uninhibit seems to be broken as of GTK 3.99.2 this.uninhibit(this.inhibitCookie); this.inhibitCookie = null; + */ } debug(`set prevent suspend to: ${isInhibited}`); diff --git a/clapper_src/buttons.js b/clapper_src/buttons.js index 60e9671c..2c4f4d94 100644 --- a/clapper_src/buttons.js +++ b/clapper_src/buttons.js @@ -65,6 +65,31 @@ class ClapperIconToggleButton extends IconButton } }); +var LabelButton = GObject.registerClass( +class ClapperLabelButton extends CustomButton +{ + _init(text) + { + super._init({ + margin_start: 0, + margin_end: 0, + }); + + this.customLabel = new Gtk.Label({ + label: text, + single_line_mode: true, + }); + + this.customLabel.add_css_class('labelbutton'); + this.set_child(this.customLabel); + } + + set_label(text) + { + this.customLabel.set_text(text); + } +}); + var PopoverButton = GObject.registerClass( class ClapperPopoverButton extends IconButton { diff --git a/clapper_src/controls.js b/clapper_src/controls.js index d5239bb1..240b442d 100644 --- a/clapper_src/controls.js +++ b/clapper_src/controls.js @@ -32,6 +32,7 @@ var Controls = GObject.registerClass({ }); this.durationFormated = '00:00:00'; + this.elapsedInitial = '00:00:00/00:00:00'; this.buttonsArr = []; this._addTogglePlayButton(); @@ -89,6 +90,14 @@ var Controls = GObject.registerClass({ return button; } + addLabelButton(text) + { + text = text || ''; + let button = new Buttons.LabelButton(text); + + return this.addButton(button); + } + addPopoverButton(iconName) { let button = new Buttons.PopoverButton(iconName); @@ -184,10 +193,11 @@ var Controls = GObject.registerClass({ _addPositionScale() { + this.elapsedButton = this.addLabelButton(this.elapsedInitial); this.positionScale = new Gtk.Scale({ orientation: Gtk.Orientation.HORIZONTAL, value_pos: Gtk.PositionType.LEFT, - draw_value: true, + draw_value: false, hexpand: true, valign: Gtk.Align.CENTER, }); @@ -200,9 +210,7 @@ var Controls = GObject.registerClass({ ); this.positionScale.add_css_class('positionscale'); - this.positionScale.set_format_value_func( - this._onPositionScaleFormatValue.bind(this) - ); + this.positionScale.connect('value-changed', this._onPositionScaleValueChanged.bind(this)); /* this.positionScale.connect( 'button-press-event', this._onPositionScaleButtonPressEvent.bind(this) @@ -284,10 +292,12 @@ var Controls = GObject.registerClass({ } } - _onPositionScaleFormatValue(self, value) + _onPositionScaleValueChanged() { - return this._getFormatedTime(value) + let elapsed = this._getFormatedTime(this.positionScale.get_value()) + '/' + this.durationFormated; + + this.elapsedButton.set_label(elapsed); } _onPositionScaleButtonPressEvent() @@ -345,7 +355,6 @@ var Controls = GObject.registerClass({ { this.disconnect(this.destroySignal); - this.positionScale.set_format_value_func(null); this.visualizationsButton.emit('destroy'); this.videoTracksButton.emit('destroy'); this.audioTracksButton.emit('destroy'); diff --git a/css/styles.css b/css/styles.css index 1a91276c..6ab5421d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -24,6 +24,11 @@ scale marks { min-width: 18px; min-height: 18px; } +.labelbutton { + font-family: 'Cantarell', 'Noto Sans', sans-serif; + font-variant-numeric: tabular-nums; + font-weight: 600; +} .videobox { background: black; } @@ -45,25 +50,13 @@ scale marks { font-size: 24px; font-weight: 600; } - -/* Position Scale */ -.positionscale value { - font-weight: 600; - color: currentColor; -} -.positionscale trough highlight { - min-height: 4px; -} -.osd .positionscale value { +.osd .labelbutton { font-size: 24px; } -.positionscale contents { - margin-left: 4px; - margin-right: 2px; -} -.osd .positionscale contents { - margin-left: 8px; - margin-right: 2px; + +/* Position Scale */ +.positionscale trough highlight { + min-height: 4px; } .osd .positionscale trough slider { color: transparent; @@ -77,12 +70,10 @@ scale marks { /* Volume Scale */ .volumescale { - margin-left: 4px; min-height: 180px; } .osd .volumescale { margin: 6px; - margin-left: 10px; min-height: 280px; } .volumescale marks label {