From 32b617d3ecff7595dd5e10e77cf1e1b07f71e8a5 Mon Sep 17 00:00:00 2001 From: erinn Date: Thu, 17 Dec 2020 08:10:57 -0800 Subject: [PATCH] new scaling system pass two --- go/ui/gcd.go | 25 +++------- go/ui/settings.go | 8 +-- qml/main.qml | 11 ++--- qml/opaque | 2 +- qml/overlays/ChatOverlay.qml | 8 ++- qml/panes/AddPeerGroupPane.qml | 85 ++++++++++++++++++-------------- qml/panes/PeerSettingsPane.qml | 3 +- qml/panes/ProfileAddEditPane.qml | 41 ++++++++------- qml/panes/ProfileManagerPane.qml | 6 +-- qml/panes/SettingsPane.qml | 7 ++- qml/panes/SplashPane.qml | 8 +-- qml/widgets/ContactList.qml | 19 ++----- qml/widgets/ContactRow.qml | 26 +++++----- qml/widgets/Message.qml | 9 ++-- qml/widgets/MessageEditor.qml | 31 ++++++------ qml/widgets/ProfileList.qml | 2 +- qml/widgets/ProfileRow.qml | 2 +- qml/widgets/ServerList.qml | 2 +- qml/widgets/Statusbar.qml | 20 ++++---- 19 files changed, 144 insertions(+), 171 deletions(-) diff --git a/go/ui/gcd.go b/go/ui/gcd.go index 2ee99c44..2a55557e 100644 --- a/go/ui/gcd.go +++ b/go/ui/gcd.go @@ -42,12 +42,7 @@ type GrandCentralDispatcher struct { _ int `property:"torStatus"` _ string `property:"os"` _ bool `property:"firstTime"` - // phasing out themeScale in three steps: - // 1 (current): switch labels to themeScaleNew - // 2: switch everything else to themeScaleNew - // 3: refactor: delete themeScale, rename themeScaleNew -> themeScale - _ float32 `property:"themeScale,auto,changed"` - _ int `property:"themeScaleNew,auto,changed"` + _ int `property:"scaleFactor,auto,changed"` _ string `property:"theme,auto,changed"` _ string `property:"locale,auto,changed"` _ string `property:"version"` @@ -103,7 +98,7 @@ type GrandCentralDispatcher struct { // settings helpers _ func(str string) `signal:"InvokePopup"` - _ func(locale string, zoom float32, theme string) `signal:"SupplySettings"` + _ func(locale string, scale int, theme string) `signal:"SupplySettings"` _ func(groupID, name, server, invitation string, accepted bool, addrbooknames, addrbookaddrs []string) `signal:"SupplyGroupSettings"` _ func(onion, nick string, authorization string, storage string) `signal:"SupplyPeerSettings"` _ func(server string, key_types []string, keys []string) `signal:"SupplyServerSettings"` @@ -111,8 +106,8 @@ type GrandCentralDispatcher struct { // signals emitted from the ui (and implemented in go, below) // ui _ func() `signal:"onActivate,auto"` - _ func(pane int) `signal:"setRootPaneState",auto` - _ func(pane int) `signal:"setProfilePaneState",auto` + _ func(pane int) `signal:"setRootPaneState,auto"` + _ func(pane int) `signal:"setProfilePaneState,auto"` // profile managemenet _ func(onion, nick string) `signal:"updateNick,auto"` _ func(handle string) `signal:"loadProfile,auto"` @@ -163,8 +158,7 @@ func (this *GrandCentralDispatcher) init() { firstTime := false this.GlobalSettings, firstTime = ReadGlobalSettings() this.SetFirstTime(firstTime) - this.SetThemeScale(this.GlobalSettings.Zoom) - this.SetThemeScaleNew(this.GlobalSettings.Scale) + this.SetScaleFactor(this.GlobalSettings.Scale) this.SetTheme(this.GlobalSettings.Theme) this.SetExperimentsEnabled(this.GlobalSettings.ExperimentsEnabled) this.SetExperiments(this.GlobalSettings.Experiments) @@ -460,7 +454,7 @@ func (this *GrandCentralDispatcher) legacyLoadOverlay_helper(handle string, over } func (this *GrandCentralDispatcher) requestSettings() { - this.SupplySettings(this.GlobalSettings.Locale, this.GlobalSettings.Zoom, this.GlobalSettings.Theme) + this.SupplySettings(this.GlobalSettings.Locale, this.GlobalSettings.Scale, this.GlobalSettings.Theme) } func (this *GrandCentralDispatcher) saveSettings(zoom, locale string) { @@ -780,12 +774,7 @@ func (this *GrandCentralDispatcher) setLocaleHelper(locale string) { this.QMLEngine.Retranslate() } -func (this *GrandCentralDispatcher) themeScaleChanged(newThemeScale float32) { - this.GlobalSettings.Zoom = newThemeScale - WriteGlobalSettings(this.GlobalSettings) -} - -func (this *GrandCentralDispatcher) themeScaleNewChanged(newScale int) { +func (this *GrandCentralDispatcher) scaleFactorChanged(newScale int) { this.GlobalSettings.Scale = newScale WriteGlobalSettings(this.GlobalSettings) } diff --git a/go/ui/settings.go b/go/ui/settings.go index f6abab32..dee873de 100644 --- a/go/ui/settings.go +++ b/go/ui/settings.go @@ -9,15 +9,13 @@ import ( "io/ioutil" "os" "path" - "runtime" ) const GlobalSettingsFilename = "ui.globals" const saltFile = "SALT" type GlobalSettings struct { - Zoom float32 // deprecated - Scale int // the new hotness + Scale int Locale string Theme string PreviousPid int64 @@ -27,7 +25,6 @@ type GlobalSettings struct { } var DefaultGlobalSettings = GlobalSettings{ - Zoom: 1.9, Scale: 2, Locale: "en", Theme: "light", @@ -61,9 +58,6 @@ func InitGlobalSettingsFile(directory string, password string) error { func ReadGlobalSettings() (*GlobalSettings, bool) { settings := DefaultGlobalSettings - if runtime.GOOS == "android" { - settings.Zoom = 2.9 - } settings.Locale = core.QLocale_System().Name() settingsBytes, err := the.GlobalSettingsFile.Read() diff --git a/qml/main.qml b/qml/main.qml index 321261dd..8d735914 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -40,17 +40,17 @@ ApplicationWindow { retText = retText.replace(/\n/g,"
").replace(/\s\s/g, "  ") // mutant standard stickers - if (isntEditable) retText = Mutant.standard.parse(retText, 1.5 * gcd.themeScale * Theme.chatSize) + if (isntEditable) retText = Mutant.standard.parse(retText, ptToPx(Theme.chatSize)) return retText } function ptToPx(pt) { - return Screen.pixelDensity * 25.4 * pt / 72 + return Math.floor(Screen.pixelDensity * 25.4 * pt / 72) } function pxToPt(px) { - return px * 72 / (Screen.pixelDensity * 25.4) + return Math.floor(px * 72 / (Screen.pixelDensity * 25.4)) } StackView { @@ -199,7 +199,6 @@ ApplicationWindow { anchors.left: parent.left anchors.bottom: parent.bottom anchors.right: (divider.visible ? divider.left : parent.right) - //anchors.topMargin: 10 * gcd.themeScale dualPane: theStack.pane != theStack.emptyPane || theStack.pane == undefined } @@ -207,7 +206,7 @@ ApplicationWindow { id: divider width: 2 anchors.right: parent.right - height: parent.height - (20 * gcd.themeScale) + height: parent.height - 2 * Theme.paddingStandard anchors.verticalCenter: parent.verticalCenter visible: theStack.pane != theStack.emptyPane //Layout.fillHeight: true @@ -244,7 +243,7 @@ ApplicationWindow { Layout.fillHeight: true OverlayPane { // messagePane anchors.fill: parent - anchors.topMargin: 10// * gcd.themeScale + anchors.topMargin: Theme.paddingSmall } } diff --git a/qml/opaque b/qml/opaque index 136e613a..10123e56 160000 --- a/qml/opaque +++ b/qml/opaque @@ -1 +1 @@ -Subproject commit 136e613ab596ae70edfa73fc6019f5dde44e0a08 +Subproject commit 10123e56a6a6d251c0ff707e793de857250d7ad4 diff --git a/qml/overlays/ChatOverlay.qml b/qml/overlays/ChatOverlay.qml index 76539d95..dd48c9a6 100644 --- a/qml/overlays/ChatOverlay.qml +++ b/qml/overlays/ChatOverlay.qml @@ -16,8 +16,6 @@ W.Overlay { property bool loading property string historyState: "DefaultDeleteHistory" - //horizontalPadding: 15 * gcd.themeScale - Connections { target: mm onRowsInserted: { @@ -137,7 +135,7 @@ W.Overlay { property string txt: section color: Theme.backgroundMainColor width: parent.width - height: texmet.height + 6 + 12// * gcd.themeScale + height: texmet.height + 6 + 2 * Theme.paddingSmall anchors.horizontalCenter: parent.horizontalCenter @@ -156,7 +154,7 @@ W.Overlay { // ... and this can be changed to // text: parent.parent.section text: parent.parent.txt - font.pixelSize: Theme.chatSize * gcd.themeScale + font.pointSize: Theme.textSmallPt color: Theme.messageFromOtherTextColor anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -165,7 +163,7 @@ W.Overlay { TextMetrics { id: texmet text: txtDate.text - font.pixelSize: Theme.chatSize * gcd.themeScale + font: txtDate.font } } } diff --git a/qml/panes/AddPeerGroupPane.qml b/qml/panes/AddPeerGroupPane.qml index fc9bf988..83f505f7 100644 --- a/qml/panes/AddPeerGroupPane.qml +++ b/qml/panes/AddPeerGroupPane.qml @@ -27,13 +27,15 @@ Rectangle { groupAddr.text = "" onionLabel.text = gcd.selectedProfile + gcd.requestPeeredServers() + } Column { anchors.fill: parent - spacing: 25 * gcd.themeScale - leftPadding: 20 * gcd.themeScale - rightPadding: 20 * gcd.themeScale + spacing: Theme.paddingSmall + leftPadding: Theme.paddingStandard + rightPadding: Theme.paddingStandard Opaque.Label { id: shareLabel @@ -54,7 +56,7 @@ Rectangle { anchors.horizontalCenter: parent.horizontalCenter readOnly: true - width: parent.width - (40*gcd.themeScale) + width: parent.width - (2 * Theme.paddingStandard) button_text: qsTr("copy-btn") dropShadowColor: Theme.dropShadowPaneColor @@ -68,7 +70,7 @@ Rectangle { Rectangle { // Spacer width: 1 - height: 25 * gcd.themeScale + height: Theme.paddingStandard color: root.color } @@ -89,16 +91,16 @@ Rectangle { Column { // Add a peer Layout.fillWidth: true - leftPadding: 20 * gcd.themeScale - rightPadding: 20 * gcd.themeScale - spacing: 25 * gcd.themeScale + leftPadding: Theme.paddingStandard + rightPadding: Theme.paddingStandard + spacing: Theme.paddingSmall Opaque.UnderlineTextField { id: peerAddr backgroundColor: Theme.backgroundPaneColor - width: parent.width - (40*gcd.themeScale) + width: parent.width - (2 * Theme.paddingStandard) anchors.horizontalCenter: parent.horizontalCenter //: Address @@ -110,7 +112,7 @@ Rectangle { id: peerName backgroundColor: Theme.backgroundPaneColor - width: parent.width - (40*gcd.themeScale) + width: parent.width - (2 * Theme.paddingStandard) anchors.horizontalCenter: parent.horizontalCenter //: Name @@ -121,9 +123,9 @@ Rectangle { Column { // Create a group Layout.fillWidth: true - leftPadding: 20 * gcd.themeScale - rightPadding: 20 * gcd.themeScale - spacing: 25 * gcd.themeScale + leftPadding: Theme.paddingStandard + rightPadding: Theme.paddingStandard + spacing: Theme.paddingSmall Opaque.UnderlineTextField { @@ -131,7 +133,7 @@ Rectangle { id: groupNameCreate backgroundColor: Theme.backgroundPaneColor - width: parent.width - (40*gcd.themeScale) + width: parent.width - (2 * Theme.paddingStandard) anchors.horizontalCenter: parent.horizontalCenter //: Group Name @@ -139,24 +141,18 @@ Rectangle { } - Row { - width: parent.width - (40*gcd.themeScale) - - Column { - visible: gcd.experimentsEnabled && Utils.checkMap(gcd.experiments, "tapir-groups-experiment") - width: parent.width / 2 - Opaque.Label { - //: Server - text: qsTr("server") - } + Column { + width: parent.width - (2 * Theme.paddingStandard) + anchors.horizontalCenter: parent.horizontalCenter + visible: gcd.experimentsEnabled && Utils.checkMap(gcd.experiments, "tapir-groups-experiment") + Opaque.Label { + //: Server + text: qsTr("server") } - - Column { - visible: gcd.experimentsEnabled && Utils.checkMap(gcd.experiments, "tapir-groups-experiment") - width: parent.width / 2 - Opaque.Label { - //: Invitation - text: qsTr("invitation") + Opaque.ComboBox { + width:parent.width + model: ListModel { + id: cbServerList } } } @@ -164,9 +160,9 @@ Rectangle { Column { // Join a group Layout.fillWidth: true - leftPadding: 20 * gcd.themeScale - rightPadding: 20 * gcd.themeScale - spacing: 25 * gcd.themeScale + leftPadding: Theme.paddingStandard + rightPadding: Theme.paddingStandard + spacing: Theme.paddingSmall Opaque.UnderlineTextField { @@ -174,7 +170,7 @@ Rectangle { id: groupAddr backgroundColor: Theme.backgroundPaneColor - width: parent.width - (40*gcd.themeScale) + width: parent.width - (2 * Theme.paddingStandard) anchors.horizontalCenter: parent.horizontalCenter //: Address @@ -187,7 +183,7 @@ Rectangle { Rectangle { // Spacer width: 1 - height: 25 * gcd.themeScale + height: Theme.paddingStandard color: root.color } @@ -195,8 +191,6 @@ Rectangle { Opaque.Button { anchors.horizontalCenter: parent.horizontalCenter - height: 40 * gcd.themeScale - //: Add Peer | Create Group | Join Group text: tabBar.currentItem.text @@ -204,6 +198,9 @@ Rectangle { if (tabBar.currentIndex == 0) { gcd.addPeer(peerName.text, peerAddr.text) theStack.currentIndex = theStack.emptyPane + } else if (tabBar.currentIndex == 1) { + gcd.createGroup(cbServerList.get(cbServerList.selectedIndex).text, groupNameCreate.text); + theStack.currentIndex = theStack.emptyPane } else if (tabBar.currentIndex == 2) { gcd.addGroup(groupAddr.text) theStack.currentIndex = theStack.emptyPane @@ -213,4 +210,16 @@ Rectangle { } + Connections { + target: gcd + + onSupplyPeeredServers: function(servers) { + console.log("Servers are here:!" + servers); + cbServerList.clear(); + for (var i=0;i 99 ? "99+" : badge } @@ -71,16 +71,16 @@ Opaque.PortraitRow { visible: authorization == Const.auth_unknown anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: 1 * gcd.themeScale - anchors.rightMargin: 25 * gcd.themeScale - spacing: 16 * gcd.themeScale + anchors.leftMargin: Theme.paddingMinimal + anchors.rightMargin: Theme.paddingStandard + spacing: Theme.paddingSmall Opaque.Icon { source: gcd.assetPath + "core/favorite-24px.webp" iconColor: Theme.toolbarIconColor backgroundColor: rowColor - height: 18 * gcd.themeScale - width: 18 * gcd.themeScale + height: Theme.uiIconSizeS + width: Theme.uiIconSizeS onClicked: { gcd.setPeerAuthorization(handle, Const.auth_approved)} } @@ -89,8 +89,8 @@ Opaque.PortraitRow { source: gcd.assetPath + "core/delete-24px.webp" iconColor: Theme.toolbarIconColor backgroundColor: rowColor - height: 18 * gcd.themeScale - width: 18 * gcd.themeScale + height: Theme.uiIconSizeS + width: Theme.uiIconSizeS onClicked: gcd.setPeerAuthorization(handle, Const.auth_blocked) } diff --git a/qml/widgets/Message.qml b/qml/widgets/Message.qml index bbac2a6d..441609a3 100644 --- a/qml/widgets/Message.qml +++ b/qml/widgets/Message.qml @@ -29,8 +29,6 @@ Rectangle { property string error property bool calendarEvent - property real logscale: 4 * Math.log10(gcd.themeScale + 1) - Connections { target: gcd @@ -86,10 +84,10 @@ Rectangle { Rectangle { // THIS IS JUST A PRETTY MESSAGE-HOLDING RECTANGLE id: rectMessageBubble - height: (handle.visible ? handle.height : 0) + (10 * gcd.themeScale) + colMessageBubble.height + 8 - width: colMessageBubble.width + 6 + height: (handle.visible ? handle.height : 0) + colMessageBubble.height + 2 * Theme.paddingMinimal + width: colMessageBubble.width + 2 * Theme.radiusM color: fromMe ? Theme.messageFromMeBackgroundColor : (calendarEvent ? Theme.messageFromOtherBackgroundColor : Theme.messageFromOtherBackgroundColor) - radius: 15 * logscale + radius: Theme.radiusL anchors.left: fromMe ? undefined : (calendarEvent ? undefined : imgProfile.right) //parent.left anchors.right: fromMe ? (calendarEvent ? undefined : parent.right) : undefined @@ -125,7 +123,6 @@ Rectangle { bold: true leftPadding: Theme.paddingSmall rightPadding: Theme.paddingSmall - topPadding: Theme.paddingSmall } Column { diff --git a/qml/widgets/MessageEditor.qml b/qml/widgets/MessageEditor.qml index e6291e3d..8b275a17 100644 --- a/qml/widgets/MessageEditor.qml +++ b/qml/widgets/MessageEditor.qml @@ -58,7 +58,7 @@ ColumnLayout { Opaque.EmojiDrawer { id: emojiDrawer Layout.fillWidth: true - size: 24 * gcd.themeScale + size: Theme.uiIconSizeM onPicked: function(shortcode) { if (!txtMessage.enabled) return @@ -71,7 +71,7 @@ ColumnLayout { Layout.fillWidth: true - height: statusText.visible ? statusText.height + (4 * gcd.themeScale) : 3 * gcd.themeScale + height: statusText.visible ? statusText.height + (2 * Theme.paddingMinimal) : Theme.paddingMinimal implicitHeight: height color: Theme.dividerColor @@ -97,8 +97,8 @@ ColumnLayout { Rectangle { // MESSAGE ENTRY TEXTFIELD id: rectMessage Layout.fillWidth: true - Layout.minimumHeight: 120 * gcd.themeScale - Layout.maximumHeight: 120 * gcd.themeScale + Layout.minimumHeight: 60 + 20 * Theme.scale + Layout.maximumHeight: 60 + 20 * Theme.scale color: Theme.backgroundMainColor Opaque.Flickable { @@ -109,9 +109,9 @@ ColumnLayout { TextArea { id: txtMessage - font.pixelSize: Theme.chatSize * gcd.themeScale + font.pointSize: Theme.chatSize text: "" - padding: 6 * gcd.themeScale + padding: Theme.paddingSmall wrapMode: TextEdit.Wrap textFormat: Text.PlainText width: rectMessage.width @@ -152,7 +152,7 @@ ColumnLayout { ColumnLayout { id: colRight spacing: 0 - width: 100 * gcd.themeScale + width: Theme.uiIconSizeM + 2 * Theme.paddingStandard Layout.minimumWidth: width Layout.preferredWidth: width @@ -162,9 +162,8 @@ ColumnLayout { id: btnSend source: gcd.assetPath + "core/send-24px.webp" width: colRight.width - // floor(...) needed or else send icon won't scale properly(?!?) - height: Math.floor(50 * gcd.themeScale) - size: 36 * gcd.themeScale + height: Theme.uiIconSizeM + 2 * Theme.paddingMinimal + size: Theme.uiIconSizeM sourceWidth: size sourceHeight: size @@ -191,9 +190,9 @@ ColumnLayout { id: btnEmoji source: gcd.assetPath + "core/mood-24px.webp" - size: 25 - height: 36 * gcd.themeScale - width: 48 * gcd.themeScale + size: Theme.uiIconSizeS + height: Theme.uiIconSizeS + 2 * Theme.paddingMinimal + width: colRight.width / 2 backgroundColor: enabled ? Theme.altButtonColor : Theme.altButtonDisabledColor hilightBackgroundColor: backgroundColor @@ -206,9 +205,9 @@ ColumnLayout { id: btnAttach source: gcd.assetPath + "core/attach_file-24px.webp" - size: 25 - height: 36 * gcd.themeScale - width: 48 * gcd.themeScale + size: Theme.uiIconSizeS + height: Theme.uiIconSizeS + 2 * Theme.paddingMinimal + width: colRight.width / 2 backgroundColor: enabled ? Theme.altButtonColor : Theme.altButtonDisabledColor hilightBackgroundColor: backgroundColor diff --git a/qml/widgets/ProfileList.qml b/qml/widgets/ProfileList.qml index 22ab1e67..493c86cf 100644 --- a/qml/widgets/ProfileList.qml +++ b/qml/widgets/ProfileList.qml @@ -114,7 +114,7 @@ ColumnLayout { badgeVisible: true badgeContent: Image { source: gcd.assetPath + "core/fontawesome/solid/plus.webp" - height: Theme.badgeTextSize * gcd.themeScale + height: Theme.uiIconSizeS width: height } badgeColor: Theme.portraitProfileBadgeColor diff --git a/qml/widgets/ProfileRow.qml b/qml/widgets/ProfileRow.qml index 9c751f17..48790728 100644 --- a/qml/widgets/ProfileRow.qml +++ b/qml/widgets/ProfileRow.qml @@ -36,7 +36,7 @@ RowLayout { badgeContent: Opaque.Icon {// Profle Type id: profiletype source: tag == "v1-userPassword" ? gcd.assetPath + "core/lock-24px.webp" : gcd.assetPath + "core/lock_open-24px.webp" - height: Theme.badgeTextSize * gcd.themeScale + height: Theme.uiIconSizeS width: height iconColor: Theme.defaultButtonTextColor diff --git a/qml/widgets/ServerList.qml b/qml/widgets/ServerList.qml index d56561c9..fb555d12 100644 --- a/qml/widgets/ServerList.qml +++ b/qml/widgets/ServerList.qml @@ -104,7 +104,7 @@ ColumnLayout { badgeVisible: true badgeContent: Image { source: gcd.assetPath + "core/fontawesome/solid/plus.webp" - height: Theme.badgeTextSize * gcd.themeScale + height: Theme.uiIconSizeS width: height } badgeColor: Theme.defaultButtonColor diff --git a/qml/widgets/Statusbar.qml b/qml/widgets/Statusbar.qml index d1b60ed0..03ce203a 100644 --- a/qml/widgets/Statusbar.qml +++ b/qml/widgets/Statusbar.qml @@ -12,8 +12,8 @@ import "../const" Rectangle { id: statusbar - readonly property int openHeight: 25 - readonly property int hideHeight: 10 + readonly property int openHeight: Theme.uiIconSizeS + 2 * Theme.paddingMinimal + readonly property int hideHeight: Theme.paddingClickTarget property bool isHover: false @@ -27,9 +27,9 @@ Rectangle { opacity: 0 anchors.right: networkStatus.left anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: 5 * gcd.themeScale + anchors.rightMargin: Theme.paddingMinimal - font.pixelSize: Theme.statusTextSize * gcd.themeScale + font.pixelSize: Theme.statusTextSize } Opaque.Icon { @@ -37,9 +37,9 @@ Rectangle { opacity: 0 anchors.right: connectionStatus.left anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: 5 * gcd.themeScale - height: 18 - width: 18 + anchors.rightMargin: Theme.paddingMinimal + height: Theme.uiIconSizeS + width: Theme.uiIconSizeS } @@ -48,9 +48,9 @@ Rectangle { opacity: 0 anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: 10 * gcd.themeScale - height: 18 * gcd.themeScale - width: 18 * gcd.themeScale + anchors.rightMargin: Theme.paddingSmall + height: Theme.uiIconSizeS + width: Theme.uiIconSizeS } function changeStatus() {