Zergling_man/moment
Zergling_man/moment
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add main pane top bar, improve readability

Browse Source
This commit is contained in:
miruka 2020-03-12 22:16:33 -04:00
parent 247eb15281
commit ca53e18e24
14 changed files with 169 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/backend/backend.py
View File

@ -243,6 +243,10 @@ class Backend:
# General functions
async def get_config_dir(self) -> Path:
return Path(self.appdirs.user_config_dir)
async def load_settings(self) -> tuple:
"""Return parsed user config files."""

29
src/gui/GlobalShortcuts.qml
View File

@ -33,33 +33,34 @@ Item {
flickTarget
function toggleConsole() {
if (debugConsole) {
debugConsole.visible = ! debugConsole.visible
} else if (! defaultDebugConsoleLoader.active) {
defaultDebugConsoleLoader.active = true
} else {
defaultDebugConsole.visible = ! defaultDebugConsole.visible
}
}
// App
HShortcut {
enabled: debugMode
sequences: settings.keys.startPythonDebugger
onActivated: py.call("BRIDGE.pdb")
}
HShortcut {
enabled: debugMode
sequences: settings.keys.toggleDebugConsole
onActivated: {
if (debugConsole) {
debugConsole.visible = ! debugConsole.visible
} else if (! defaultDebugConsoleLoader.active) {
defaultDebugConsoleLoader.active = true
} else {
defaultDebugConsole.visible = ! defaultDebugConsole.visible
}
}
onActivated: toggleConsole()
}
HShortcut {
sequences: settings.keys.reloadConfig
onActivated: py.loadSettings(() => { mainUI.pressAnimation.start() })
onActivated: mainUI.reloadSettings()
}
HShortcut {

112
src/gui/MainPane/Account.qml
View File

@ -7,18 +7,17 @@ import "../Base"
HTileDelegate {
id: account
spacing: 0
topPadding: model.index > 0 ? theme.spacing / 2 : 0
bottomPadding: topPadding
rightPadding: 0
backgroundColor: theme.mainPane.account.background
opacity: collapsed && ! mainPane.filter ?
theme.mainPane.account.collapsedOpacity : 1
title.color: theme.mainPane.account.name
title.text: model.display_name || model.id
title.font.pixelSize: theme.fontSize.big
title.leftPadding: theme.spacing
title.color:
hovered ?
utils.nameColor(model.display_name || model.id.substring(1)) :
theme.mainPane.account.name
image: HUserAvatar {
userId: model.id
@ -68,63 +67,66 @@ HTileDelegate {
}
Behavior on title.color { HColorAnimation {} }
Behavior on opacity { HNumberAnimation {} }
HButton {
id: addChat
iconItem.small: true
icon.name: "add-chat"
backgroundColor: "transparent"
toolTip.text: qsTr("Add new chat")
onClicked: pageLoader.showPage(
"AddChat/AddChat", {userId: model.id},
)
HRowLayout {
HButton {
id: addChat
iconItem.small: true
icon.name: "add-chat"
backgroundColor: "transparent"
toolTip.text: qsTr("Add new chat")
onClicked: pageLoader.showPage(
"AddChat/AddChat", {userId: model.id},
)
leftPadding: theme.spacing / 2
rightPadding: leftPadding
leftPadding: theme.spacing / 2
rightPadding: leftPadding
opacity: expand.loading ? 0 : 1
visible: opacity > 0 && Layout.maximumWidth > 0
opacity: expand.loading ? 0 : 1
visible: opacity > 0 && Layout.maximumWidth > 0
Layout.fillHeight: true
Layout.maximumWidth:
account.width >= 100 * theme.uiScale ? implicitWidth : 0
Layout.fillHeight: true
Layout.maximumWidth:
account.width >= 100 * theme.uiScale ? implicitWidth : 0
Behavior on Layout.maximumWidth { HNumberAnimation {} }
Behavior on opacity { HNumberAnimation {} }
}
HButton {
id: expand
loading:
! model.first_sync_done || model.profile_updated < new Date(1)
iconItem.small: true
icon.name: "expand"
backgroundColor: "transparent"
toolTip.text: collapsed ? qsTr("Expand") : qsTr("Collapse")
onClicked: account.toggleCollapse()
leftPadding: theme.spacing / 2
rightPadding: leftPadding
opacity: ! loading && mainPane.filter ? 0 : 1
visible: opacity > 0 && Layout.maximumWidth > 0
Layout.fillHeight: true
Layout.maximumWidth:
account.width >= 120 * theme.uiScale ? implicitWidth : 0
iconItem.transform: Rotation {
origin.x: expand.iconItem.width / 2
origin.y: expand.iconItem.height / 2
angle: expand.loading ? 0 : collapsed ? 180 : 90
Behavior on angle { HNumberAnimation {} }
Behavior on Layout.maximumWidth { HNumberAnimation {} }
Behavior on opacity { HNumberAnimation {} }
}
Behavior on Layout.maximumWidth { HNumberAnimation {} }
Behavior on opacity { HNumberAnimation {} }
HButton {
id: expand
loading:
! model.first_sync_done || model.profile_updated < new Date(1)
iconItem.small: true
icon.name: "expand"
backgroundColor: "transparent"
toolTip.text: collapsed ? qsTr("Expand") : qsTr("Collapse")
onClicked: account.toggleCollapse()
leftPadding: theme.spacing / 2
rightPadding: theme.spacing
opacity: ! loading && mainPane.filter ? 0 : 1
visible: opacity > 0 && Layout.maximumWidth > 0
Layout.fillHeight: true
Layout.maximumWidth:
account.width >= 120 * theme.uiScale ? implicitWidth : 0
iconItem.transform: Rotation {
origin.x: expand.iconItem.width / 2
origin.y: expand.iconItem.height / 2
angle: expand.loading ? 0 : collapsed ? 180 : 90
Behavior on angle { HNumberAnimation {} }
}
Behavior on Layout.maximumWidth { HNumberAnimation {} }
Behavior on opacity { HNumberAnimation {} }
}
}
}

7
src/gui/MainPane/MainPane.qml
View File

@ -45,6 +45,12 @@ HDrawer {
HColumnLayout {
anchors.fill: parent
TopBar {
Layout.fillWidth: true
Layout.fillHeight: false
Layout.preferredHeight: theme.baseElementsHeight
}
AccountRoomsList {
id: mainPaneList
clip: true
@ -60,7 +66,6 @@ HDrawer {
Layout.fillWidth: true
Layout.fillHeight: false
Layout.preferredHeight: theme.baseElementsHeight
}
}
}

6
src/gui/MainPane/Room.qml
View File

@ -7,10 +7,14 @@ import ".."
import "../Base"
HTileDelegate {
spacing: theme.spacing
backgroundColor: theme.mainPane.room.background
opacity: model.left ? theme.mainPane.room.leftRoomOpacity : 1
topPadding: theme.spacing / (model.index === 0 ? 1 : 1.5)
bottomPadding: theme.spacing / (model.index === view.count - 1 ? 1 : 1.5)
leftPadding: theme.spacing * 2
rightPadding: theme.spacing
image: HRoomAvatar {
roomId: model.id
displayName: model.display_name

57
src/gui/MainPane/TopBar.qml Normal file
View File

@ -0,0 +1,57 @@
// SPDX-License-Identifier: LGPL-3.0-or-later
import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../Base"
Rectangle {
color: theme.mainPane.topBar.background
HRowLayout {
anchors.fill: parent
HButton {
icon.name: "placeholder-logo"
icon.color: theme.mainPane.topBar.placeholderLogo
text: qsTr("%1 %2")
.arg(Qt.application.displayName).arg(Qt.application.version)
label.color: theme.mainPane.topBar.nameVersionLabel
label.horizontalAlignment: Text.AlignLeft
toolTip.text: qsTr("Open project repository")
onClicked:
Qt.openUrlExternally("https://github.com/mirukan/mirage")
Layout.fillWidth: true
Layout.fillHeight: true
}
HButton {
icon.name: "developper-console"
toolTip.text: qsTr("Developper console")
onClicked: mainUI.shortcuts.toggleConsole() // FIXME
Layout.fillHeight: true
}
HButton {
icon.name: "reload-config-files"
toolTip.text: qsTr("Reload config files")
onClicked: mainUI.reloadSettings()
Layout.fillHeight: true
}
HButton {
icon.name: "settings"
toolTip.text: qsTr("Open config folder")
onClicked: py.callCoro("get_config_dir", [], Qt.openUrlExternally)
Layout.fillHeight: true
}
}
}

1
src/gui/Pages/Chat/Timeline/EventDelegate.qml
View File

@ -168,7 +168,6 @@ HColumnLayout {
HMenuItem {
icon.name: "debug"
text: qsTr("Debug this event")
visible: debugMode
onTriggered: eventContent.debugConsoleLoader.toggle()
}

5
src/gui/UI.qml
View File

@ -24,6 +24,11 @@ Item {
readonly property alias pressAnimation: pressAnimation
function reloadSettings() {
py.loadSettings(() => { mainUI.pressAnimation.start() })
}
SequentialAnimation {
id: pressAnimation
HNumberAnimation {

3
src/icons/thin/developper-console.svg Normal file
View File

@ -0,0 +1,3 @@
<svg height="1792" viewBox="0 0 1792 1792" width="1792" xmlns="http://www.w3.org/2000/svg">
<path d="m649 983-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23zm1079 457v64q0 14-9 23t-23 9h-960q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h960q14 0 23 9t9 23z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 354 B

3
src/icons/thin/placeholder-logo.svg Normal file
View File

@ -0,0 +1,3 @@
<svg clip-rule="evenodd" fill-rule="evenodd" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="m12 0-12 12.001 12 11.999 12.001-11.999zm-9.171 12.001 9.171-9.172 9.172 9.172-9.172 9.172z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 219 B

3
src/icons/thin/reload-config-files.svg Normal file
View File

@ -0,0 +1,3 @@
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="m14.408 24h-13.408v-24h10.189c3.163 0 9.811 7.223 9.811 9.614v2.068c-.622-.296-1.293-.502-2-.603v-.623c0-4.106-6-2.456-6-2.456s1.518-6-2.638-6h-7.362v20h9.26c.566.81 1.299 1.49 2.148 2zm2.257-8.669c.402-.206.852-.331 1.335-.331 1.455 0 2.67 1.042 2.941 2.418l1.96-.398c-.456-2.291-2.475-4.02-4.901-4.02-.957 0-1.845.278-2.604.745l-1.396-1.745-1 5h5zm5.335 8.669-1.396-1.745c-.759.467-1.647.745-2.604.745-2.426 0-4.445-1.729-4.901-4.02l1.96-.398c.271 1.376 1.486 2.418 2.941 2.418.483 0 .933-.125 1.335-.331l-1.335-1.669h5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 630 B

2
src/icons/thin/settings.svg
View File

@ -1,3 +1,3 @@
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="m24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/>
<path d="m24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 818 B

After

Width:  |  Height:  |  Size: 1.4 KiB

5
src/themes/Glass.qpl
View File

@ -256,6 +256,11 @@ ui:
mainPane:
color background: colors.mediumBackground
topBar:
color background: colors.strongBackground
color placeholderLogo: colors.accentElement
color nameVersionLabel: colors.text
account:
real collapsedOpacity: 0.3
color background: "transparent"

5
src/themes/Midnight.qpl
View File

@ -263,6 +263,11 @@ ui:
mainPane:
color background: colors.mediumBackground
topBar:
color background: colors.strongBackground
color placeholderLogo: colors.accentElement
color nameVersionLabel: colors.text
account:
real collapsedOpacity: 0.3
color background: "transparent"