configuration/pages/AppearanceConfig.qml

0001 /*
0002     SPDX-FileCopyrightText: 2016 Smith AR <audoban@openmailbox.org>
0003     SPDX-FileCopyrightText: 2016 Michail Vourlakos <mvourlakos@gmail.com>
0004     SPDX-License-Identifier: GPL-2.0-or-later
0005 */
0006
0007 import QtQuick 2.0
0008 import QtQuick.Controls 1.4
0009 import QtQuick.Layouts 1.3
0010 import QtGraphicalEffects 1.0
0011 import QtQuick.Dialogs 1.2
0012
0013 import org.kde.plasma.core 2.0 as PlasmaCore
0014 import org.kde.plasma.components 2.0 as PlasmaComponents
0015 import org.kde.plasma.components 3.0 as PlasmaComponents3
0016
0017 import org.kde.latte.core 0.2 as LatteCore
0018 import org.kde.latte.components 1.0 as LatteComponents
0019 import org.kde.latte.private.containment 0.1 as LatteContainment
0020
0021 PlasmaComponents.Page {
0022     id: page
0023     width: content.width + content.Layout.leftMargin * 2
0024     height: content.height + units.smallSpacing * 2
0025
0026     Timer {
0027         id: syncGeometry
0028
0029         running: false
0030         repeat: false
0031         interval: 400
0032         onTriggered: viewConfig.syncGeometry()
0033     }
0034
0035     ColumnLayout {
0036         id: content
0037
0038         width: (dialog.appliedWidth - units.smallSpacing * 2) - Layout.leftMargin * 2
0039         spacing: dialog.subGroupSpacing
0040         anchors.horizontalCenter: parent.horizontalCenter
0041         Layout.leftMargin: units.smallSpacing * 2
0042
0043         //! BEGIN: Items
0044         ColumnLayout {
0045             Layout.fillWidth: true
0046             Layout.topMargin: units.smallSpacing
0047
0048             spacing: units.smallSpacing
0049
0050             LatteComponents.Header {
0051                 text: i18n("Items")
0052             }
0053
0054             ColumnLayout {
0055                 Layout.leftMargin: units.smallSpacing * 2
0056                 Layout.rightMargin: units.smallSpacing * 2
0057                 spacing: 0
0058
0059                 RowLayout {
0060                     Layout.minimumWidth: dialog.optionsWidth
0061                     Layout.maximumWidth: Layout.minimumWidth
0062                     spacing: units.smallSpacing
0063                     enabled: proportionSizeSlider.value === 1
0064
0065                     PlasmaComponents.Label {
0066                         text: i18nc("absolute size","Absolute size")
0067                         horizontalAlignment: Text.AlignLeft
0068                     }
0069
0070                     LatteComponents.Slider {
0071                         id: appletsSizeSlider
0072                         Layout.fillWidth: true
0073                         //!round to nearest odd number
0074                         value: 2 * Math.round(plasmoid.configuration.iconSize / 2)
0075                         from: 16
0076                         to: 512
0077                         stepSize: dialog.advancedLevel || (plasmoid.configuration.iconSize % 8 !== 0) || dialog.viewIsPanel ? 2 : 8
0078                         wheelEnabled: false
0079
0080                         function updateIconSize() {
0081                             if (!pressed) {
0082                                 plasmoid.configuration.iconSize = value;
0083                                 syncGeometry.restart();
0084                             }
0085                         }
0086
0087                         onPressedChanged: {
0088                             updateIconSize()
0089                         }
0090
0091                         Component.onCompleted: {
0092                             valueChanged.connect(updateIconSize);
0093                         }
0094
0095                         Component.onDestruction: {
0096                             valueChanged.disconnect(updateIconSize);
0097                         }
0098                     }
0099
0100                     PlasmaComponents.Label {
0101                         text: i18nc("number in pixels, e.g. 12 px.", "%1 px.", appletsSizeSlider.value)//.arg(appletsSizeSlider.value)
0102                         horizontalAlignment: Text.AlignRight
0103                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
0104                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
0105                     }
0106                 }
0107
0108                 RowLayout {
0109                     Layout.minimumWidth: dialog.optionsWidth
0110                     Layout.maximumWidth: Layout.minimumWidth
0111                     spacing: units.smallSpacing
0112                     visible: dialog.advancedLevel || plasmoid.configuration.proportionIconSize>0
0113
0114                     PlasmaComponents.Label {
0115                         text: i18nc("relative size", "Relative size")
0116                         horizontalAlignment: Text.AlignLeft
0117                         enabled: proportionSizeSlider.value !== proportionSizeSlider.from
0118                     }
0119
0120                     LatteComponents.Slider {
0121                         id: proportionSizeSlider
0122                         Layout.fillWidth: true
0123                         value: plasmoid.configuration.proportionIconSize
0124                         from: 1.0
0125                         to: (latteView.visibility.mode === LatteCore.Types.SidebarOnDemand || latteView.visibility.mode === LatteCore.Types.SidebarAutoHide)  ? 25 : 12
0126                         stepSize: 0.1
0127                         wheelEnabled: false
0128
0129                         function updateProportionIconSize() {
0130                             if (!pressed) {
0131                                 if(value===1) {
0132                                     plasmoid.configuration.proportionIconSize = -1;
0133                                 } else {
0134                                     plasmoid.configuration.proportionIconSize = value;
0135                                 }
0136                             }
0137                         }
0138
0139                         onPressedChanged: {
0140                             updateProportionIconSize();
0141                         }
0142
0143                         Component.onCompleted: {
0144                             valueChanged.connect(updateProportionIconSize)
0145                         }
0146
0147                         Component.onDestruction: {
0148                             valueChanged.disconnect(updateProportionIconSize)
0149                         }
0150                     }
0151
0152                     PlasmaComponents.Label {
0153                         id: absoluteSizeLbl
0154                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
0155                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
0156
0157                         text: proportionSizeSlider.value !== proportionSizeSlider.from ?
0158                                   (absoluteSizeLblMouseArea.containsMouse ?
0159                                        i18nc("number in pixels, e.g. 64 px.","%1 px.", latteView.metrics.maxIconSize) :
0160                                        i18nc("number in percentage, e.g. 85 %","%1 %", proportionSizeSlider.value.toFixed(1))) :
0161                                   i18nc("no value in percentage","--- %")
0162                         horizontalAlignment: Text.AlignRight
0163                         enabled: proportionSizeSlider.value !== proportionSizeSlider.from
0164
0165                         MouseArea {
0166                             id: absoluteSizeLblMouseArea
0167                             anchors.fill: parent
0168                             hoverEnabled: true
0169                         }
0170                     }
0171                 }
0172
0173                 RowLayout {
0174                     Layout.minimumWidth: dialog.optionsWidth
0175                     Layout.maximumWidth: Layout.minimumWidth
0176                     spacing: units.smallSpacing
0177                     enabled: LatteCore.WindowSystem.compositingActive && plasmoid.configuration.animationsEnabled
0178
0179                     PlasmaComponents.Label {
0180                         text: i18n("Zoom on hover")
0181                         horizontalAlignment: Text.AlignLeft
0182                     }
0183
0184                     LatteComponents.Slider {
0185                         id: zoomSlider
0186                         Layout.fillWidth: true
0187                         value: Number(1 + plasmoid.configuration.zoomLevel / 20).toFixed(2)
0188                         from: 1
0189                         to: 2.25
0190                         stepSize: 0.05
0191                         wheelEnabled: false
0192
0193                         function updateZoomLevel() {
0194                             if (!pressed) {
0195                                 var result = Math.round((value - 1) * 20)
0196                                 plasmoid.configuration.zoomLevel = result
0197                             }
0198                         }
0199
0200                         onPressedChanged: {
0201                             updateZoomLevel()
0202                         }
0203
0204                         Component.onCompleted: {
0205                             valueChanged.connect(updateZoomLevel)
0206                         }
0207
0208                         Component.onDestruction: {
0209                             valueChanged.disconnect(updateZoomLevel)
0210                         }
0211                     }
0212
0213                     PlasmaComponents.Label {
0214                         text: i18nc("number in percentage, e.g. 85 %","%1 %", Number((zoomSlider.value * 100) - 100).toFixed(0))
0215                         horizontalAlignment: Text.AlignRight
0216                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
0217                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
0218                     }
0219                 }
0220             }
0221         }
0222         //! END: Items
0223
0224         //! BEGIN: Length
0225         ColumnLayout {
0226             Layout.fillWidth: true
0227
0228             spacing: units.smallSpacing
0229
0230             LatteComponents.Header {
0231                 text: i18n("Length")
0232             }
0233
0234             ColumnLayout {
0235                 id: lengthColumn
0236                 Layout.leftMargin: units.smallSpacing * 2
0237                 Layout.rightMargin: units.smallSpacing * 2
0238                 spacing: 0
0239
0240                 readonly property int labelsMaxWidth: Math.max(maxLengthLbl.implicitWidth,
0241                                                                minLengthLbl.implicitWidth,
0242                                                                offsetLbl.implicitWidth)
0243
0244                 RowLayout {
0245                     Layout.minimumWidth: dialog.optionsWidth
0246                     Layout.maximumWidth: Layout.minimumWidth
0247                     spacing: units.smallSpacing
0248
0249                     PlasmaComponents.Label {
0250                         id: maxLengthLbl
0251                         text: i18n("Maximum")
0252                         horizontalAlignment: Text.AlignLeft
0253                     }
0254
0255                     LatteComponents.Slider {
0256                         id: maxLengthSlider
0257                         Layout.fillWidth: true
0258
0259                         value: plasmoid.configuration.maxLength
0260                         from: 0
0261                         to: 100
0262                         stepSize: 1
0263                         wheelEnabled: false
0264
0265                         readonly property int localMinValue: 1
0266
0267                         function updateMaxLength() {
0268                             if (!pressed && viewConfig.isReady) {
0269                                 plasmoid.configuration.maxLength = Math.max(value, plasmoid.configuration.minLength, localMinValue);
0270                                 var newTotal = Math.abs(plasmoid.configuration.offset) + value;
0271
0272                                 //centered and justify alignments based on offset and get out of the screen in some cases
0273                                 var centeredCheck = ((plasmoid.configuration.alignment === LatteCore.Types.Center)
0274                                                      || (plasmoid.configuration.alignment === LatteCore.Types.Justify))
0275                                         && ((Math.abs(plasmoid.configuration.offset) + value/2) > 50);
0276
0277                                 if (newTotal > 100 || centeredCheck) {
0278                                     if ((plasmoid.configuration.alignment === LatteCore.Types.Center)
0279                                             || (plasmoid.configuration.alignment === LatteCore.Types.Justify)) {
0280
0281                                         var suggestedValue = (plasmoid.configuration.offset<0) ? Math.min(0, -(100-value)): Math.max(0, 100-value);
0282
0283                                         if ((Math.abs(suggestedValue) + value/2) > 50) {
0284                                             if (suggestedValue < 0) {
0285                                                 suggestedValue = - (50 - value/2);
0286                                             } else {
0287                                                 suggestedValue = 50 - value/2;
0288                                             }
0289                                         }
0290
0291                                         plasmoid.configuration.offset = suggestedValue;
0292                                     } else {
0293                                         plasmoid.configuration.offset = Math.max(0, 100-value);
0294                                     }
0295                                 }
0296
0297                                 if (plasmoid.configuration.maxLength < plasmoid.configuration.minLength) {
0298                                     minLengthSlider.updateMinLength();
0299                                 }
0300                             } else {
0301                                 if ((value < plasmoid.configuration.minLength) || (value < localMinValue)) {
0302                                     value = Math.max(plasmoid.configuration.minLength, localMinValue);
0303                                 }
0304                             }
0305                         }
0306
0307                         onPressedChanged: {
0308                             updateMaxLength();
0309                         }
0310
0311                         Component.onCompleted: {
0312                             valueChanged.connect(updateMaxLength)
0313                         }
0314
0315                         Component.onDestruction: {
0316                             valueChanged.disconnect(updateMaxLength)
0317                         }
0318                     }
0319
0320                     PlasmaComponents.Label {
0321                         text: i18nc("number in percentage, e.g. 85 %","%1 %", maxLengthSlider.value)
0322                         horizontalAlignment: Text.AlignRight
0323                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
0324                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
0325
0326                         LatteComponents.ScrollArea {
0327                             anchors.fill: parent
0328                             delayIsEnabled: false
0329
0330                             readonly property real smallStep: 0.1
0331
0332                             onScrolledUp:  {
0333                                 var ctrlModifier = (wheel.modifiers & Qt.ControlModifier);
0334                                 if (ctrlModifier) {
0335                                     plasmoid.configuration.maxLength = plasmoid.configuration.maxLength + smallStep;
0336                                 }
0337                             }
0338
0339                             onScrolledDown: {
0340                                 var ctrlModifier = (wheel.modifiers & Qt.ControlModifier);
0341                                 if (ctrlModifier) {
0342                                     plasmoid.configuration.maxLength = plasmoid.configuration.maxLength - smallStep;
0343                                 }
0344                             }
0345
0346                             onClicked: {
0347                                 plasmoid.configuration.maxLength = Math.round(plasmoid.configuration.maxLength);
0348                             }
0349                         }
0350                     }
0351                 }
0352
0353                 RowLayout {
0354                     Layout.minimumWidth: dialog.optionsWidth
0355                     Layout.maximumWidth: Layout.minimumWidth
0356                     spacing: units.smallSpacing
0357                     visible: dialog.advancedLevel
0358                     enabled: (plasmoid.configuration.alignment !== LatteCore.Types.Justify)
0359
0360                     PlasmaComponents.Label {
0361                         id: minLengthLbl
0362                         text: i18n("Minimum")
0363                         horizontalAlignment: Text.AlignLeft
0364                     }
0365
0366                     LatteComponents.Slider {
0367                         id: minLengthSlider
0368                         Layout.fillWidth: true
0369
0370                         value: plasmoid.configuration.minLength
0371                         from: 0
0372                         to: 100
0373                         stepSize: 1
0374                         wheelEnabled: false
0375
0376                         function updateMinLength() {
0377                             if (!pressed  && viewConfig.isReady) {
0378                                 plasmoid.configuration.minLength = value; //Math.min(value, plasmoid.configuration.maxLength);
0379
0380                                 if (plasmoid.configuration.minLength > maxLengthSlider.value) {
0381                                     maxLengthSlider.updateMaxLength();
0382                                 }
0383                             } else {
0384                                 if (value > plasmoid.configuration.maxLength) {
0385                                     value = plasmoid.configuration.maxLength
0386                                 }
0387                             }
0388                         }
0389
0390                         onPressedChanged: {
0391                             updateMinLength();
0392                         }
0393
0394                         Component.onCompleted: {
0395                             valueChanged.connect(updateMinLength)
0396                         }
0397
0398                         Component.onDestruction: {
0399                             valueChanged.disconnect(updateMinLength)
0400                         }
0401                     }
0402
0403                     PlasmaComponents.Label {
0404                         text: i18nc("number in percentage, e.g. 85 %","%1 %", minLengthSlider.value)
0405                         horizontalAlignment: Text.AlignRight
0406                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
0407                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
0408
0409                         LatteComponents.ScrollArea {
0410                             anchors.fill: parent
0411                             delayIsEnabled: false
0412
0413                             readonly property real smallStep: 0.1
0414
0415                             onScrolledUp:  {
0416                                 var ctrlModifier = (wheel.modifiers & Qt.ControlModifier);
0417                                 if (ctrlModifier) {
0418                                     plasmoid.configuration.minLength = plasmoid.configuration.minLength + smallStep;
0419                                 }
0420                             }
0421
0422                             onScrolledDown: {
0423                                 var ctrlModifier = (wheel.modifiers & Qt.ControlModifier);
0424                                 if (ctrlModifier) {
0425                                     plasmoid.configuration.minLength = plasmoid.configuration.minLength - smallStep;
0426                                 }
0427                             }
0428
0429                             onClicked: {
0430                                 plasmoid.configuration.minLength = Math.round(plasmoid.configuration.minLength);
0431                             }
0432                         }
0433                     }
0434                 }
0435
0436                 RowLayout {
0437                     Layout.minimumWidth: dialog.optionsWidth
0438                     Layout.maximumWidth: Layout.minimumWidth
0439                     spacing: units.smallSpacing
0440                     visible: dialog.advancedLevel
0441                     enabled: offsetSlider.to > offsetSlider.from
0442
0443                     PlasmaComponents.Label {
0444                         id: offsetLbl
0445                         text: i18n("Offset")
0446                         horizontalAlignment: Text.AlignLeft
0447                     }
0448
0449                     LatteComponents.Slider {
0450                         id: offsetSlider
0451                         Layout.fillWidth: true
0452                         stepSize: 1
0453                         wheelEnabled: false
0454
0455                         readonly property int screenLengthMaxFactor: (100 - plasmoid.configuration.maxLength) / 2
0456
0457                         //! these properties are used in order to not update view_offset incorrectly when the primary config view
0458                         //! is changing between different views
0459                         property bool userInputIsValid: false
0460                         readonly property bool sliderIsReady: viewConfig.isReady && (from===fromValue) && (to===toValue)
0461
0462                         readonly property int fromValue: ((plasmoid.configuration.alignment === LatteCore.Types.Center)
0463                                                           || (plasmoid.configuration.alignment === LatteCore.Types.Justify)) ? -offsetSlider.screenLengthMaxFactor :  0
0464
0465                         readonly property int toValue: ((plasmoid.configuration.alignment === LatteCore.Types.Center)
0466                                                         || (plasmoid.configuration.alignment === LatteCore.Types.Justify)) ? offsetSlider.screenLengthMaxFactor :  2*offsetSlider.screenLengthMaxFactor
0467
0468                         property real offsetValue: plasmoid.configuration.offset
0469
0470                         Binding {
0471                             target: offsetSlider
0472                             property: "from"
0473                             when: viewConfig.isReady
0474                             value: offsetSlider.fromValue
0475                         }
0476
0477                         Binding {
0478                             target: offsetSlider
0479                             property: "to"
0480                             when: viewConfig.isReady
0481                             value: offsetSlider.toValue
0482                         }
0483
0484                         function updateOffset() {
0485                             if (!pressed && sliderIsReady) {
0486                                 if (userInputIsValid) {
0487                                     plasmoid.configuration.offset = value;
0488                                 } else {
0489                                     value = Math.min(Math.max(from, plasmoid.configuration.offset), to);
0490                                     plasmoid.configuration.offset = value;
0491                                 }
0492
0493                                 var newTotal = Math.abs(value) + plasmoid.configuration.maxLength;
0494
0495                                 //centered and justify alignments based on offset and get out of the screen in some cases
0496                                 var centeredCheck = ((plasmoid.configuration.alignment === LatteCore.Types.Center)
0497                                                      || (plasmoid.configuration.alignment === LatteCore.Types.Justify))
0498                                         && ((Math.abs(value) + plasmoid.configuration.maxLength/2) > 50);
0499                                 if (newTotal > 100 || centeredCheck) {
0500                                     plasmoid.configuration.maxLength = ((plasmoid.configuration.alignment === LatteCore.Types.Center)
0501                                                                         || (plasmoid.configuration.alignment === LatteCore.Types.Justify)) ?
0502                                                 2*(50 - Math.abs(value)) :100 - Math.abs(value);
0503                                 }
0504                             }
0505                         }
0506
0507                         onPressedChanged: {
0508                             if (pressed) {
0509                                 userInputIsValid = true;
0510                             } else {
0511                                 updateOffset();
0512                                 userInputIsValid = false;
0513                             }
0514                         }
0515
0516                         Component.onCompleted: {
0517                             offsetValueChanged.connect(updateOffset);
0518                             fromChanged.connect(updateOffset);
0519                             toChanged.connect(updateOffset);
0520                             sliderIsReadyChanged.connect(updateOffset);
0521
0522                             updateOffset();
0523                         }
0524
0525                         Component.onDestruction: {
0526                             offsetValueChanged.disconnect(updateOffset);
0527                             fromChanged.disconnect(updateOffset);
0528                             toChanged.disconnect(updateOffset);
0529                             sliderIsReadyChanged.disconnect(updateOffset);
0530                         }
0531                     }
0532
0533                     PlasmaComponents.Label {
0534                         text: i18nc("number in percentage, e.g. 85 %","%1 %", offsetSlider.value)
0535                         horizontalAlignment: Text.AlignRight
0536                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
0537                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
0538
0539                         LatteComponents.ScrollArea {
0540                             anchors.fill: parent
0541                             delayIsEnabled: false
0542
0543                             readonly property real smallStep: 0.1
0544
0545                             onScrolledUp:  {
0546                                 var ctrlModifier = (wheel.modifiers & Qt.ControlModifier);
0547                                 if (ctrlModifier) {
0548                                     plasmoid.configuration.offset= plasmoid.configuration.offset + smallStep;
0549                                 }
0550                             }
0551
0552                             onScrolledDown: {
0553                                 var ctrlModifier = (wheel.modifiers & Qt.ControlModifier);
0554                                 if (ctrlModifier) {
0555                                     plasmoid.configuration.offset = plasmoid.configuration.offset - smallStep;
0556                                 }
0557                             }
0558
0559                             onClicked: {
0560                                 plasmoid.configuration.offset = Math.round(plasmoid.configuration.offset);
0561                             }
0562                         }
0563                     }
0564                 }
0565             }
0566             LatteComponents.SubHeader {
0567                 visible: dialog.advancedLevel
0568                 text: i18nc("@label dynamic length configuration", "Dynamic Length Adjustments")
0569                 enabled: true
0570             }
0571
0572             LatteComponents.CheckBoxesColumn {
0573                 enabled: dialog.advancedLevel;
0574                 LatteComponents.CheckBox {
0575                     id: maximizeWhenMaximizedChk
0576                     Layout.maximumWidth: dialog.optionsWidth
0577                     text: i18nc("@label", "Maximize panel length in presence of maximized windows")
0578                     tooltip: i18n("Change panel length to maximum screen size when there is a maximized window present on the screen")
0579                     enabled: showBackground.checked
0580                     visible: dialog.advancedLevel
0581                     value: plasmoid.configuration.maximizeWhenMaximized
0582
0583                     onClicked: {
0584                         plasmoid.configuration.maximizeWhenMaximized = !plasmoid.configuration.maximizeWhenMaximized;
0585                     }
0586                 }
0587             }
0588         }
0589         //! END: Length
0590
0591         //! BEGIN: Margins
0592         ColumnLayout {
0593             id: marginsColumn
0594             Layout.fillWidth: true
0595
0596             spacing: units.smallSpacing
0597             visible: dialog.advancedLevel
0598
0599             readonly property int maxMargin: 25
0600
0601             LatteComponents.Header {
0602                 text: i18n("Margins")
0603             }
0604
0605             ColumnLayout{
0606                 Layout.leftMargin: units.smallSpacing * 2
0607                 Layout.rightMargin: units.smallSpacing * 2
0608                 spacing: 0
0609
0610                 RowLayout {
0611                     Layout.minimumWidth: dialog.optionsWidth
0612                     Layout.maximumWidth: Layout.minimumWidth
0613
0614                     spacing: units.smallSpacing
0615
0616                     PlasmaComponents.Label {
0617                         text: i18n("Length")
0618                         horizontalAlignment: Text.AlignLeft
0619                     }
0620
0621                     LatteComponents.Slider {
0622                         id: lengthExtMarginSlider
0623                         Layout.fillWidth: true
0624
0625                         value: plasmoid.configuration.lengthExtMargin
0626                         from: 0
0627                         to: marginsColumn.maxMargin
0628                         stepSize: 1
0629                         wheelEnabled: false
0630
0631                         onPressedChanged: {
0632                             if (!pressed) {
0633                                 plasmoid.configuration.lengthExtMargin = value;
0634                             }
0635                         }
0636                     }
0637
0638                     PlasmaComponents.Label {
0639                         text: lengthMarginLblMouseArea.containsMouse ?
0640                                   i18nc("number in pixels, e.g. 8 px.","%1 px.", currentValueInPixels) :
0641                                   i18nc("number in percentage, e.g. 85 %","%1 %", lengthExtMarginSlider.value)
0642                         horizontalAlignment: Text.AlignRight
0643                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
0644                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
0645
0646                         readonly property int currentValueInPixels: (lengthExtMarginSlider.value/100) * latteView.metrics.maxIconSize
0647
0648                         MouseArea {
0649                             id: lengthMarginLblMouseArea
0650                             anchors.fill: parent
0651                             hoverEnabled: true
0652                         }
0653                     }
0654                 }
0655
0656                 RowLayout {
0657                     Layout.minimumWidth: dialog.optionsWidth
0658                     Layout.maximumWidth: Layout.minimumWidth
0659                     spacing: units.smallSpacing
0660
0661                     PlasmaComponents.Label {
0662                         text: i18n("Thickness")
0663                         horizontalAlignment: Text.AlignLeft
0664                     }
0665
0666                     LatteComponents.Slider {
0667                         id: thickMarginSlider
0668                         Layout.fillWidth: true
0669
0670                         value: plasmoid.configuration.thickMargin
0671                         from: 0
0672                         to: 60
0673                         stepSize: 1
0674                         wheelEnabled: false
0675                         minimumInternalValue: latteView.indicator.info.minThicknessPadding * 100
0676
0677                         onPressedChanged: {
0678                             if (!pressed) {
0679                                 plasmoid.configuration.thickMargin = value;
0680                             }
0681                         }
0682                     }
0683
0684                     PlasmaComponents.Label {
0685                         text: thickMarginLblMouseArea.containsMouse ?
0686                                   i18nc("number in pixels, e.g. 8 px.","%1 px.", currentValueInPixels) :
0687                                   i18nc("number in percentage, e.g. 85 %","%1 %", currentValue)
0688                         horizontalAlignment: Text.AlignRight
0689                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
0690                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
0691
0692                         readonly property int currentValue: Math.max(thickMarginSlider.minimumInternalValue, thickMarginSlider.value)
0693                         readonly property int currentValueInPixels: (currentValue/100) * latteView.metrics.maxIconSize
0694
0695                         MouseArea {
0696                             id: thickMarginLblMouseArea
0697                             anchors.fill: parent
0698                             hoverEnabled: true
0699                         }
0700                     }
0701                 }
0702
0703                 RowLayout {
0704                     Layout.minimumWidth: dialog.optionsWidth
0705                     Layout.maximumWidth: Layout.minimumWidth
0706                     spacing: units.smallSpacing
0707
0708                     PlasmaComponents.Label {
0709                         text: i18n("Floating gap")
0710                         horizontalAlignment: Text.AlignLeft
0711                     }
0712
0713                     LatteComponents.Slider {
0714                         id: screenEdgeMarginSlider
0715                         Layout.fillWidth: true
0716
0717                         value: plasmoid.configuration.screenEdgeMargin
0718                         from: -1
0719                         to: 256
0720                         stepSize: 1
0721                         wheelEnabled: false
0722
0723                         onPressedChanged: {
0724                             if (!pressed) {
0725                                 plasmoid.configuration.screenEdgeMargin = value;
0726                             }
0727                         }
0728                     }
0729
0730                     PlasmaComponents.Label {
0731                         text: currentValue < 0 ? "---" : i18nc("number in pixels, e.g. 85 px.","%1 px.", currentValue)
0732                         horizontalAlignment: Text.AlignRight
0733                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
0734                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
0735
0736                         readonly property int currentValue: screenEdgeMarginSlider.value
0737                     }
0738                 }
0739             }
0740         }
0741         //! END: Margins
0742
0743         //! BEGIN: Colors
0744         ColumnLayout {
0745             spacing: units.smallSpacing
0746             visible: dialog.advancedLevel
0747
0748             LatteComponents.Header {
0749                 Layout.columnSpan: 4
0750                 text: i18n("Colors")
0751             }
0752
0753             GridLayout {
0754                 id: colorsGridLayout
0755                 Layout.minimumWidth: dialog.optionsWidth
0756                 Layout.maximumWidth: Layout.minimumWidth
0757                 Layout.leftMargin: units.smallSpacing * 2
0758                 Layout.rightMargin: units.smallSpacing * 2
0759                 Layout.topMargin: units.smallSpacing
0760                 columnSpacing: units.smallSpacing
0761                 rowSpacing: units.smallSpacing
0762                 columns: 2
0763
0764                 readonly property bool colorsScriptIsPresent: universalSettings.colorsScriptIsPresent
0765
0766                 PlasmaComponents.Label {
0767                     text: i18n("Palette")
0768                 }
0769
0770                 LatteComponents.ComboBox {
0771                     Layout.fillWidth: true
0772                     model: [
0773                         {
0774                             name: i18nc("plasma theme colors", "Plasma Theme Colors"),
0775                             value: LatteContainment.Types.PlasmaThemeColors
0776                         },{
0777                             name: i18nc("dark theme colors", "Dark Colors"),
0778                             value: LatteContainment.Types.DarkThemeColors
0779                         },{
0780                             name: i18nc("light theme colors", "Light Colors"),
0781                             value: LatteContainment.Types.LightThemeColors
0782                         },{
0783                             name: i18nc("layout custom colors", "Layout Custom Colors"),
0784                             value: LatteContainment.Types.LayoutThemeColors
0785                         },
0786                         /*,{
0787                             name: i18nc("reverse plasma theme colors", "Reverse"),
0788                             value: LatteContainment.Types.ReverseThemeColors
0789                         }*/{
0790                             name: i18nc("smart theme colors", "Smart Colors Based On Desktop Background"),
0791                             value: LatteContainment.Types.SmartThemeColors
0792                         }
0793                     ]
0794
0795                     currentIndex: colorsToIndex(plasmoid.configuration.themeColors)
0796                     textRole: "name"
0797                     onCurrentIndexChanged: plasmoid.configuration.themeColors = model[currentIndex].value
0798
0799                     function colorsToIndex(colors) {
0800                         if (colors === LatteContainment.Types.PlasmaThemeColors) {
0801                             return 0;
0802                         } else if (colors === LatteContainment.Types.DarkThemeColors) {
0803                             return 1;
0804                         } else if (colors === LatteContainment.Types.LightThemeColors) {
0805                             return 2;
0806                         } else if (colors === LatteContainment.Types.ReverseThemeColors) {
0807                             return 3;
0808                         } else if (colors === LatteContainment.Types.LayoutThemeColors) {
0809                             return 3;
0810                         } else if (colors === LatteContainment.Types.SmartThemeColors) {
0811                             return 4;
0812                         }
0813                     }
0814                 }
0815
0816                 PlasmaComponents.Label {
0817                     text: i18n("From Window")
0818                 }
0819
0820                 LatteComponents.ComboBox {
0821                     Layout.fillWidth: true
0822                     model: [
0823                         {
0824                             name:i18n("Disabled"),
0825                             icon: "",
0826                             toolTip: "Colors are not going to take into account any windows"
0827                         },{
0828                             name:i18n("Current Active Window"),
0829                             icon: !colorsGridLayout.colorsScriptIsPresent ? "state-warning" : "",
0830                             toolTip: colorsGridLayout.colorsScriptIsPresent ?
0831                                          i18n("Colors are going to be based on the active window") :
0832                                          i18n("Colors are going to be based on the active window.\nWarning: You need to install Colors KWin Script from KDE Store")
0833                         },{
0834                             name: i18n("Any Touching Window"),
0835                             icon: !colorsGridLayout.colorsScriptIsPresent ? "state-warning" : "",
0836                             toolTip: colorsGridLayout.colorsScriptIsPresent ?
0837                                          i18n("Colors are going to be based on windows that are touching the view") :
0838                                          i18n("Colors are going to be based on windows that are touching the view.\nWarning: You need to install Colors KWin Script from KDE Store")
0839                         }
0840                     ]
0841
0842
0843                     textRole: "name"
0844                     iconRole: "icon"
0845                     toolTipRole: "toolTip"
0846                     blankSpaceForEmptyIcons: !colorsGridLayout.colorsScriptIsPresent
0847                     popUpAlignRight: Qt.application.layoutDirection !== Qt.RightToLeft
0848
0849                     currentIndex: plasmoid.configuration.windowColors
0850                     onCurrentIndexChanged: plasmoid.configuration.windowColors = currentIndex
0851                 }
0852             }
0853         }
0854         //! END: Colors
0855
0856         //! BEGIN: Background
0857         ColumnLayout {
0858             Layout.fillWidth: true
0859             spacing: units.smallSpacing
0860
0861             LatteComponents.HeaderSwitch {
0862                 id: showBackground
0863                 Layout.minimumWidth: dialog.optionsWidth + 2 *units.smallSpacing
0864                 Layout.maximumWidth: Layout.minimumWidth
0865                 Layout.minimumHeight: implicitHeight
0866                 Layout.bottomMargin: units.smallSpacing
0867                 enabled: LatteCore.WindowSystem.compositingActive
0868
0869                 checked: plasmoid.configuration.useThemePanel
0870                 text: i18n("Background")
0871                 tooltip: i18n("Enable/disable background")
0872
0873                 onPressed: {
0874                     plasmoid.configuration.useThemePanel = !plasmoid.configuration.useThemePanel;
0875                 }
0876             }
0877
0878             ColumnLayout {
0879                 Layout.leftMargin: units.smallSpacing * 2
0880                 Layout.rightMargin: units.smallSpacing * 2
0881                 spacing: 0
0882
0883                 RowLayout {
0884                     Layout.minimumWidth: dialog.optionsWidth
0885                     Layout.maximumWidth: Layout.minimumWidth
0886                     enabled: LatteCore.WindowSystem.compositingActive
0887
0888                     PlasmaComponents.Label {
0889                         enabled: showBackground.checked
0890                         text: i18n("Thickness")
0891                         horizontalAlignment: Text.AlignLeft
0892                     }
0893
0894                     LatteComponents.Slider {
0895                         id: panelSizeSlider
0896                         Layout.fillWidth: true
0897                         enabled: showBackground.checked
0898
0899                         value: plasmoid.configuration.panelSize
0900                         from: 0
0901                         to: 100
0902                         stepSize: 1
0903                         wheelEnabled: false
0904
0905                         function updatePanelSize() {
0906                             if (!pressed)
0907                                 plasmoid.configuration.panelSize = value
0908                         }
0909
0910                         onPressedChanged: {
0911                             updatePanelSize();
0912                         }
0913
0914                         Component.onCompleted: {
0915                             valueChanged.connect(updatePanelSize)
0916                         }
0917
0918                         Component.onDestruction: {
0919                             valueChanged.disconnect(updatePanelSize)
0920                         }
0921                     }
0922
0923                     PlasmaComponents.Label {
0924                         enabled: showBackground.checked
0925                         text: i18nc("number in percentage, e.g. 85 %","%1 %", panelSizeSlider.value)
0926                         horizontalAlignment: Text.AlignRight
0927                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
0928                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
0929                     }
0930                 }
0931
0932                 RowLayout {
0933                     Layout.minimumWidth: dialog.optionsWidth
0934                     Layout.maximumWidth: Layout.minimumWidth
0935                     enabled: LatteCore.WindowSystem.compositingActive
0936
0937                     PlasmaComponents.Label {
0938                         text: plasmoid.configuration.backgroundOnlyOnMaximized && plasmoid.configuration.solidBackgroundForMaximized ?
0939                                   i18nc("opacity when desktop background is busy from contrast point of view","Busy Opacity") : i18n("Opacity")
0940                         horizontalAlignment: Text.AlignLeft
0941                         enabled: transparencySlider.enabled
0942                     }
0943
0944                     LatteComponents.Slider {
0945                         id: transparencySlider
0946                         Layout.fillWidth: true
0947                         enabled: showBackground.checked //&& !blockOpacityAdjustment
0948
0949                         value: plasmoid.configuration.panelTransparency
0950                         from: -1
0951                         to: 100
0952                         stepSize: 1
0953                         wheelEnabled: false
0954
0955                         function updatePanelTransparency() {
0956                             if (!pressed)
0957                                 plasmoid.configuration.panelTransparency = value
0958                         }
0959
0960                         onPressedChanged: {
0961                             updatePanelTransparency();
0962                         }
0963
0964                         Component.onCompleted: {
0965                             valueChanged.connect(updatePanelTransparency);
0966                         }
0967
0968                         Component.onDestruction: {
0969                             valueChanged.disconnect(updatePanelTransparency);
0970                         }
0971                     }
0972
0973                     PlasmaComponents.Label {
0974                         enabled: transparencySlider.enabled
0975                         text: transparencySlider.value >= 0 ? i18nc("number in percentage, e.g. 85 %","%1 %", transparencySlider.value) : i18nc("Default word abbreviation", "Def.")
0976                         horizontalAlignment: Text.AlignRight
0977                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
0978                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
0979                     }
0980                 }
0981
0982                 RowLayout {
0983                     Layout.minimumWidth: dialog.optionsWidth
0984                     Layout.maximumWidth: Layout.minimumWidth
0985                     visible: dialog.advancedLevel && dialog.kirigamiLibraryIsFound
0986
0987                     PlasmaComponents.Label {
0988                         text: i18n("Radius")
0989                         horizontalAlignment: Text.AlignLeft
0990                         enabled: radiusSlider.enabled
0991                     }
0992
0993                     LatteComponents.Slider {
0994                         id: radiusSlider
0995                         Layout.fillWidth: true
0996                         enabled: showBackground.checked
0997
0998                         value: plasmoid.configuration.backgroundRadius
0999                         from: -1
1000                         to: 50
1001                         stepSize: 1
1002                         wheelEnabled: false
1003
1004                         function updateBackgroundRadius() {
1005                             if (!pressed) {
1006                                 plasmoid.configuration.backgroundRadius = value
1007                             }
1008                         }
1009
1010                         onPressedChanged: updateBackgroundRadius();
1011                         Component.onCompleted: valueChanged.connect(updateBackgroundRadius);
1012                         Component.onDestruction: valueChanged.disconnect(updateBackgroundRadius);
1013                     }
1014
1015                     PlasmaComponents.Label {
1016                         enabled: radiusSlider.enabled
1017                         text: radiusSlider.value >= 0 ? i18nc("number in percentage, e.g. 85 %","%1 %", radiusSlider.value) : i18nc("Default word abbreviation", "Def.")
1018                         horizontalAlignment: Text.AlignRight
1019                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
1020                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
1021                     }
1022                 }
1023
1024                 RowLayout {
1025                     Layout.minimumWidth: dialog.optionsWidth
1026                     Layout.maximumWidth: Layout.minimumWidth
1027                     enabled: LatteCore.WindowSystem.compositingActive
1028                     visible: dialog.advancedLevel && dialog.kirigamiLibraryIsFound
1029
1030                     PlasmaComponents.Label {
1031                         text: i18n("Shadow")
1032                         horizontalAlignment: Text.AlignLeft
1033                         enabled: shadowSlider.enabled
1034                     }
1035
1036                     LatteComponents.Slider {
1037                         id: shadowSlider
1038                         Layout.fillWidth: true
1039                         enabled: showBackground.checked && panelShadows.checked
1040
1041                         value: plasmoid.configuration.backgroundShadowSize
1042                         from: -1
1043                         to: 50
1044                         stepSize: 1
1045                         wheelEnabled: false
1046
1047                         function updateBackgroundShadowSize() {
1048                             if (!pressed) {
1049                                 plasmoid.configuration.backgroundShadowSize = value
1050                             }
1051                         }
1052
1053                         onPressedChanged: updateBackgroundShadowSize();
1054                         Component.onCompleted: valueChanged.connect(updateBackgroundShadowSize);
1055                         Component.onDestruction: valueChanged.disconnect(updateBackgroundShadowSize);
1056                     }
1057
1058                     PlasmaComponents.Label {
1059                         enabled: shadowSlider.enabled
1060                         text: shadowSlider.value >= 0 ? i18nc("number in pixels, e.g. 12 px.", "%1 px.", shadowSlider.value ) : i18nc("Default word abbreviation", "Def.")
1061                         horizontalAlignment: Text.AlignRight
1062                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
1063                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
1064                     }
1065                 }
1066
1067                 RowLayout {
1068                     Layout.minimumWidth: dialog.optionsWidth
1069                     Layout.maximumWidth: Layout.minimumWidth
1070                     Layout.topMargin: units.smallSpacing
1071                     spacing: 2
1072                     visible: dialog.advancedLevel
1073
1074                     readonly property int buttonSize: (dialog.optionsWidth - (2 * spacing)) / children.length
1075
1076                     PlasmaComponents.Button {
1077                         id: panelBlur
1078                         Layout.minimumWidth: parent.buttonSize
1079                         Layout.maximumWidth: Layout.minimumWidth
1080                         text: i18n("Blur")
1081                         checkable: true
1082                         enabled: showBackground.checked && LatteCore.WindowSystem.compositingActive
1083                         tooltip: i18n("Background is blurred underneath")
1084
1085                         readonly property int blurEnabled: plasmoid.configuration.blurEnabled
1086
1087                         onBlurEnabledChanged: checked = blurEnabled;
1088
1089                         onClicked: {
1090                             plasmoid.configuration.blurEnabled  = checked
1091                         }
1092                     }
1093
1094                     PlasmaComponents.Button {
1095                         id: panelShadows
1096                         Layout.minimumWidth: parent.buttonSize
1097                         Layout.maximumWidth: Layout.minimumWidth
1098                         text: i18n("Shadows")
1099                         checkable: true
1100                         enabled: showBackground.checked && LatteCore.WindowSystem.compositingActive && themeExtended.hasShadow
1101                         tooltip: i18n("Background shows its shadows")
1102
1103                         readonly property int panelShadows: plasmoid.configuration.panelShadows
1104
1105                         onPanelShadowsChanged: checked = panelShadows
1106
1107                         onClicked: {
1108                             plasmoid.configuration.panelShadows  = checked
1109                         }
1110                     }
1111
1112                     PlasmaComponents.Button {
1113                         id: solidBackground
1114                         Layout.minimumWidth: parent.buttonSize
1115                         Layout.maximumWidth: Layout.minimumWidth
1116                         text: i18n("Outline")
1117                         checkable: true
1118                         checked: plasmoid.configuration.panelOutline
1119                         enabled: showBackground.checked
1120                         tooltip: i18n("Background draws a line for its borders. You can set the line size from Latte Preferences")
1121
1122                         onClicked: {
1123                             plasmoid.configuration.panelOutline = checked;
1124                         }
1125                     }
1126
1127                     PlasmaComponents.Button {
1128                         id: allCorners
1129                         Layout.minimumWidth: parent.buttonSize
1130                         Layout.maximumWidth: Layout.minimumWidth
1131                         text: i18n("All Corners")
1132                         checkable: true
1133                         checked: plasmoid.configuration.backgroundAllCorners
1134                         enabled: showBackground.checked
1135                                  && ((plasmoid.configuration.screenEdgeMargin===-1) /*no-floating*/
1136                                      || (plasmoid.configuration.screenEdgeMargin > -1 /*floating with justify alignment and 100% maxlength*/
1137                                          && plasmoid.configuration.alignment ===LatteCore.Types.Justify
1138                                          && plasmoid.configuration.maxLength===100))
1139                         tooltip: i18n("Background draws all corners at all cases.")
1140
1141                         onClicked: {
1142                             plasmoid.configuration.backgroundAllCorners = checked;
1143                         }
1144                     }
1145                 }
1146
1147                 LatteComponents.SubHeader {
1148                     visible: dialog.advancedLevel
1149                     text: i18nc("dynamic visibility for background", "Dynamic Visibility")
1150                     enabled: LatteCore.WindowSystem.compositingActive
1151                 }
1152
1153                 LatteComponents.CheckBoxesColumn {
1154                     enabled: LatteCore.WindowSystem.compositingActive
1155                     LatteComponents.CheckBox {
1156                         id: solidForMaximizedChk
1157                         Layout.maximumWidth: dialog.optionsWidth
1158                         text: i18n("Prefer opaque background when touching any window")
1159                         tooltip: i18n("Background removes its transparency setting when a window is touching")
1160                         enabled: showBackground.checked
1161                         visible: dialog.advancedLevel
1162                         value: plasmoid.configuration.solidBackgroundForMaximized
1163
1164                         onClicked: {
1165                             plasmoid.configuration.solidBackgroundForMaximized = !plasmoid.configuration.solidBackgroundForMaximized;
1166                         }
1167                     }
1168
1169                     LatteComponents.CheckBox {
1170                         id: onlyOnMaximizedChk
1171                         Layout.maximumWidth: dialog.optionsWidth
1172                         text: i18n("Hide background when not needed")
1173                         tooltip: i18n("Background becomes hidden except when a window is touching or the desktop background is busy")
1174                         enabled: showBackground.checked
1175                         visible: dialog.advancedLevel
1176                         value: plasmoid.configuration.backgroundOnlyOnMaximized
1177
1178                         onClicked: {
1179                             plasmoid.configuration.backgroundOnlyOnMaximized = !plasmoid.configuration.backgroundOnlyOnMaximized;
1180                         }
1181                     }
1182
1183                     LatteComponents.CheckBox {
1184                         id: hideShadowsOnMaximizedChk
1185                         Layout.maximumWidth: dialog.optionsWidth
1186                         text: i18n("Hide background shadow for maximized windows")
1187                         tooltip: i18n("Background shadows become hidden when an active maximized window is touching the view")
1188                         enabled: showBackground.checked
1189                         visible: dialog.advancedLevel
1190                         value: plasmoid.configuration.disablePanelShadowForMaximized
1191
1192                         onClicked: {
1193                             plasmoid.configuration.disablePanelShadowForMaximized = !plasmoid.configuration.disablePanelShadowForMaximized;
1194                         }
1195                     }
1196                 }
1197
1198                 LatteComponents.SubHeader {
1199                     visible: dialog.advancedLevel
1200                     text: i18n("Exceptions")
1201                     enabled: LatteCore.WindowSystem.compositingActive
1202                 }
1203
1204                 LatteComponents.CheckBox {
1205                     id: solidForPopupsChk
1206                     Layout.maximumWidth: dialog.optionsWidth
1207                     text: i18n("Prefer Plasma background and colors for expanded applets")
1208                     tooltip: i18n("Background becomes opaque in plasma style when applets are expanded")
1209                     enabled: showBackground.checked
1210                     visible: dialog.advancedLevel
1211                     value: plasmoid.configuration.plasmaBackgroundForPopups
1212
1213                     onClicked: {
1214                         plasmoid.configuration.plasmaBackgroundForPopups = !plasmoid.configuration.plasmaBackgroundForPopups;
1215                     }
1216                 }
1217             }
1218         }
1219         //! END: Background
1220     }
1221 }