[vlc-commits] [Git][videolan/vlc][master] 4 commits: qml: fix topbar side spacing
Rémi Denis-Courmont (@Courmisch)
gitlab at videolan.org
Thu Jul 21 06:16:24 UTC 2022
Rémi Denis-Courmont pushed to branch master at VideoLAN / VLC
Commits:
60a41e3f by Pierre Lamot at 2022-07-20T15:57:44+02:00
qml: fix topbar side spacing
- - - - -
ee425b86 by Pierre Lamot at 2022-07-20T15:57:44+02:00
qml: fix pined controls label anchors
- - - - -
9092dc36 by Pierre Lamot at 2022-07-20T15:57:44+02:00
qml: improve layouting of the top player planel when safe area is defined
- - - - -
a874382d by Pierre Lamot at 2022-07-20T15:57:44+02:00
qml: move ResumeDialog within the TopBar
This allows to get the same positionning and layouting as the normal TopBar
- - - - -
3 changed files:
- modules/gui/qt/player/qml/Player.qml
- modules/gui/qt/player/qml/ResumeDialog.qml
- modules/gui/qt/player/qml/TopBar.qml
Changes:
=====================================
modules/gui/qt/player/qml/Player.qml
=====================================
@@ -308,75 +308,46 @@ FocusScope {
top: parent.top
left: parent.left
right: parent.right
- topMargin: VLCStyle.applicationVerticalMargin
- leftMargin: VLCStyle.applicationHorizontalMargin
- rightMargin: VLCStyle.applicationHorizontalMargin
}
z: 1
edge: Widgets.DrawerExt.Edges.Top
state: "visible"
- component: FocusScope {
- readonly property bool isResumeDialogVisible: resumeDialog.visible
-
- property alias topbar: topbar
+ component: TopBar {
+ id: topbar
width: topcontrolView.width
height: topbar.implicitHeight
- focus: true
-
- TopBar {
- id: topbar
-
- anchors.fill: parent
- textWidth: (MainCtx.playlistVisible) ? rootPlayer.width - playlistpopup.width
- : rootPlayer.width
+ topMargin: VLCStyle.applicationVerticalMargin
+ sideMargin: VLCStyle.applicationHorizontalMargin
- focus: true
- visible: !resumeDialog.visible
- title: mainPlaylistController.currentItem.title
- colors: rootPlayer.colors
+ textWidth: (MainCtx.playlistVisible) ? rootPlayer.width - playlistpopup.width
+ : rootPlayer.width
- pinControls: rootPlayer.pinVideoControls
- showCSD: MainCtx.clientSideDecoration && (MainCtx.intfMainWindow.visibility !== Window.FullScreen)
- showToolbar: MainCtx.hasToolbarMenu && (MainCtx.intfMainWindow.visibility !== Window.FullScreen)
+ focus: true
+ title: mainPlaylistController.currentItem.title
+ colors: rootPlayer.colors
- Navigation.parentItem: rootPlayer
- Navigation.downItem: playlistpopup.showPlaylist ? playlistpopup : (audioControls.visible ? audioControls : controlBarView)
+ pinControls: rootPlayer.pinVideoControls
+ showCSD: MainCtx.clientSideDecoration && (MainCtx.intfMainWindow.visibility !== Window.FullScreen)
+ showToolbar: MainCtx.hasToolbarMenu && (MainCtx.intfMainWindow.visibility !== Window.FullScreen)
- onTogglePlaylistVisibility: playlistVisibility.togglePlaylistVisibility()
+ Navigation.parentItem: rootPlayer
+ Navigation.downItem: playlistpopup.showPlaylist ? playlistpopup : (audioControls.visible ? audioControls : controlBarView)
- onRequestLockUnlockAutoHide: {
- rootPlayer.lockUnlockAutoHide(lock)
- }
+ onTogglePlaylistVisibility: playlistVisibility.togglePlaylistVisibility()
- onBackRequested: {
- if (MainCtx.hasEmbededVideo && !MainCtx.canShowVideoPIP) {
- mainPlaylistController.stop()
- }
- History.previous()
- }
+ onRequestLockUnlockAutoHide: {
+ rootPlayer.lockUnlockAutoHide(lock)
}
- ResumeDialog {
- id: resumeDialog
-
- anchors.fill: parent
- colors: rootPlayer.colors
- Navigation.parentItem: rootPlayer
-
- onHidden: {
- if (activeFocus) {
- topbar.focus = true
- controlBarView.forceActiveFocus()
- }
- }
-
- onVisibleChanged: {
- rootPlayer.lockUnlockAutoHide(visible)
+ onBackRequested: {
+ if (MainCtx.hasEmbededVideo && !MainCtx.canShowVideoPIP) {
+ mainPlaylistController.stop()
}
+ History.previous()
}
}
}
@@ -536,7 +507,6 @@ FocusScope {
right: parent.right
bottom: parent.bottom
- topMargin: VLCStyle.applicationVerticalMargin
bottomMargin: parent.height - rootPlayer.positionSliderY
}
=====================================
modules/gui/qt/player/qml/ResumeDialog.qml
=====================================
@@ -25,6 +25,7 @@ import org.videolan.vlc 0.1
import "qrc:///style/"
import "qrc:///widgets/" as Widgets
+import "qrc:///menus/" as Menus
FocusScope {
id: resumePanel
@@ -82,24 +83,19 @@ FocusScope {
hideResumePanel()
}
- //drag and dbl click the titlebar in CSD mode
- Loader {
- anchors.fill: parent
- active: MainCtx.clientSideDecoration
- source: "qrc:///widgets/CSDTitlebarTapNDrapHandler.qml"
- }
-
RowLayout {
id: layout
anchors.fill: parent
- anchors.leftMargin: VLCStyle.margin_small
+
spacing: VLCStyle.margin_small
//FIXME use the right xxxLabel class
T.Label {
Layout.preferredHeight: implicitHeight
Layout.preferredWidth: implicitWidth
+ Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+
color: resumePanel.colors.playerFg
font.pixelSize: VLCStyle.fontSize_normal
@@ -141,27 +137,6 @@ FocusScope {
Keys.priority: Keys.AfterItem
Keys.onPressed: closeBtn.Navigation.defaultKeyAction(event)
}
-
- Item {
- Layout.fillWidth: true
- }
-
- Loader {
- id: csdDecorations
-
- Layout.alignment: Qt.AlignTop | Qt.AlignRight
-
- focus: false
- height: VLCStyle.icon_normal
- active: MainCtx.clientSideDecoration
- enabled: MainCtx.clientSideDecoration
- visible: MainCtx.clientSideDecoration
- source: "qrc:///widgets/CSDWindowButtonSet.qml"
- onLoaded: {
- item.color = Qt.binding(function() { return resumePanel.colors.playerFg })
- item.hoverColor = Qt.binding(function() { return resumePanel.colors.windowCSDButtonDarkBg })
- }
- }
}
}
=====================================
modules/gui/qt/player/qml/TopBar.qml
=====================================
@@ -40,8 +40,13 @@ FocusScope{
property bool showToolbar: false
property bool pinControls: false
+ property int topMargin: 0
+ property int sideMargin: 0
+
property int reservedHeight: 0
+ readonly property int _sideMargin: VLCStyle.margin_small + sideMargin
+
signal togglePlaylistVisibility()
signal requestLockUnlockAutoHide(bool lock)
signal backRequested()
@@ -51,6 +56,8 @@ FocusScope{
onShowCSDChanged: root._layout()
onPinControlsChanged: root._layout()
onShowToolbarChanged: root._layout()
+ onTopMarginChanged: root._layout()
+ onSideMarginChanged: root._layout()
function _layoutLine(c1, c2, offset)
{
@@ -58,44 +65,42 @@ FocusScope{
if (c1) {
c1.height = lineHeight
- c1.anchors.leftMargin = 0
c1.anchors.topMargin = offset
}
if (c2) {
c2.height = lineHeight
c2.anchors.topMargin = offset
- c2.anchors.rightMargin = 0
}
return lineHeight
}
+ //FIXME: if CSD will be weirdly placed if application safe-area are used,
+ //nota that if you need a safe area (kiosk mode), you probably don't need CSD
function _layout() {
- var offset = 0
+ var offset = root.topMargin
if (root.pinControls && !root.showToolbar && root.showCSD) {
//place everything on one line
- var lineHeight = Math.max(logoGroup.implicitHeight, playlistGroup.implicitHeight, csdDecorations.implicitHeight)
+ var lineHeight = Math.max(logoOrResume.implicitHeight, playlistGroup.implicitHeight, csdDecorations.implicitHeight)
centerTitleText.y = 0
centerTitleText.height = lineHeight
csdDecorations.height = lineHeight
- logoGroup.height = lineHeight
+ logoOrResume.height = lineHeight
playlistGroup.height = lineHeight
playlistGroup.anchors.topMargin = 0
- playlistGroup.anchors.right = csdDecorations.left
- playlistGroup.anchors.rightMargin = VLCStyle.margin_xsmall
+ playlistGroup.extraRightMargin = Qt.binding(function() { return root.width - csdDecorations.x })
root.implicitHeight = lineHeight
offset += lineHeight
} else {
- playlistGroup.anchors.right = root.right
- playlistGroup.anchors.rightMargin = VLCStyle.margin_xsmall
+ playlistGroup.extraRightMargin = 0
var left = undefined
var right = undefined
@@ -108,7 +113,7 @@ FocusScope{
if (root.showCSD) {
right = csdDecorations
if (!left) {
- left = logoGroup
+ left = logoOrResume
logoPlaced = true
}
}
@@ -122,7 +127,7 @@ FocusScope{
}
if (!logoPlaced) {
- left = logoGroup
+ left = logoOrResume
} else {
left = undefined
}
@@ -163,11 +168,12 @@ FocusScope{
anchors.top: parent.top
anchors.left: parent.left
- anchors.leftMargin: VLCStyle.margin_small
+ anchors.leftMargin: root._sideMargin
width: implicitWidth
visible: root.showToolbar
+ enabled: root.showToolbar
textColor: root.colors.text
highlightedBgColor: root.colors.bgHover
highlightedTextColor: root.colors.bgHoverText
@@ -176,43 +182,85 @@ FocusScope{
onMenuOpenedChanged: root.requestLockUnlockAutoHide(menuOpened)
}
- RowLayout {
- id: logoGroup
- spacing: VLCStyle.margin_xxsmall
+ Item {
+ id: logoOrResume
- anchors.left: parent.left
- anchors.top: parent.top
- anchors.leftMargin: VLCStyle.margin_small
+ anchors.left: root.left
+ anchors.top: root.top
+ anchors.leftMargin: root._sideMargin
- Widgets.IconControlButton {
- id: backBtn
+ implicitWidth: resumeDialog.visible ? resumeDialog.implicitWidth
+ : logoGroup.implicitWidth
- Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+ implicitHeight: resumeDialog.visible ? resumeDialog.implicitHeight
+ : logoGroup.implicitHeight
- objectName: "IconToolButton"
- size: VLCStyle.banner_icon_size
- iconText: VLCIcons.topbar_previous
- text: I18n.qtr("Back")
- focus: true
- colors: root.colors
+ Item {
+ id: logoGroup
- Navigation.parentItem: root
- Navigation.rightItem: menuSelector
- onClicked: root.backRequested()
+ anchors.fill: parent
+ visible: !resumeDialog.visible
- onHoveredChanged: root.requestLockUnlockAutoHide(hovered)
+ implicitHeight: VLCStyle.banner_icon_size + VLCStyle.margin_xxsmall * 2
+ implicitWidth: backBtn.implicitWidth + logo.implicitWidth + VLCStyle.margin_xxsmall
+
+ Widgets.IconControlButton {
+ id: backBtn
+
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+
+ objectName: "IconToolButton"
+ size: VLCStyle.banner_icon_size
+ iconText: VLCIcons.topbar_previous
+ text: I18n.qtr("Back")
+ focus: true
+ colors: root.colors
+
+
+ Navigation.parentItem: root
+ Navigation.rightItem: menuSelector
+ onClicked: root.backRequested()
+
+ onHoveredChanged: root.requestLockUnlockAutoHide(hovered)
+ }
+
+ Image {
+ id: logo
+
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: backBtn.right
+ anchors.leftMargin: VLCStyle.margin_xxsmall
+
+ sourceSize.width: VLCStyle.icon_small
+ sourceSize.height: VLCStyle.icon_small
+ source: "qrc:///logo/cone.svg"
+ enabled: false
+ }
}
- Image {
- id: logo
- Layout.alignment: Qt.AlignVCenter
+ ResumeDialog {
+ id: resumeDialog
+
+ anchors.fill: parent
+ //add aditional margin so it align with menubar text when visible (see MenuBar.qml)
+ anchors.leftMargin: VLCStyle.margin_xsmall
+
+ colors: root.colors
- sourceSize.width: VLCStyle.icon_small
- sourceSize.height: VLCStyle.icon_small
- source: "qrc:///logo/cone.svg"
- enabled: false
+ Navigation.parentItem: rootPlayer
+
+ onHidden: {
+ if (activeFocus) {
+ backBtn.forceActiveFocus()
+ }
+ }
+
+ onVisibleChanged: {
+ root.requestLockUnlockAutoHide(visible)
+ }
}
}
@@ -220,14 +268,14 @@ FocusScope{
T.Label {
id: centerTitleText
- readonly property int _leftLimit: logoGroup.x + logoGroup.width
+ readonly property int _leftLimit: logoOrResume.x + logoOrResume.width
readonly property int _rightLimit: playlistGroup.x
readonly property int _availableWidth: _rightLimit - _leftLimit
- readonly property int _centerX: ((topcontrollerMouseArea.width - centerTitleText.implicitWidth) / 2)
+ readonly property int _centerX: ((root.width - centerTitleText.implicitWidth) / 2)
readonly property bool _alignHCenter: _centerX > _leftLimit
&& _centerX + centerTitleText.implicitWidth < _rightLimit
- visible: root.pinControls
+ visible: root.pinControls && !resumeDialog.visible
width: Math.min(centerTitleText._availableWidth, centerTitleText.implicitWidth)
@@ -247,7 +295,7 @@ FocusScope{
function _layout() {
if (_alignHCenter) {
centerTitleText.x = 0
- centerTitleText.anchors.horizontalCenter = topcontrollerMouseArea.horizontalCenter
+ centerTitleText.anchors.horizontalCenter = root.horizontalCenter
} else {
centerTitleText.anchors.horizontalCenter = undefined
centerTitleText.x = Qt.binding(function() { return centerTitleText._leftLimit })
@@ -260,7 +308,8 @@ FocusScope{
id: leftTitleText
anchors.left: parent.left
- anchors.top: logoGroup.bottom
+ anchors.top: logoOrResume.bottom
+ anchors.leftMargin: root._sideMargin
width: root.textWidth - VLCStyle.margin_normal
@@ -304,12 +353,14 @@ FocusScope{
Row {
id: playlistGroup
+ property int extraRightMargin: 0
+
focus: true
spacing: VLCStyle.margin_xxsmall
- topPadding: VLCStyle.margin_xxsmall
- rightPadding: VLCStyle.margin_xxsmall
anchors.top: parent.top
+ anchors.right: parent.right
+ anchors.rightMargin: root._sideMargin + extraRightMargin
Widgets.IconControlButton {
id: menuSelector
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/cb9014af76be77267ff6928ece63dd8e986e0f96...a874382d58b141b4f62b88015cfab9ab3963e2a4
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/cb9014af76be77267ff6928ece63dd8e986e0f96...a874382d58b141b4f62b88015cfab9ab3963e2a4
You're receiving this email because of your account on code.videolan.org.
VideoLAN code repository instance
More information about the vlc-commits
mailing list