Warning, /network/neochat/src/qml/AppearanceSettingsPage.qml is written in an unsupported language. File is not indexed.

0001 // SPDX-FileCopyrightText: 2020 Tobias Fella <tobias.fella@kde.org>
0002 // SPDX-FileCopyrightText: 2021 Carl Schwan <carl@carlschwan.eu>
0003 // SPDX-License-Identifier: GPL-2.0-or-later
0004 
0005 import QtQuick
0006 import QtQuick.Controls as QQC2
0007 import QtQuick.Layouts
0008 
0009 import org.kde.kirigami as Kirigami
0010 import org.kde.kirigamiaddons.formcard as FormCard
0011 import org.kde.kirigamiaddons.labs.components as KirigamiComponents
0012 
0013 import org.kde.neochat
0014 import org.kde.neochat.config
0015 
0016 FormCard.FormCardPage {
0017     id: root
0018 
0019     title: i18nc("@title:window", "Appearance")
0020 
0021     FormCard.FormHeader {
0022         title: i18n("General theme")
0023     }
0024     FormCard.FormCard {
0025         FormCard.AbstractFormDelegate {
0026             id: timelineModeSetting
0027             background: Item {}
0028             contentItem: RowLayout {
0029                 Layout.alignment: Qt.AlignCenter
0030                 spacing: Kirigami.Units.largeSpacing
0031                 Item {
0032                     Layout.fillWidth: true
0033                 }
0034                 QQC2.ButtonGroup { id: themeGroup }
0035                 ThemeRadioButton {
0036                     thin: timelineModeSetting.width < Kirigami.Units.gridUnit * 22
0037                     innerObject: [
0038                         RowLayout {
0039                             Layout.fillWidth: true
0040                             KirigamiComponents.Avatar {
0041                                 color: "#4a5bcc"
0042                                 Layout.alignment: Qt.AlignTop
0043                                 visible: Config.showAvatarInTimeline
0044                                 Layout.preferredWidth: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing * 2 : 0
0045                                 Layout.preferredHeight: Kirigami.Units.largeSpacing * 2
0046                             }
0047                             QQC2.Control {
0048                                 Layout.fillWidth: true
0049                                 contentItem: ColumnLayout {
0050                                     QQC2.Label {
0051                                         Layout.fillWidth: true
0052                                         font.weight: Font.Bold
0053                                         font.pixelSize: 7
0054                                         text: "Paul Müller"
0055                                         color: "#4a5bcc"
0056                                         wrapMode: Text.Wrap
0057                                     }
0058                                     QQC2.Label {
0059                                         Layout.fillWidth: true
0060                                         text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis porta mauris, quis finibus sem suscipit tincidunt."
0061                                         wrapMode: Text.Wrap
0062                                         font.pixelSize: 7
0063                                     }
0064                                 }
0065                                 background: Kirigami.ShadowedRectangle {
0066                                     color: Kirigami.Theme.backgroundColor
0067                                     radius: Kirigami.Units.smallSpacing
0068                                     shadow.size: Kirigami.Units.smallSpacing
0069                                     shadow.color: Qt.rgba(0.0, 0.0, 0.0, 0.10)
0070                                     border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
0071                                     border.width: 1
0072                                 }
0073                             }
0074                         },
0075                         RowLayout {
0076                             Layout.fillWidth: true
0077                             KirigamiComponents.Avatar {
0078                                 color: "#9f244b"
0079                                 Layout.alignment: Qt.AlignTop
0080                                 visible: Config.showAvatarInTimeline
0081                                 Layout.preferredWidth: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing * 2 : 0
0082                                 Layout.preferredHeight: Kirigami.Units.largeSpacing * 2
0083                             }
0084                             QQC2.Control {
0085                                 Layout.fillWidth: true
0086                                 contentItem: ColumnLayout {
0087                                     QQC2.Label {
0088                                         Layout.fillWidth: true
0089                                         font.weight: Font.Bold
0090                                         font.pixelSize: 7
0091                                         text: "Jean Paul"
0092                                         color: "#9f244b"
0093                                         wrapMode: Text.Wrap
0094                                     }
0095                                     QQC2.Label {
0096                                         Layout.fillWidth: true
0097                                         text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis porta , quis sem suscipit tincidunt."
0098                                         wrapMode: Text.Wrap
0099                                         font.pixelSize: 7
0100                                     }
0101                                 }
0102                                 background: Kirigami.ShadowedRectangle {
0103                                     color: Kirigami.Theme.backgroundColor
0104                                     radius: Kirigami.Units.smallSpacing
0105                                     shadow.size: Kirigami.Units.smallSpacing
0106                                     shadow.color: Qt.rgba(0.0, 0.0, 0.0, 0.10)
0107                                     border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
0108                                     border.width: 1
0109                                 }
0110                             }
0111                         }
0112                     ]
0113 
0114                     text: i18n("Bubbles")
0115                     checked: !Config.compactLayout
0116                     QQC2.ButtonGroup.group: themeGroup
0117                     enabled: !Config.isCompactLayoutImmutable
0118 
0119                     onToggled: {
0120                         Config.compactLayout = !checked;
0121                         Config.save();
0122                     }
0123                 }
0124                 ThemeRadioButton {
0125                     // Layout.alignment: Qt.AlignRight
0126                     thin: timelineModeSetting.width < Kirigami.Units.gridUnit * 22
0127                     innerObject: [
0128                         RowLayout {
0129                             Layout.fillWidth: true
0130                             KirigamiComponents.Avatar {
0131                                 color: "#4a5bcc"
0132                                 Layout.alignment: Qt.AlignTop
0133                                 visible: Config.showAvatarInTimeline
0134                                 Layout.preferredWidth: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing * 2 : 0
0135                                 Layout.preferredHeight: Kirigami.Units.largeSpacing * 2
0136                             }
0137                             ColumnLayout {
0138                                 Layout.fillWidth: true
0139                                 QQC2.Label {
0140                                     Layout.fillWidth: true
0141                                     font.weight: Font.Bold
0142                                     font.pixelSize: 7
0143                                     text: "Paul Müller"
0144                                     color: "#4a5bcc"
0145                                     wrapMode: Text.Wrap
0146                                 }
0147                                 QQC2.Label {
0148                                     Layout.fillWidth: true
0149                                     text: "Lorem ipsum dolor sit amet, consectetur elit. Vivamus facilisis porta mauris, finibus sem suscipit tincidunt."
0150                                     wrapMode: Text.Wrap
0151                                     font.pixelSize: 7
0152                                 }
0153                             }
0154                         },
0155                         RowLayout {
0156                             Layout.fillWidth: true
0157                             KirigamiComponents.Avatar {
0158                                 color: "#9f244b"
0159                                 Layout.alignment: Qt.AlignTop
0160                                 visible: Config.showAvatarInTimeline
0161                                 Layout.preferredWidth: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing * 2 : 0
0162                                 Layout.preferredHeight: Kirigami.Units.largeSpacing * 2
0163                             }
0164                             ColumnLayout {
0165                                 Layout.fillWidth: true
0166                                 QQC2.Label {
0167                                     Layout.fillWidth: true
0168                                     font.weight: Font.Bold
0169                                     font.pixelSize: 7
0170                                     text: "Jean Paul"
0171                                     color: "#9f244b"
0172                                     wrapMode: Text.Wrap
0173                                 }
0174                                 QQC2.Label {
0175                                     Layout.fillWidth: true
0176                                     text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis porta mauris, quis finibus sem suscipit tincidunt."
0177                                     wrapMode: Text.Wrap
0178                                     font.pixelSize: 7
0179                                 }
0180                             }
0181                         }
0182                     ]
0183                     text: i18n("Compact")
0184                     checked: Config.compactLayout
0185                     QQC2.ButtonGroup.group: themeGroup
0186                     enabled: !Config.isCompactLayoutImmutable
0187 
0188                     onToggled: {
0189                         Config.compactLayout = checked;
0190                         Config.save();
0191                     }
0192                 }
0193                 Item {
0194                     Layout.fillWidth: true
0195                 }
0196             }
0197         }
0198 
0199         FormCard.FormDelegateSeparator { below: compactRoomListDelegate }
0200 
0201         FormCard.FormCheckDelegate {
0202             id: compactRoomListDelegate
0203             text: i18n("Use compact room list")
0204             checked: Config.compactRoomList
0205             onToggled: {
0206                 Config.compactRoomList = checked;
0207                 Config.save();
0208             }
0209         }
0210 
0211         FormCard.FormDelegateSeparator { above: compactRoomListDelegate ; below: colorSchemeDelegate.item ; visible: colorSchemeDelegate.visible }
0212 
0213         Loader {
0214             id: colorSchemeDelegate
0215             visible: item !== null
0216             source: "qrc:/org/kde/neochat/qml/ColorScheme.qml"
0217             Layout.fillWidth: true
0218         }
0219     }
0220 
0221     FormCard.FormCard {
0222         Layout.topMargin: Kirigami.Units.largeSpacing
0223         FormCard.FormCheckDelegate {
0224             id: showFancyEffectsDelegate
0225             text: i18n("Show fancy effects in chat")
0226             checked: Config.showFancyEffects
0227             enabled: !Config.isShowFancyEffectsImmutable
0228             onToggled: {
0229                 Config.showFancyEffects = checked;
0230                 Config.save();
0231             }
0232         }
0233 
0234         FormCard.FormDelegateSeparator { above: showFancyEffectsDelegate ; below: hasWindowSystemDelegate }
0235 
0236         FormCard.FormCheckDelegate {
0237             id: hasWindowSystemDelegate
0238             visible: WindowController.hasWindowSystem
0239             text: i18n("Use transparent chat page")
0240             enabled: !Config.compactLayout && !Config.isBlurImmutable
0241             checked: Config.blur
0242             onToggled: {
0243                 Config.blur = checked;
0244                 Config.save();
0245             }
0246         }
0247 
0248         FormCard.FormDelegateSeparator { above: hasWindowSystemDelegate; below: transparencyDelegate }
0249 
0250         FormCard.AbstractFormDelegate {
0251             id: transparencyDelegate
0252             visible: WindowController.hasWindowSystem && Config.blur
0253             enabled: !Config.isTransparancyImmutable
0254             background: Item {}
0255             contentItem: ColumnLayout {
0256                 QQC2.Label {
0257                     text: i18n("Transparency")
0258                     Layout.fillWidth: true
0259                 }
0260                 QQC2.Slider {
0261                     enabled: !Config.compactLayout && Config.blur
0262                     from: 0
0263                     to: 1
0264                     stepSize: 0.05
0265                     value: Config.transparency
0266                     onMoved: {
0267                         Config.transparency = value;
0268                         Config.save();
0269                     }
0270                     Layout.fillWidth: true
0271 
0272                     HoverHandler { id: sliderHover }
0273                     QQC2.ToolTip.visible: sliderHover.hovered && !enabled
0274                     QQC2.ToolTip.text: i18n("Only enabled if the transparent chat page is enabled.")
0275                 }
0276                 QQC2.Label {
0277                     text: Math.round(Config.transparency * 100) + "%"
0278                     Layout.fillWidth: true
0279                 }
0280             }
0281         }
0282 
0283         FormCard.FormDelegateSeparator { above: transparencyDelegate; below: showLocalMessagesOnRightDelegate; visible: transparencyDelegate.visible }
0284 
0285         FormCard.FormCheckDelegate {
0286             id: showLocalMessagesOnRightDelegate
0287             text: i18n("Show your messages on the right")
0288             checked: Config.showLocalMessagesOnRight
0289             enabled: !Config.isShowLocalMessagesOnRightImmutable && !Config.compactLayout
0290             onToggled: {
0291                 Config.showLocalMessagesOnRight = checked
0292                 Config.save()
0293             }
0294         }
0295 
0296         FormCard.FormDelegateSeparator { above: showLocalMessagesOnRightDelegate; below: showLinkPreviewDelegate }
0297 
0298         FormCard.FormCheckDelegate {
0299             id: showLinkPreviewDelegate
0300             text: i18n("Show links preview in the chat messages")
0301             checked: Config.showLinkPreview
0302             onToggled: {
0303                 Config.showLinkPreview = checked
0304                 Config.save()
0305             }
0306         }
0307     }
0308 
0309 
0310     FormCard.FormHeader {
0311         title: i18n("Show Avatar")
0312     }
0313     FormCard.FormCard {
0314         FormCard.FormCheckDelegate {
0315             text: i18n("In chat")
0316             checked: Config.showAvatarInTimeline
0317             onToggled: {
0318                 Config.showAvatarInTimeline = checked
0319                 Config.save()
0320             }
0321             enabled: !Config.isShowAvatarInTimelineImmutable
0322         }
0323 
0324         FormCard.FormCheckDelegate {
0325             text: i18n("In sidebar")
0326             checked: Config.showAvatarInRoomDrawer
0327             enabled: !Config.isShowAvatarInRoomDrawerImmutable
0328             onToggled: {
0329                 Config.showAvatarInRoomDrawer = checked
0330                 Config.save()
0331             }
0332         }
0333     }
0334 }