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

Implement UI zooming

Browse Source
This commit is contained in:
miruka 2019-12-04 09:08:38 -04:00
parent 87a81ed1a7
commit 34e0ec7c7d
18 changed files with 61 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/python/config_files.py
View File

@ -121,6 +121,10 @@ class UISettings(JSONConfigFile):
"toggleDebugConsole": ["Alt+Shift+C"],
"reloadConfig": ["Alt+Shift+R"],
"zoomIn": ["Ctrl+Plus", "Ctrl+Shift+Plus"],
"zoomOut": ["Ctrl+Minus", "Ctrl+Shift+Minus"],
"zoomReset": ["Ctrl+Equal", "Ctrl+Backspace"],
"scrollUp": ["Alt+Up", "Alt+K"],
"scrollDown": ["Alt+Down", "Alt+J"],
"scrollPageUp": ["Alt+Ctrl+Up", "Alt+Ctrl+K", "PageUp"],

2
src/qml/Base/HCircleProgressBar.qml
View File

@ -3,7 +3,7 @@ import RadialBar 1.0
RadialBar {
id: bar
implicitWidth: 96
implicitWidth: 96 * (theme ? theme.uiScale : 1)
implicitHeight: implicitWidth
foregroundColor: theme.controls.circleProgressBar.background
progressColor: theme.controls.circleProgressBar.foreground

8
src/qml/Base/HIcon.qml
View File

@ -14,7 +14,13 @@ Image {
property string svgName: ""
property int dimension: 20
property bool small: false
property int dimension:
theme ?
(small ? theme.icons.smallDimension : theme.icons.dimension) :
(small ? 16 : 22)
property color colorize: theme.icons.colorize
property string iconPack: theme ? theme.icons.preferredPack : "thin"

1
src/qml/Base/HImage.qml
View File

@ -80,7 +80,6 @@ Image {
anchors.centerIn: parent
visible: broken || image.status === Image.Error
svgName: "broken-image"
dimension: Math.max(16, Math.min(parent.width, parent.height) * 0.2)
colorize: theme.colors.negativeBackground
}
}

3
src/qml/Base/HTile.qml
View File

@ -55,7 +55,8 @@ HButton {
visible: Layout.maximumWidth > 0
Layout.maximumWidth:
text && tile.width >= 160 ? implicitWidth : 0
text && tile.width >= 160 * theme.uiScale ?
implicitWidth : 0
Behavior on Layout.maximumWidth { HNumberAnimation {} }
}

2
src/qml/Base/HUserAvatar.qml
View File

@ -21,7 +21,7 @@ HAvatar {
z: 100
sourceComponent: HIcon {
dimension: 16
small: true
svgName: "user-power-" + (admin ? "100" : "50")
colorize: admin ?
theme.chat.roomSidePane.member.adminIcon :

2
src/qml/Base/MediaPlayer/OSDButton.qml
View File

@ -4,5 +4,5 @@ import "../../Base"
HButton {
backgroundColor: "transparent"
iconItem.dimension: theme.mediaPlayer.controls.iconHeight
iconItem.dimension: theme.mediaPlayer.controls.iconSize
}

1
src/qml/Chat/Banners/Banner.qml
View File

@ -42,7 +42,6 @@ Rectangle {
HIcon {
id: bannerIcon
dimension: bannerLabel.implicitHeight
visible: Boolean(svgName)
Layout.leftMargin: theme.spacing / 2

2
src/qml/Chat/Chat.qml
View File

@ -55,7 +55,7 @@ HPage {
HLoader {
source: ready ? "ChatSplitView.qml" : "../Base/HBusyIndicator.qml"
Layout.preferredWidth: ready ? -1 : 96
Layout.preferredWidth: ready ? -1 : 96 * theme.uiScale
Layout.preferredHeight: Layout.preferredWidth
Layout.fillWidth: ready
Layout.fillHeight: ready

1
src/qml/Chat/RoomHeader.qml
View File

@ -93,7 +93,6 @@ Rectangle {
HButton {
backgroundColor: "transparent"
icon.name: "room-view-" + modelData
iconItem.dimension: 22
height: parent.height
spacing: theme.spacing / 1.5
topPadding: 0

4
src/qml/Chat/RoomSidePane/MembersView.qml
View File

@ -50,17 +50,19 @@ HColumnLayout {
placeholderText: qsTr("Filter members")
backgroundColor: theme.chat.roomSidePane.filterMembers.background
bordered: false
opacity: width >= 16 ? 1 : 0
onTextChanged: filterLimiter.restart()
Layout.fillWidth: true
Layout.fillHeight: true
Behavior on opacity { HOpacityAnimator {} }
}
HButton {
enabled: false // TODO
icon.name: "room-send-invite"
iconItem.dimension: parent.height - 10
topPadding: 0
bottomPadding: 0
toolTip.text: qsTr("Invite to this room")

10
src/qml/Chat/Timeline/EventContent.qml
View File

@ -49,8 +49,12 @@ HRowLayout {
opacity: collapseAvatar ? 0 : 1
visible: ! hideAvatar
Layout.minimumWidth: 58
Layout.minimumHeight: collapseAvatar ? 1 : smallAvatar ? 28 : 58
Layout.minimumWidth: theme.chat.message.avatarSize
Layout.minimumHeight:
collapseAvatar ? 1 :
smallAvatar ? theme.chat.message.collapsedAvatarSize :
Layout.minimumWidth
Layout.maximumWidth: Layout.minimumWidth
Layout.maximumHeight: Layout.minimumHeight
Layout.alignment: Qt.AlignTop
@ -61,7 +65,7 @@ HRowLayout {
displayName: model.sender_name
mxc: model.sender_avatar
width: parent.width
height: collapseAvatar ? 1 : 58
height: collapseAvatar ? 1 : theme.chat.message.avatarSize
}
}

2
src/qml/Pages/AccountSettings/AccountSettings.qml
View File

@ -7,7 +7,7 @@ import "../../utils.js" as Utils
HPage {
id: accountSettings
property int avatarPreferredSize: 256
property int avatarPreferredSize: 256 * theme.uiScale
property string userId: ""

2
src/qml/Pages/AccountSettings/Profile.qml
View File

@ -95,7 +95,7 @@ HGridLayout {
svgName: "upload-avatar"
colorize: (! avatar.mxc && overlayHover.hovered) ?
theme.colors.accentText : theme.icons.colorize
dimension: 64
dimension: avatar.width / 3
Layout.alignment: Qt.AlignCenter
}

1
src/qml/Pages/SignIn.qml
View File

@ -101,7 +101,6 @@ HPage {
HButton {
icon.name: modelData
iconItem.dimension: 24
circle: true
checked: loginWith == modelData
enabled: modelData == "username"

15
src/qml/Shortcuts.qml
View File

@ -33,6 +33,21 @@ HShortcutHandler {
onPressed: py.loadSettings(() => { mainUI.pressAnimation.start() })
}
HShortcut {
sequences: settings.keys.zoomIn
onPressed: theme.uiScale += 0.1
}
HShortcut {
sequences: settings.keys.zoomOut
onPressed: theme.uiScale = Math.max(0.1, theme.uiScale - 0.1)
}
HShortcut {
sequences: settings.keys.zoomReset
onPressed: theme.uiScale = 1
}
// Pages
HShortcut {

4
src/qml/SidePane/AccountDelegate.qml
View File

@ -58,7 +58,7 @@ HTileDelegate {
HButton {
id: addChat
iconItem.dimension: 16
iconItem.small: true
icon.name: "add-chat"
backgroundColor: "transparent"
toolTip.text: qsTr("Add new chat")
@ -80,7 +80,7 @@ HTileDelegate {
HButton {
id: expand
loading: ! model.data.first_sync_done || ! model.data.profile_updated
iconItem.dimension: addChat.iconItem.dimension
iconItem.small: true
icon.name: "expand"
backgroundColor: "transparent"
toolTip.text: collapsed ? qsTr("Expand") : qsTr("Collapse")

28
src/themes/Default.qpl
View File

@ -2,11 +2,7 @@
// Base variables
real uiScale: 1.0 /* TODO: Implement correctly, do not change for now */
real fontScale: uiScale
Behavior on uiScale { HNumberAnimation {} }
Behavior on fontScale { HNumberAnimation {} }
real uiScale: 1.0
int minimumSupportedWidth: 240 * uiScale
int minimumSupportedHeight: 120 * uiScale
@ -17,19 +13,19 @@ int minimumSupportedHeightPlusSpacing: minimumSupportedHeight + spacing * 2
int baseElementsHeight: 36 * uiScale
int spacing: 12 * uiScale
int radius: 5
int radius: 5 * uiScale
int animationDuration: 100
real loadingElementsOpacity: 0.8
real disabledElementsOpacity: 0.3
fontSize:
int smaller: 13 * fontScale
int small: 13 * fontScale
int normal: 16 * fontScale
int big: 22 * fontScale
int bigger: 32 * fontScale
int biggest: 48 * fontScale
int smaller: 13 * uiScale
int small: 13 * uiScale
int normal: 16 * uiScale
int big: 22 * uiScale
int bigger: 32 * uiScale
int biggest: 48 * uiScale
fontFamily:
string sans: "Roboto"
@ -94,6 +90,9 @@ icons:
color colorize: hsluv(0, 0, colors.intensity * 90)
color disabledColorize: "white"
int smallDimension: 16 * uiScale
int dimension: 22 * uiScale
// Generic UI controls
@ -318,6 +317,9 @@ chat:
color background: "transparent"
message:
int avatarSize: 58 * uiScale
int collapsedAvatarSize: 28 * uiScale
int radius: theme.radius
color background: colors.strongBackground
color ownBackground: hsluv(
@ -408,7 +410,7 @@ mediaPlayer:
color background: hsluv(0, 0, 0, 0.5)
controls:
int iconHeight: 20
int iconSize: icons.dimension
int volumeSliderWidth: 100
int speedSliderWidth: 100
color background: hsluv(