From bb3828c041835ec35537311af382a13c4fc62d8e Mon Sep 17 00:00:00 2001 From: Michele Castellazzi Date: Sun, 3 Jul 2022 15:48:33 +0200 Subject: [PATCH] Preliminary support for notch in indicator bar --- qml/Panel/Indicators/IndicatorItem.qml | 6 +- qml/Panel/Panel.qml | 20 ++- qml/Panel/PanelBar.qml | 7 + qml/Panel/PanelItemRow.qml | 5 + qml/Panel/PanelMenu.qml | 17 ++ qml/Panel/PanelMenuPage.qml | 1 + .../Unity/Indicators/IndicatorsModel.qml | 9 + .../Unity/Indicators/fakeindicatorsmodel.cpp | 14 ++ .../Unity/Indicators/fakeindicatorsmodel.h | 3 + tests/qmltests/Panel/PanelTest.qml | 25 +++ tests/qmltests/Panel/PanelUI.qml | 160 ++++++++++++++++-- tests/qmltests/Panel/tst_PanelItemRow.qml | 1 + 12 files changed, 252 insertions(+), 16 deletions(-) diff --git a/qml/Panel/Indicators/IndicatorItem.qml b/qml/Panel/Indicators/IndicatorItem.qml index 598f7dc1d0..c08cbcae40 100644 --- a/qml/Panel/Indicators/IndicatorItem.qml +++ b/qml/Panel/Indicators/IndicatorItem.qml @@ -30,6 +30,8 @@ IndicatorDelegate { property bool expanded: false property bool selected: false property real iconHeight: units.gu(2) + property bool notch: identifier === "notch" + property real notchW: units.gu(3) readonly property color color: { if (!expanded) return theme.palette.normal.backgroundText; if (!selected) return theme.palette.disabled.backgroundText; @@ -65,7 +67,7 @@ IndicatorDelegate { id: mainItems anchors.centerIn: parent - width: leftLabelItem.width + iconsItem.width + rightLabelItem.width + width: notch ? notchW : leftLabelItem.width + iconsItem.width + rightLabelItem.width implicitHeight: units.gu(2) Label { @@ -106,6 +108,7 @@ IndicatorDelegate { id: iconRepeater objectName: "iconRepeater" + // model: notch ? [] : d.useFallbackIcon ? [ "image://theme/settings" ] : root.icons model: d.useFallbackIcon ? [ "image://theme/settings" ] : root.icons Icon { @@ -117,6 +120,7 @@ IndicatorDelegate { source: modelData color: root.color Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing } } + visible: !notch // Workaround indicators getting stretched/squished when (un)plugging external/virtual monitor onHeightChanged: { diff --git a/qml/Panel/Panel.qml b/qml/Panel/Panel.qml index 375f5f4d3a..16b9ed871b 100644 --- a/qml/Panel/Panel.qml +++ b/qml/Panel/Panel.qml @@ -52,6 +52,11 @@ Item { // Whether our expanded menus should take up the full width of the panel property bool partialWidth: width >= units.gu(60) + property alias expanded: __indicators.expanded + property alias listView: __indicators.listView + property real notchW: units.gu(3) + // onNotchWChanged: console.log(notchW) + property string mode: "staged" MouseArea { @@ -422,6 +427,8 @@ Item { height: parent.height expanded: indicators.expanded selected: ListView.isCurrentItem + notchW: root.notchW + // onNotchWChanged: console.log(notchW) identifier: model.identifier busName: indicatorProperties.busName @@ -437,17 +444,20 @@ Item { } pageDelegate: PanelMenuPage { - objectName: modelData.identifier + "-page" + objectName: modelData ? modelData.identifier + "-page" : "" submenuIndex: 0 menuModel: delegate.menuModel factory: IndicatorMenuItemFactory { indicator: { - var context = modelData.identifier; + var context = modelData ? modelData.identifier : ""; if (context && context.indexOf("fake-") === 0) { context = context.substring("fake-".length) } + // if (context && context === "notch") { + // return undefined + // } return context; } rootModel: delegate.menuModel @@ -455,9 +465,9 @@ Item { IndicatorDelegate { id: delegate - busName: modelData.indicatorProperties.busName - actionsObjectPath: modelData.indicatorProperties.actionsObjectPath - menuObjectPath: modelData.indicatorProperties.menuObjectPath + busName: modelData ? modelData.indicatorProperties.busName : "" + actionsObjectPath: modelData ? modelData.indicatorProperties.actionsObjectPath : "" + menuObjectPath: modelData ? modelData.indicatorProperties.menuObjectPath : "" } } diff --git a/qml/Panel/PanelBar.qml b/qml/Panel/PanelBar.qml index 35d24311a0..3abb46861c 100644 --- a/qml/Panel/PanelBar.qml +++ b/qml/Panel/PanelBar.qml @@ -34,9 +34,16 @@ Item { property alias hideRow: row.hideRow property alias rowItemDelegate: row.delegate + property alias listView: row.listView implicitWidth: flickable.contentWidth + function indicatorAt(x, y) { + return row.indicatorAt(x, y) + } + function getCurrentItemX() { + return row.getCurrentItemX() + } function selectItemAt(lateralPosition) { if (!expanded) { row.resetCurrentItem(); diff --git a/qml/Panel/PanelItemRow.qml b/qml/Panel/PanelItemRow.qml index 2326cc3ca6..0801d58185 100644 --- a/qml/Panel/PanelItemRow.qml +++ b/qml/Panel/PanelItemRow.qml @@ -30,6 +30,7 @@ Item { property bool expanded: false readonly property alias currentItem: row.currentItem readonly property alias currentItemIndex: row.currentIndex + property alias listView: row property real unitProgress: 0.0 property real selectionChangeBuffer: units.gu(2) @@ -128,6 +129,10 @@ Item { return false; } + function getCurrentItemX() { + return row.currentItem.x + } + function selectItemAt(lateralPosition) { var item = indicatorAt(lateralPosition, 0); if (item && item.opacity > 0 && item.enabled) { diff --git a/qml/Panel/PanelMenu.qml b/qml/Panel/PanelMenu.qml index 1a7ff51a85..a241f49810 100644 --- a/qml/Panel/PanelMenu.qml +++ b/qml/Panel/PanelMenu.qml @@ -89,6 +89,23 @@ Showable { onUnitProgressChanged: d.updateState() + property alias listView: bar.listView + function indicatorAt(x, y) { + return bar.indicatorAt(x, y) + } + function selectNextItem() { + return bar.selectNextItem() + } + function selectPreviousItem() { + return bar.selectPreviousItem() + } + function setCurrentItemIndex(i) { + return bar.setCurrentItemIndex(i) + } + function getCurrentItemX() { + return bar.getCurrentItemX() + } + Item { anchors { left: parent.left diff --git a/qml/Panel/PanelMenuPage.qml b/qml/Panel/PanelMenuPage.qml index d502916c65..32ac54ac42 100644 --- a/qml/Panel/PanelMenuPage.qml +++ b/qml/Panel/PanelMenuPage.qml @@ -60,6 +60,7 @@ PageStack { if (clearModel) { clear(); var model = root.submenuIndex == undefined ? menuModel : menuModel.submenu(root.submenuIndex) + // console.log(JSON.stringify(model)) if (model) { push(pageComponent, { "menuModel": model }); } diff --git a/tests/mocks/Unity/Indicators/IndicatorsModel.qml b/tests/mocks/Unity/Indicators/IndicatorsModel.qml index 3eca2d2f21..f1f67559a7 100644 --- a/tests/mocks/Unity/Indicators/IndicatorsModel.qml +++ b/tests/mocks/Unity/Indicators/IndicatorsModel.qml @@ -82,6 +82,15 @@ Indicators.FakeIndicatorsModel { "actionsObjectPath": "/com/canonical/indicators/fake5" } }, + { + "identifier": "notch", + "indicatorProperties": { + "enabled": true, + "busName": "com.canonical.indicators.fake-notch", + "menuObjectPath": "/com/canonical/indicators/fake-notch", + "actionsObjectPath": "/com/canonical/indicators/fake-notch" + } + }, { "identifier": "fake-indicator-power", "indicatorProperties": { diff --git a/tests/mocks/Unity/Indicators/fakeindicatorsmodel.cpp b/tests/mocks/Unity/Indicators/fakeindicatorsmodel.cpp index cb71e5605c..3761c682a5 100644 --- a/tests/mocks/Unity/Indicators/fakeindicatorsmodel.cpp +++ b/tests/mocks/Unity/Indicators/fakeindicatorsmodel.cpp @@ -19,6 +19,7 @@ #include "fakeindicatorsmodel.h" #include "indicators.h" +#include FakeIndicatorsModel::FakeIndicatorsModel(QObject *parent) : QAbstractListModel(parent), @@ -104,6 +105,19 @@ void FakeIndicatorsModel::remove(int row) endRemoveRows(); } +void FakeIndicatorsModel::moveNotchToIndex(const int notchIndex, const int index) +{ + QList allData = m_modelData.toList(); + // qDebug() << allData; + beginResetModel(); + allData.move(notchIndex, index); + // qDebug() << allData; + m_modelData = allData; + Q_EMIT modelDataChanged(); + + endResetModel(); + // qDebug() << m_modelData; +} void FakeIndicatorsModel::setModelData(const QVariant& modelData) { diff --git a/tests/mocks/Unity/Indicators/fakeindicatorsmodel.h b/tests/mocks/Unity/Indicators/fakeindicatorsmodel.h index c5fbd89a09..8e44e3abd0 100644 --- a/tests/mocks/Unity/Indicators/fakeindicatorsmodel.h +++ b/tests/mocks/Unity/Indicators/fakeindicatorsmodel.h @@ -55,6 +55,9 @@ class FakeIndicatorsModel : public QAbstractListModel QModelIndex parent (const QModelIndex &index) const override; int rowCount(const QModelIndex &parent = QModelIndex()) const override; + // Notch + Q_INVOKABLE void moveNotchToIndex(const int notchIndex, const int index); + Q_SIGNALS: void countChanged(); void profileChanged(); diff --git a/tests/qmltests/Panel/PanelTest.qml b/tests/qmltests/Panel/PanelTest.qml index 3c86522a42..28ecd18708 100644 --- a/tests/qmltests/Panel/PanelTest.qml +++ b/tests/qmltests/Panel/PanelTest.qml @@ -17,6 +17,7 @@ import QtQuick 2.4 import Unity.Indicators 0.1 as Indicators +// this file Rectangle { id: root color: theme.palette.normal.background @@ -59,6 +60,30 @@ Rectangle { } } + // get actual indicator index from original model index + function getIndicatorIndex(index) { + var i; + for (i = 0; i < __indicatorsModel.modelData.length; i++) { + if (__indicatorsModel.modelData[i]["identifier"] === __indicatorsModel.originalModelData[index]["identifier"]) { + console.log(__indicatorsModel.modelData[i]["identifier"]) + return i; + } + } + } + + function getIndicatorIndexFromIdentifier(identifier) { + var i; + for (i = 0; i < __indicatorsModel.modelData.length; i++) { + if (__indicatorsModel.modelData[i]["identifier"] === identifier) { + return i; + } + } + } + + function moveNotch(index) { + __indicatorsModel.moveNotchToIndex(getIndicatorIndex(6), index) + } + function setIndicatorVisible(index, visible) { var identifier = __indicatorsModel.originalModelData[index]["identifier"]; __indicatorsModel.setIndicatorVisible(identifier, visible); diff --git a/tests/qmltests/Panel/PanelUI.qml b/tests/qmltests/Panel/PanelUI.qml index 2994c6a8bb..8b71ca3969 100644 --- a/tests/qmltests/Panel/PanelUI.qml +++ b/tests/qmltests/Panel/PanelUI.qml @@ -73,7 +73,7 @@ PanelTest { RowLayout { anchors.fill: parent - anchors.margins: units.gu(1) + //anchors.margins: units.gu(1) clip: true Rectangle { @@ -87,6 +87,9 @@ PanelTest { id: backgroundMouseArea anchors.fill: parent hoverEnabled: true + onClicked: { console.log(" at "+mouse.x +" " +mouse.y ) + + mouse.accepted = false} Panel { id: panel @@ -107,6 +110,86 @@ PanelTest { model: root.indicatorsModel hides: [ panel.applicationMenus ] } + onExpandedChanged: { + if (expanded) { + removeIndicator(6) + } else { + insertIndicator(6) + } + } + Rectangle { + id: notchRect + anchors { + top: parent.top + topMargin: panel.indicators.height + left: parent.horizontalCenter + leftMargin: notchX.value + } + height: units.gu(0.5) + width: notchWidth.value + // x: units.gu(15) //(parent.width - width) / 2 + // x: (parent.width - width) / 2 + // x: (parent.width - width) / 2 + color: UbuntuColors.red + visible: false + // opacity: 0.5 + property real y1: y + height / 2 + // property real relX: x + width //x-panel.listView.x + width + property real relX: x-panel.listView.x + width + property real relY1: y1-panel.listView.y + // onXChanged: { + // // console.log(x) + // update() + // } + // onWidthChanged: update() + Component.onCompleted: update() + function update() { + console.log(relX, relY1) + console.log("updating notch") + // var i = panel.indicators.indicatorAt(relX, relY1) + var i = panel.indicators.indicatorAt(relX, 0) + var objName = i.objectName.split("-panelItem")[0] + console.log("indicator at right "+objName) + var index = getIndicatorIndexFromIdentifier(objName) + console.log("indicator index at right "+index) + + var p + panel.indicators.setCurrentItemIndex(index + 1) + // item to the right of the notch + var t_str = panel.listView.currentItem + console.log("new current item (t)", t_str) + var t_index = getIndicatorIndexFromIdentifier(t_str.objectName.split("-panelItem")[0]) + var t = panel.listView.children[t_index] + console.log("t", t_index, t) + + var tX = panel.indicators.getCurrentItemX() + + //// x coords at the right of the item t + // var p = t.x + t.width + // x coords at the left of the item t + p = panel.listView.currentItem != undefined ? tX : panel.listView.x + panel.listView.width + console.log("p", panel.listView.currentItem != undefined, tX, ":", panel.listView.x +"+"+ panel.listView.width) + panel.indicators.setCurrentItemIndex(index - 1) + // console.log("element index at right of the notch: "+i) + + var notchIndex = getIndicatorIndexFromIdentifier("notch") + console.log("notch index: " + notchIndex) + if (notchIndex === index) { + if (panel.listView.currentItem != undefined) { + // console.log(p, relX, panel.listView.currentItem.width) + if(p - relX > panel.listView.currentItem.width) + moveNotch(index-1) + } + console.log("P: ", p,"X: ", relX, "w: ", width) + panel.notchW = p - relX + width + } + else if (i != "") { + moveNotch(index) + panel.notchW = width + } + console.log(panel.notchW) + } + } } } } @@ -115,16 +198,73 @@ PanelTest { Layout.alignment: Qt.AlignTop Layout.fillWidth: false - ListItem.ItemSelector { - id: modeSelector + // ListItem.ItemSelector { + // id: modeSelector + // Layout.fillWidth: true + // activeFocusOnPress: false + // text: "Mode" + // model: ["staged", "windowed" ] + // onSelectedIndexChanged: { + // panel.mode = model[selectedIndex]; + // keyboardAttached.checked = panel.mode == "windowed" + // windowControlsCB.checked = panel.mode == "windowed" + // } + // } + + Button { + id: nButton Layout.fillWidth: true - activeFocusOnPress: false - text: "Mode" - model: ["staged", "windowed" ] - onSelectedIndexChanged: { - panel.mode = model[selectedIndex]; - keyboardAttached.checked = panel.mode == "windowed" - windowControlsCB.checked = panel.mode == "windowed" + text: "Update notch" + onClicked: notchRect.update() + } + + Slider { + id: notchWidth + maximumValue: units.gu(20) + minimumValue: units.gu(1) + width: nButton.width + live: true + value: units.gu(3) + } + + Slider { + id: notchX + maximumValue: units.gu(20) + minimumValue: units.gu(-20) + width: nButton.width + live: true + value: units.gu(0) + } + RowLayout { + Button { + text: "<" + Layout.fillWidth: true + onClicked: { + var notchIndex = getIndicatorIndexFromIdentifier("notch") + moveNotch(notchIndex-1) + } + } + Button { + text: "+" + Layout.fillWidth: true + onClicked: { + panel.notchW += units.gu(1) + } + } + Button { + text: "-" + Layout.fillWidth: true + onClicked: { + panel.notchW -= units.gu(1) + } + } + Button { + text: ">" + Layout.fillWidth: true + onClicked: { + var notchIndex = getIndicatorIndexFromIdentifier("notch") + moveNotch(notchIndex+1) + } } } diff --git a/tests/qmltests/Panel/tst_PanelItemRow.qml b/tests/qmltests/Panel/tst_PanelItemRow.qml index 7cb1e97f73..5c3777981f 100644 --- a/tests/qmltests/Panel/tst_PanelItemRow.qml +++ b/tests/qmltests/Panel/tst_PanelItemRow.qml @@ -61,6 +61,7 @@ PanelTest { delegate: Item { property int ownIndex: index objectName: model.identifier + "-panelItem" + visible: !(model.identifier === "notch" && indicatorsRow.expanded) implicitWidth: indicatorsRow.expanded ? units.gu(6) : units.gu(3) height: parent.height