diff --git a/src/assets.qrc b/src/assets.qrc index f3e4ab2..60743f3 100644 --- a/src/assets.qrc +++ b/src/assets.qrc @@ -1,23 +1,26 @@ assets/face-sleeping.png assets/face-sleeping.svg assets/maui-app.colors assets/mauikit-logo.png assets/ElectricPlug.png assets/BugSearch.png assets/MoonSki.png assets/application-x-zerosize.svg assets/animat-rocket-color.gif assets/animat-diamond-color.gif assets/animat-search-color.gif assets/opendesktop.png assets/folder-add.svg assets/view-refresh.svg assets/edit-find.svg assets/dialog-information.svg assets/cover.png assets/arrow-down.svg + assets/arrow-up.svg + assets/arrow-left.svg + assets/arrow-right.svg assets/dialog-close.svg diff --git a/src/assets/arrow-left.svg b/src/assets/arrow-left.svg new file mode 100644 index 0000000..92e5cba --- /dev/null +++ b/src/assets/arrow-left.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/assets/arrow-right.svg b/src/assets/arrow-right.svg new file mode 100644 index 0000000..bfae27f --- /dev/null +++ b/src/assets/arrow-right.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/assets/arrow-up.svg b/src/assets/arrow-up.svg new file mode 100644 index 0000000..1f4be71 --- /dev/null +++ b/src/assets/arrow-up.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/controls/ToolActions.qml b/src/controls/ToolActions.qml index ddde336..5b823c9 100644 --- a/src/controls/ToolActions.qml +++ b/src/controls/ToolActions.qml @@ -1,169 +1,169 @@ import QtQuick 2.9 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import QtQml.Models 2.3 import QtQml 2.1 import org.kde.kirigami 2.7 as Kirigami import org.kde.mauikit 1.0 as Maui Item { id: control implicitWidth: _layout.implicitWidth + Maui.Style.space.medium implicitHeight: parent.height default property list actions property bool autoExclusive: true property int direction : Qt.Vertical property Action currentAction : actions[0] property bool expanded : false // Rectangle // { // anchors.fill: parent // color: control.expanded ? "#333" : "transparent" // opacity: 0.1 // radius: Math.min(Maui.Style.radiusV, height) // // Behavior on color // { // ColorAnimation // { // duration: Kirigami.Units.longDuration // } // } // } Row { id: _layout height: parent.height spacing: Maui.Style.space.small anchors.centerIn: parent ToolButton { - icon.name: control.currentAction.icon.name - onClicked: control.expanded = !control.expanded + icon.name: control.currentAction.icon.name + onClicked: control.expanded = !control.expanded text: " " indicator: Kirigami.Icon { anchors { right: parent.right verticalCenter: parent.verticalCenter } color: control.Kirigami.Theme.textColor - source: "qrc://assets/arrow-down.svg" + source: control.direction === Qt.Vertical ? "qrc://assets/arrow-down.svg" : (control.expanded ? "qrc://assets/arrow-left.svg" : "qrc://assets/arrow-right.svg") width: Maui.Style.iconSizes.small height: width isMask: true } } Loader { id: _loader height: parent.height sourceComponent: control.direction === Qt.Horizontal ? _rowComponent : (control.direction === Qt.Vertical ? _menuComponent : "") } } Component { id: _rowComponent Row { id: _row width: control.expanded ? implicitWidth : 0 spacing: Maui.Style.space.medium clip: true height: parent.height Behavior on width { NumberAnimation { duration: Kirigami.Units.longDuration easing.type: Easing.InOutQuad } } Kirigami.Separator { width: 1 height: parent.height * 0.7 anchors.verticalCenter: parent.verticalCenter } Repeater { model: control.actions ToolButton { action: modelData autoExclusive: control.autoExclusive anchors.verticalCenter: parent.verticalCenter onClicked: { control.currentAction = action control.expanded = false } } } } } Component { id: _menuComponent Menu { id: _actionsMenu Connections { target: control onExpandedChanged: { if(control.expanded) _actionsMenu.popup(0, parent.height) else _actionsMenu.close() } } onClosed: control.expanded = false closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent Repeater { model: control.actions MenuItem { action: modelData autoExclusive: control.autoExclusive Connections { target: modelData onTriggered: control.currentAction = action } } } } } } diff --git a/src/controls/ToolBar.qml b/src/controls/ToolBar.qml index 3014d5f..586745f 100644 --- a/src/controls/ToolBar.qml +++ b/src/controls/ToolBar.qml @@ -1,296 +1,298 @@ /* * Copyright 2018 Camilo Higuita * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Library General Public License as * published by the Free Software Foundation; either version 2, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details * * You should have received a copy of the GNU Library General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.6 import QtQuick.Controls 2.2 import org.kde.kirigami 2.7 as Kirigami import org.kde.mauikit 1.0 as Maui import QtQuick.Layouts 1.3 import QtGraphicalEffects 1.0 import "private" ToolBar { - id: control - + id: control + implicitHeight: visible ? Maui.Style.toolBarHeight : 0 spacing: Maui.Style.space.small padding: 0 - - property alias stickyRightContent : rightRowContent.sticky - property alias stickyLeftContent : leftRowContent.sticky - property alias stickyMiddleContent : middleRowContent.sticky - - property alias leftContent : leftRowContent.data - property alias middleContent : middleRowContent.data - property alias rightContent : rightRowContent.data - - property alias middleLayout : middleRowContent - property alias leftLayout : leftRowContent - property alias rightLayout : rightRowContent - - property alias layout : layout - + + property alias stickyRightContent : rightRowContent.sticky + property alias stickyLeftContent : leftRowContent.sticky + property alias stickyMiddleContent : middleRowContent.sticky + + property alias leftContent : leftRowContent.data + property alias middleContent : middleRowContent.data + property alias rightContent : rightRowContent.data + + property alias middleLayout : middleRowContent + property alias leftLayout : leftRowContent + property alias rightLayout : rightRowContent + + property alias layout : layout + readonly property alias fits : mainFlickable.fits - + property int margins: Maui.Style.space.medium - property int count : leftContent.length + middleContent.length + rightContent.length - - property bool flickable: true - property bool strech : true - property bool leftSretch: strech - property bool rightSretch: strech - property bool middleStrech: strech - - // leftPadding: Kirigami.Units.smallSpacing*2 + property int count : leftContent.length + middleContent.length + rightContent.length + + property bool flickable: true + property bool strech : true + property bool leftSretch: strech + property bool rightSretch: strech + property bool middleStrech: strech + + // leftPadding: Kirigami.Units.smallSpacing*2 // rightPadding: Kirigami.Units.smallSpacing*2 - - // background: Rectangle - // { - // id: headBarBG - // color: colorScheme.backgroundColor - // implicitHeight: Maui.Style.toolBarHeightAlt - // radius: floating ? Maui.Style.radiusV : 0 - // border.color: floating ? colorScheme.borderColor : "transparent" - // - // SequentialAnimation on radius - // { - // ColorAnimation { to: colorScheme.backgroundColor ; duration: 1000 } - // } - // - // Kirigami.Separator - // { - // visible: drawBorder - // color: colorScheme.borderColor - // height: Maui.Style.unit - // anchors - // { - // left: parent.left - // right: parent.right - // bottom: control.position == ToolBar.Footer ? undefined : parent.bottom - // top: control.position == ToolBar.Footer ? parent.top : undefined - // } - // } - // - // layer.enabled: dropShadow - // layer.effect: DropShadow - // { - // anchors.fill: headBarBG - // horizontalOffset: 0 - // verticalOffset: Maui.Style.unit * (altToolBars ? -1 : 1) - // radius: 8 - // samples: 25 - // color: Qt.darker(colorScheme.backgroundColor, 1.4) - // source: headBarBG - // } - // } - - - MouseArea - { - id: _rightFlickRec - width: Maui.Style.iconSizes.medium - height: parent.height + + // background: Rectangle + // { + // id: headBarBG + // color: colorScheme.backgroundColor + // implicitHeight: Maui.Style.toolBarHeightAlt + // radius: floating ? Maui.Style.radiusV : 0 + // border.color: floating ? colorScheme.borderColor : "transparent" + // + // SequentialAnimation on radius + // { + // ColorAnimation { to: colorScheme.backgroundColor ; duration: 1000 } + // } + // + // Kirigami.Separator + // { + // visible: drawBorder + // color: colorScheme.borderColor + // height: Maui.Style.unit + // anchors + // { + // left: parent.left + // right: parent.right + // bottom: control.position == ToolBar.Footer ? undefined : parent.bottom + // top: control.position == ToolBar.Footer ? parent.top : undefined + // } + // } + // + // layer.enabled: dropShadow + // layer.effect: DropShadow + // { + // anchors.fill: headBarBG + // horizontalOffset: 0 + // verticalOffset: Maui.Style.unit * (altToolBars ? -1 : 1) + // radius: 8 + // samples: 25 + // color: Qt.darker(colorScheme.backgroundColor, 1.4) + // source: headBarBG + // } + // } + + + MouseArea + { + id: _rightFlickRec + width: Maui.Style.iconSizes.medium + height: parent.height visible: !mainFlickable.atXEnd && !mainFlickable.fits && control.flickable - hoverEnabled: true - anchors - { - top: parent.top - bottom: parent.bottom - right: parent.right - } - - z: 999 - - EdgeShadow - { - visible: true - parent: parent - edge: Qt.RightEdge - anchors - { - right: parent.right - top: parent.top - bottom: parent.bottom - } - - opacity: 1 - - Behavior on opacity - { - NumberAnimation - { - duration: Kirigami.Units.longDuration - easing.type: Easing.InOutQuad - } - } - } - - Kirigami.Icon - { - anchors.centerIn: parent - source: "toolbar-expand-right" - width: Maui.Style.iconSizes.small - height: Maui.Style.iconSizes.small - color: _rightFlickRec.hovered ? Kirigami.Theme.highlightColor : Kirigami.Theme.textColor - } - - enabled: !mainFlickable.atXEnd - opacity: enabled ? 1 : 0.4 - onClicked: - { - if(!mainFlickable.atXEnd) - mainFlickable.contentX += control.height - if(mainFlickable.atXEnd) - mainFlickable.returnToBounds() - } - - } - - MouseArea - { - id: _leftFlickRec - width: Maui.Style.iconSizes.medium - height: parent.height + hoverEnabled: true + anchors + { + top: parent.top + bottom: parent.bottom + right: parent.right + } + + z: 999 + + EdgeShadow + { + visible: true + parent: parent + edge: Qt.RightEdge + anchors + { + right: parent.right + top: parent.top + bottom: parent.bottom + } + + opacity: 1 + + Behavior on opacity + { + NumberAnimation + { + duration: Kirigami.Units.longDuration + easing.type: Easing.InOutQuad + } + } + } + + Kirigami.Icon + { + anchors.centerIn: parent + source: "qrc://assets/arrow-right.svg" + isMask: true + width: Maui.Style.iconSizes.small + height: Maui.Style.iconSizes.small + color: _rightFlickRec.hovered ? Kirigami.Theme.highlightColor : Kirigami.Theme.textColor + } + + enabled: !mainFlickable.atXEnd + opacity: enabled ? 1 : 0.4 + onClicked: + { + if(!mainFlickable.atXEnd) + mainFlickable.contentX += control.height + if(mainFlickable.atXEnd) + mainFlickable.returnToBounds() + } + + } + + MouseArea + { + id: _leftFlickRec + width: Maui.Style.iconSizes.medium + height: parent.height visible: !mainFlickable.atXBeginning && !mainFlickable.fits && control.flickable - hoverEnabled: true - anchors - { - top: parent.top - bottom: parent.bottom - left: parent.left - } - z: 999 - - EdgeShadow - { - visible: true - parent: parent - edge: Qt.LeftEdge - anchors - { - left: parent.left - top: parent.top - bottom: parent.bottom - } - - opacity: 1 - - Behavior on opacity - { - NumberAnimation - { - duration: Kirigami.Units.longDuration - easing.type: Easing.InOutQuad - } - } - } - - Kirigami.Icon - { - anchors.centerIn: parent - source: "toolbar-expand-left" - width: Maui.Style.iconSizes.small - height: Maui.Style.iconSizes.small - color: _leftFlickRec.hovered ? Kirigami.Theme.highlightColor : Kirigami.Theme.textColor - } - - enabled: !mainFlickable.atXBeginning - opacity: enabled ? 1 : 0.4 - onClicked: - { - if(!mainFlickable.atXBeginning) - mainFlickable.contentX -= control.height - - if(mainFlickable.atXBeginning) - mainFlickable.returnToBounds() - } - } - - Flickable - { - id: mainFlickable - property bool fits : contentWidth < control.width - onFitsChanged: returnToBounds() - anchors.fill: parent - anchors.leftMargin: !fits && _leftFlickRec.visible && control.flickable && !Kirigami.Settings.isMobile ? _leftFlickRec.width : margins - anchors.rightMargin: !fits && _rightFlickRec.visible && control.flickable && !Kirigami.Settings.isMobile ? _rightFlickRec.width : margins - - flickableDirection: Flickable.HorizontalFlick - interactive: !fits && Kirigami.Settings.isMobile + hoverEnabled: true + anchors + { + top: parent.top + bottom: parent.bottom + left: parent.left + } + z: 999 + + EdgeShadow + { + visible: true + parent: parent + edge: Qt.LeftEdge + anchors + { + left: parent.left + top: parent.top + bottom: parent.bottom + } + + opacity: 1 + + Behavior on opacity + { + NumberAnimation + { + duration: Kirigami.Units.longDuration + easing.type: Easing.InOutQuad + } + } + } + + Kirigami.Icon + { + anchors.centerIn: parent + source: "qrc://assets/arrow-left.svg" + isMask: true + width: Maui.Style.iconSizes.small + height: Maui.Style.iconSizes.small + color: _leftFlickRec.hovered ? Kirigami.Theme.highlightColor : Kirigami.Theme.textColor + } + + enabled: !mainFlickable.atXBeginning + opacity: enabled ? 1 : 0.4 + onClicked: + { + if(!mainFlickable.atXBeginning) + mainFlickable.contentX -= control.height + + if(mainFlickable.atXBeginning) + mainFlickable.returnToBounds() + } + } + + Flickable + { + id: mainFlickable + property bool fits : contentWidth < control.width + onFitsChanged: returnToBounds() + anchors.fill: parent + anchors.leftMargin: !fits && _leftFlickRec.visible && control.flickable && !Kirigami.Settings.isMobile ? _leftFlickRec.width : margins + anchors.rightMargin: !fits && _rightFlickRec.visible && control.flickable && !Kirigami.Settings.isMobile ? _rightFlickRec.width : margins + + flickableDirection: Flickable.HorizontalFlick + interactive: !fits && Kirigami.Settings.isMobile contentWidth: ((control.margins) + Maui.Style.space.medium) - + (control.stickyLeftContent ? leftRowContent.implicitWidth : leftRowContent.width) - + (control.stickyMiddleContent ? middleRowContent.implicitWidth : middleRowContent.width) - + (control.stickyRightContent ? rightRowContent.implicitWidth : rightRowContent.width) - - boundsBehavior: Kirigami.Settings.isMobile ? Flickable.DragOverBounds : Flickable.StopAtBounds - clip: true - - RowLayout - { - id: layout + + (control.stickyLeftContent ? leftRowContent.implicitWidth : leftRowContent.width) + + (control.stickyMiddleContent ? middleRowContent.implicitWidth : middleRowContent.width) + + (control.stickyRightContent ? rightRowContent.implicitWidth : rightRowContent.width) + + boundsBehavior: Kirigami.Settings.isMobile ? Flickable.DragOverBounds : Flickable.StopAtBounds + clip: true + + RowLayout + { + id: layout width: control.width - control.margins - Maui.Style.space.medium - height: control.height - - RowLayout - { - id: leftRowContent - // visible: control.leftSretch && implicitWidth - property bool sticky : false - Layout.leftMargin: rightRowContent.implicitWidth && implicitWidth === 0 && middleRowContent.implicitWidth && control.leftSretch ? rightRowContent.implicitWidth : undefined - Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft - spacing: leftContent.length > 0 ? control.spacing : 0 + height: control.height + + RowLayout + { + id: leftRowContent + // visible: control.leftSretch && implicitWidth + property bool sticky : false + Layout.leftMargin: rightRowContent.implicitWidth && implicitWidth === 0 && middleRowContent.implicitWidth && control.leftSretch ? rightRowContent.implicitWidth : undefined + Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft + spacing: leftContent.length > 0 ? control.spacing : 0 + Layout.minimumWidth: !sticky ? undefined : implicitWidth + Layout.fillWidth: control.leftSretch && implicitWidth + Layout.fillHeight: true + } + + RowLayout + { + id: middleRowContent + property bool sticky : false + // visible: control.middleStrech && implicitWidth + Layout.alignment: Qt.AlignCenter + spacing: middleContent.length === 1 ? 0 : control.spacing + Layout.minimumWidth: !sticky ? undefined : implicitWidth + + // Layout.maximumWidth: control.width - leftRowContent.implicitWidth - rightRowContent.implicitWidth + Layout.fillWidth: control.middleStrech + Layout.fillHeight: true + } + + RowLayout + { + id: rightRowContent + // visible: control.rightSretch && implicitWidth + property bool sticky : false + Layout.rightMargin: leftRowContent.implicitWidth && implicitWidth === 0 && middleRowContent.implicitWidth && control.rightSretch ? leftRowContent.implicitWidth : undefined + Layout.alignment: Qt.AlignVCenter | Qt.AlignRight + spacing: rightContent.length > 0 ? control.spacing : 0 Layout.minimumWidth: !sticky ? undefined : implicitWidth - Layout.fillWidth: control.leftSretch && implicitWidth - Layout.fillHeight: true - } - - RowLayout - { - id: middleRowContent - property bool sticky : false - // visible: control.middleStrech && implicitWidth - Layout.alignment: Qt.AlignCenter - spacing: middleContent.length === 1 ? 0 : control.spacing - Layout.minimumWidth: !sticky ? undefined : implicitWidth - - // Layout.maximumWidth: control.width - leftRowContent.implicitWidth - rightRowContent.implicitWidth - Layout.fillWidth: control.middleStrech - Layout.fillHeight: true - } - - RowLayout - { - id: rightRowContent - // visible: control.rightSretch && implicitWidth - property bool sticky : false - Layout.rightMargin: leftRowContent.implicitWidth && implicitWidth === 0 && middleRowContent.implicitWidth && control.rightSretch ? leftRowContent.implicitWidth : undefined - Layout.alignment: Qt.AlignVCenter | Qt.AlignRight - spacing: rightContent.length > 0 ? control.spacing : 0 - Layout.minimumWidth: !sticky ? undefined : implicitWidth - // Layout.maximumWidth: !sticky ? rightRowContent.width : implicitWidth - Layout.fillWidth: control.rightSretch && implicitWidth - Layout.fillHeight: true - } - } - - // ScrollBar.horizontal: ScrollBar { visible: false} - } - + // Layout.maximumWidth: !sticky ? rightRowContent.width : implicitWidth + Layout.fillWidth: control.rightSretch && implicitWidth + Layout.fillHeight: true + } + } + + // ScrollBar.horizontal: ScrollBar { visible: false} + } + }