From f428de57a2f0d6ab1d2353048f7681d35d895adb Mon Sep 17 00:00:00 2001 From: Michael Bohlender Date: Mon, 25 Apr 2016 15:57:40 +0200 Subject: reorganize toolbar so that actions are in line with the content under it --- components/mail/contents/ui/main.qml | 196 +++++++++++++++++++++-------------- 1 file changed, 116 insertions(+), 80 deletions(-) (limited to 'components') diff --git a/components/mail/contents/ui/main.qml b/components/mail/contents/ui/main.qml index 72987d74..589faf30 100644 --- a/components/mail/contents/ui/main.qml +++ b/components/mail/contents/ui/main.qml @@ -65,10 +65,8 @@ ApplicationWindow { context: folderListContext } - - ToolBar { + Item { id: toolbar - anchors { top: app.top left: app.left @@ -77,112 +75,150 @@ ApplicationWindow { height: Kirigami.Units.iconSizes.medium width: app.width + Rectangle { + anchors.bottom: parent.bottom + width: parent.width + height: 1 + color: "grey" + } Row { - anchors { - left: parent.left - top: parent.top - bottom: parent.bottom - } + anchors.fill: parent - Component { - id: composerComponent - KubeComponents.FocusComposer { - id: composer - anchors.fill: parent - } - } + spacing: 1 //to account for the SplitView borders - ToolButton { + RowLayout { height: parent.height - iconName: "view-refresh" - text: "Sync" - enabled: syncAction.ready - onClicked: { - syncAction.execute() + width: folderListView.width + clip: true + + ToolButton { + Layout.fillHeight: true + text: "Account/Project/Activity Switch" + + onClicked: { + //TODO + } } - } - ToolButton { - height: parent.height - iconName: "mail-mark-unread" - text: "Mark As Read" - enabled: markAsReadAction.ready - onClicked: { - markAsReadAction.execute() + ToolButton { + Layout.fillHeight: true + iconName: "view-refresh" + text: "Sync" + enabled: syncAction.ready + + onClicked: { + syncAction.execute() + } } } - ToolButton { + RowLayout { height: parent.height - iconName: "mail-mark-important" - text: "Mark Important" - enabled: false - onClicked: { + width: mailListView.width + clip: true + + ToolButton { + Layout.fillHeight: true + iconName: "mail-mark-unread" + text: "Mark As Read" + enabled: markAsReadAction.ready + onClicked: { + markAsReadAction.execute() + } } - } - ToolButton { - height: parent.height - iconName: "edit-delete" - text: "Delete Mail" - enabled: deleteAction.ready - onClicked: { - deleteAction.execute() + ToolButton { + Layout.fillHeight: true + iconName: "mail-mark-important" + text: "Mark Important" + enabled: false + onClicked: { + } } - } - ToolButton { - height: parent.height - iconName: "mail-message-new" - text: "Compose" - onClicked: { - composerComponent.createObject(app) + ToolButton { + Layout.fillHeight: true + iconName: "edit-delete" + text: "Delete Mail" + enabled: deleteAction.ready + onClicked: { + deleteAction.execute() + } } - } - ToolButton { - height: parent.height - iconName: "mail-message-reply" - text: "Reply" - onClicked: { - composerComponent.createObject(app) - composer.originalMessage = mailListView.currentMail + Item { + Layout.fillWidth: true } } - } - RowLayout { - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - width: Kirigami.Units.gridUnit * 40 - height: Kirigami.Units.iconSizes.medium + RowLayout{ + height: parent.height + width: mailView.width + clip: true - TextField { + Component { + id: composerComponent - Layout.fillWidth: true + KubeComponents.FocusComposer { + id: composer + anchors.fill: parent + } + } - placeholderText: "Search..." - } + ToolButton { + id: newMailButton - ToolButton { + Layout.fillHeight: true - height: Kirigami.Units.iconSizes.medium + iconName: "mail-message-new" + text: "Compose" + onClicked: { + composerComponent.createObject(app) + } + } - iconName: "application-menu" - text: "Settings" + ToolButton { + Layout.fillHeight: true + iconName: "mail-message-reply" + text: "Reply" + onClicked: { + composerComponent.createObject(app) + composer.originalMessage = mailListView.currentMail + } + } - onClicked: { - settingsComponent.createObject(app) + Item { + Layout.fillWidth: true } - Component { - id: settingsComponent - KubeComponents.Settings { - id: settings - anchors.fill: parent + + TextField { + id: searchBar + + Layout.minimumWidth: Kirigami.Units.gridUnit * 25 + + placeholderText: "Search..." + } + + ToolButton { + id: settingsButton + + Layout.fillHeight: true + + iconName: "application-menu" + text: "Settings" + + onClicked: { + settingsComponent.createObject(app) + } + + Component { + id: settingsComponent + KubeComponents.Settings { + id: settings + anchors.fill: parent + } } } } -- cgit v1.2.3