diff --git a/css/styles.css b/css/styles.css index e0c565cb..4e380533 100644 --- a/css/styles.css +++ b/css/styles.css @@ -58,6 +58,9 @@ radio { .adwrounded.tiled-bottom { border-radius: 0px; } +.roundedcorners { + border-radius: 8px; +} .videowidget { min-width: 336px; @@ -105,14 +108,10 @@ radio { font-size: 23px; text-shadow: none; } -.tvrevealerboxtop { + +/* Top Revealer */ +.tvmode .revealertopgrid { font-family: 'Cantarell', sans-serif; - border-radius: 8px; - border-bottom-right-radius: 0px; -} -.tvrevealerboxbottom { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; } .tvmode .tvtitle { font-size: 28px; @@ -120,20 +119,21 @@ radio { text-shadow: none; } .tvtime { + margin-top: -2px; + margin-bottom: -2px; + min-height: 4px; font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; } .tvendtime { margin-top: -4px; - min-height: 4px; + margin-bottom: 2px; + min-height: 6px; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; } -.revealerbottombox { - border-radius: 8px; -} /* Button Inside Popover */ .popoverbutton { diff --git a/src/revealers.js b/src/revealers.js index 5a67e4d9..09e6b62e 100644 --- a/src/revealers.js +++ b/src/revealers.js @@ -58,23 +58,26 @@ class ClapperRevealerTop extends CustomRevealer ellipsize: Pango.EllipsizeMode.END, halign: Gtk.Align.START, valign: Gtk.Align.CENTER, - hexpand: true, margin_start: 10, + margin_end: 10, + visible: false, }); this.mediaTitle.add_css_class('tvtitle'); this.currentTime = new Gtk.Label({ halign: Gtk.Align.END, valign: Gtk.Align.CENTER, - margin_start: 24, + margin_start: 10, margin_end: 10, }); this.currentTime.add_css_class('tvtime'); this.endTime = new Gtk.Label({ + halign: Gtk.Align.END, + valign: Gtk.Align.START, margin_start: 10, margin_end: 10, - margin_bottom: 2, + visible: false, }); this.endTime.add_css_class('tvendtime'); @@ -85,30 +88,38 @@ class ClapperRevealerTop extends CustomRevealer revealerBox.append(this.headerBar); this.revealerGrid = new Gtk.Grid({ - visible: false, + column_spacing: 4, margin_top: 8, margin_start: 8, margin_end: 8, + visible: false, }); + this.revealerGrid.add_css_class('revealertopgrid'); - const topBox = new Gtk.Box({ + const topLeftBox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL, }); - topBox.add_css_class('osd'); - topBox.add_css_class('tvrevealerboxtop'); - topBox.append(this.mediaTitle); - topBox.append(this.currentTime); + topLeftBox.add_css_class('osd'); + topLeftBox.add_css_class('roundedcorners'); + topLeftBox.append(this.mediaTitle); - const bottomBox = new Gtk.Box({ + const topSpacerBox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL, + hexpand: true, + }); + + const topRightBox = new Gtk.Box({ + orientation: Gtk.Orientation.VERTICAL, halign: Gtk.Align.END, }); - bottomBox.add_css_class('osd'); - bottomBox.add_css_class('tvrevealerboxbottom'); - bottomBox.append(this.endTime); + topRightBox.add_css_class('osd'); + topRightBox.add_css_class('roundedcorners'); + topRightBox.append(this.currentTime); + topRightBox.append(this.endTime); - this.revealerGrid.attach(topBox, 0, 0, 2, 1); - this.revealerGrid.attach(bottomBox, 1, 1, 1, 1); + this.revealerGrid.attach(topLeftBox, 0, 0, 1, 1); + this.revealerGrid.attach(topSpacerBox, 1, 0, 1, 1); + this.revealerGrid.attach(topRightBox, 2, 0, 1, 2); revealerBox.append(this.revealerGrid); this.set_child(revealerBox); @@ -124,6 +135,16 @@ class ClapperRevealerTop extends CustomRevealer return this.mediaTitle.label; } + set showTitle(isShow) + { + this.mediaTitle.visible = isShow; + } + + get showTitle() + { + return this.mediaTitle.visible; + } + setTimes(currTime, endTime) { const now = currTime.format(this.timeFormat); @@ -140,6 +161,20 @@ class ClapperRevealerTop extends CustomRevealer return nextUpdate; } + + setFullscreenMode(isFullscreen, isMobileMonitor) + { + const isTvMode = (isFullscreen && !isMobileMonitor); + + this.headerBar.visible = !isTvMode; + this.revealerGrid.visible = isTvMode; + + this.headerBar.extraButtonsBox.visible = !isFullscreen; + + this.transition_type = (isTvMode) + ? Gtk.RevealerTransitionType.SLIDE_DOWN + : Gtk.RevealerTransitionType.CROSSFADE; + } }); var RevealerBottom = GObject.registerClass( @@ -160,7 +195,7 @@ class ClapperRevealerBottom extends CustomRevealer margin_bottom: 8, }); this.revealerBox.add_css_class('osd'); - this.revealerBox.add_css_class('revealerbottombox'); + this.revealerBox.add_css_class('roundedcorners'); this.set_child(this.revealerBox); diff --git a/src/widget.js b/src/widget.js index 9b7b6ab9..46cd589f 100644 --- a/src/widget.js +++ b/src/widget.js @@ -152,12 +152,7 @@ class ClapperWidget extends Gtk.Grid this._changeControlsPlacement(isFullscreen); this.controls.setFullscreenMode(isFullscreen); - - const headerbar = this.revealerTop.headerBar; - headerbar.visible = (!isFullscreen || this.isMobileMonitor); - headerbar.extraButtonsBox.visible = !isFullscreen; - - this.revealerTop.revealerGrid.visible = !headerbar.visible; + this.revealerTop.setFullscreenMode(isFullscreen, this.isMobileMonitor); if(this.revealerTop.child_revealed) this._checkSetUpdateTimeInterval(); @@ -328,6 +323,7 @@ class ClapperWidget extends Gtk.Grid this.root.title = title; this.revealerTop.title = title; + this.revealerTop.showTitle = true; } updateTime()