client/indicators/LatteIndicator.qml

0001 /*
0002     SPDX-FileCopyrightText: 2019 Michail Vourlakos <mvourlakos@gmail.com>
0003     SPDX-License-Identifier: GPL-2.0-or-later
0004 */
0005
0006 import QtQuick 2.0
0007 import QtQuick.Layouts 1.1
0008 import QtGraphicalEffects 1.0
0009
0010 import org.kde.plasma.plasmoid 2.0
0011 import org.kde.plasma.core 2.0 as PlasmaCore
0012 import org.kde.plasma.components 2.0 as PlasmaComponents
0013
0014 import org.kde.latte.core 0.2 as LatteCore
0015 import org.kde.latte.components 1.0 as LatteComponents
0016
0017 LatteComponents.IndicatorItem{
0018     id: root
0019     extraMaskThickness: reversedEnabled && glowEnabled ? 1.7 * (factor * indicator.maxIconSize) : 0
0020
0021     enabledForApplets: indicator && indicator.configuration ? indicator.configuration.enabledForApplets : true
0022     lengthPadding: indicator && indicator.configuration ? indicator.configuration.lengthPadding : 0.08
0023
0024     readonly property real factor: 0.08
0025     readonly property int size: factor * indicator.currentIconSize
0026
0027     readonly property int screenEdgeMargin: plasmoid.location === PlasmaCore.Types.Floating || reversedEnabled ? 0 : indicator.screenEdgeMargin
0028
0029     property real textColorBrightness: colorBrightness(theme.textColor)
0030
0031     property color isActiveColor: theme.buttonFocusColor
0032     property color minimizedColor: {
0033         if (minimizedTaskColoredDifferently) {
0034             return (textColorBrightness > 127.5 ? Qt.darker(theme.textColor, 1.7) : Qt.lighter(theme.textColor, 7));
0035         }
0036
0037         return isActiveColor;
0038     }
0039
0040     property color notActiveColor: indicator.isMinimized ? minimizedColor : isActiveColor
0041
0042     //! Common Options
0043     readonly property bool reversedEnabled: indicator.configuration.reversed
0044
0045     //! Configuration Options
0046     readonly property bool extraDotOnActive: indicator.configuration.extraDotOnActive
0047     readonly property bool minimizedTaskColoredDifferently: indicator.configuration.minimizedTaskColoredDifferently
0048     readonly property int activeStyle: indicator.configuration.activeStyle
0049     //!glow options
0050     readonly property bool glowEnabled: indicator.configuration.glowEnabled
0051     readonly property bool glow3D: indicator.configuration.glow3D
0052     readonly property int glowApplyTo: indicator.configuration.glowApplyTo
0053     readonly property real glowOpacity: indicator.configuration.glowOpacity
0054
0055     /*Rectangle{
0056         anchors.fill: parent
0057         border.width: 1
0058         border.color: "yellow"
0059         color: "transparent"
0060         opacity:0.6
0061     }*/
0062
0063     function colorBrightness(color) {
0064         return colorBrightnessFromRGB(color.r * 255, color.g * 255, color.b * 255);
0065     }
0066
0067     // formula for brightness according to:
0068     // https://www.w3.org/TR/AERT/#color-contrast
0069     function colorBrightnessFromRGB(r, g, b) {
0070         return (r * 299 + g * 587 + b * 114) / 1000
0071     }
0072
0073     Item{
0074         id: mainIndicatorElement
0075
0076         width: flowItem.width
0077         height: flowItem.height
0078
0079         Flow{
0080             id: flowItem
0081             flow: plasmoid.formFactor === PlasmaCore.Types.Vertical ? Flow.TopToBottom : Flow.LeftToRight
0082
0083             LatteComponents.GlowPoint{
0084                 id:firstPoint
0085                 opacity: {
0086                     if (indicator.isEmptySpace) {
0087                         return 0;
0088                     }
0089
0090                     if (indicator.isTask) {
0091                         return indicator.isLauncher || (indicator.inRemoving && !activeAndReverseAnimation.running) ? 0 : 1
0092                     }
0093
0094                     if (indicator.isApplet) {
0095                         return (indicator.isActive || activeAndReverseAnimation.running) ? 1 : 0
0096                     }
0097                 }
0098
0099                 basicColor: indicator.isActive || (indicator.isGroup && indicator.hasShown) ? root.isActiveColor : root.notActiveColor
0100
0101                 size: root.size
0102                 glow3D: glow3D
0103                 animation: Math.max(1.65*3*LatteCore.Environment.longDuration,indicator.durationTime*3*LatteCore.Environment.longDuration)
0104                 location: plasmoid.location
0105                 glowOpacity: root.glowOpacity
0106                 contrastColor: indicator.shadowColor
0107                 attentionColor: theme.negativeTextColor
0108
0109                 roundCorners: true
0110                 showAttention: indicator.inAttention
0111                 showGlow: {
0112                     if (glowEnabled && (glowApplyTo === 2 /*All*/ || showAttention ))
0113                         return true;
0114                     else if (glowEnabled && glowApplyTo === 1 /*OnActive*/ && indicator.hasActive)
0115                         return true;
0116                     else
0117                         return false;
0118                 }
0119                 showBorder: glowEnabled && glow3D
0120
0121                 property int stateWidth: indicator.isGroup ? root.width - secondPoint.width : root.width - spacer.width
0122                 property int stateHeight: indicator.isGroup ? root.height - secondPoint.height : root.height - spacer.height
0123
0124                 property int animationTime: indicator.durationTime* (0.7*LatteCore.Environment.longDuration)
0125
0126                 property bool isActive: indicator.hasActive || indicator.isActive
0127
0128                 property bool vertical: plasmoid.formFactor === PlasmaCore.Types.Vertical
0129
0130                 property real scaleFactor: indicator.scaleFactor
0131
0132                 function updateInitialSizes(){
0133                     if(root){
0134                         if(vertical)
0135                             width = root.size;
0136                         else
0137                             height = root.size;
0138
0139                         if(vertical && isActive && activeStyle === 0 /*Line*/)
0140                             height = stateHeight;
0141                         else
0142                             height = root.size;
0143
0144                         if(!vertical && isActive && activeStyle === 0 /*Line*/)
0145                             width = stateWidth;
0146                         else
0147                             width = root.size;
0148                     }
0149                 }
0150
0151
0152                 onIsActiveChanged: {
0153                     if (activeStyle === 0 /*Line*/)
0154                         activeAndReverseAnimation.start();
0155                 }
0156
0157                 onScaleFactorChanged: {
0158                     if(!activeAndReverseAnimation.running && !vertical && isActive && activeStyle === 0 /*Line*/){
0159                         width = stateWidth;
0160                     }
0161                     else if (!activeAndReverseAnimation.running && vertical && isActive && activeStyle === 0 /*Line*/){
0162                         height = stateHeight;
0163                     }
0164                 }
0165
0166                 onStateWidthChanged:{
0167                     if(!activeAndReverseAnimation.running && !vertical && isActive && activeStyle === 0 /*Line*/)
0168                         width = stateWidth;
0169                 }
0170
0171                 onStateHeightChanged:{
0172                     if(!activeAndReverseAnimation.running && vertical && isActive && activeStyle === 0 /*Line*/)
0173                         height = stateHeight;
0174                 }
0175
0176                 onVerticalChanged: updateInitialSizes();
0177
0178                 Component.onCompleted: {
0179                     updateInitialSizes();
0180
0181                     if (indicator) {
0182                         indicator.onCurrentIconSizeChanged.connect(updateInitialSizes);
0183                     }
0184                 }
0185
0186                 Component.onDestruction: {
0187                     if (indicator) {
0188                         indicator.onCurrentIconSizeChanged.disconnect(updateInitialSizes);
0189                     }
0190                 }
0191
0192                 NumberAnimation{
0193                     id: activeAndReverseAnimation
0194                     target: firstPoint
0195                     property: plasmoid.formFactor === PlasmaCore.Types.Vertical ? "height" : "width"
0196                     to: indicator.hasActive && activeStyle === 0 /*Line*/
0197                         ? (plasmoid.formFactor === PlasmaCore.Types.Vertical ? firstPoint.stateHeight : firstPoint.stateWidth) : root.size
0198                     duration: firstPoint.animationTime
0199                     easing.type: Easing.InQuad
0200
0201                     onStopped: firstPoint.updateInitialSizes()
0202                 }
0203             }
0204
0205             Item{
0206                 id:spacer
0207                 width: secondPoint.visible ? 0.5*root.size : 0
0208                 height: secondPoint.visible ? 0.5*root.size : 0
0209             }
0210
0211             LatteComponents.GlowPoint{
0212                 id:secondPoint
0213                 width: visible ? root.size : 0
0214                 height: width
0215
0216                 size: root.size
0217                 glow3D: glow3D
0218                 animation: Math.max(1.65*3*LatteCore.Environment.longDuration,indicator.durationTime*3*LatteCore.Environment.longDuration)
0219                 location: plasmoid.location
0220                 glowOpacity: root.glowOpacity
0221                 contrastColor: indicator.shadowColor
0222                 showBorder: glowEnabled && glow3D
0223
0224                 basicColor: state2Color
0225                 roundCorners: true
0226                 showGlow: glowEnabled  && glowApplyTo === 2 /*All*/
0227                 visible:  ( indicator.isGroup && ((extraDotOnActive && activeStyle === 0) /*Line*/
0228                                                   || activeStyle === 1 /*Dot*/
0229                                                   || !indicator.hasActive) ) ? true: false
0230
0231                 //when there is no active window
0232                 property color state1Color: indicator.hasShown ? root.isActiveColor : root.minimizedColor
0233                 //when there is active window
0234                 property color state2Color: indicator.hasMinimized ? root.minimizedColor : root.isActiveColor
0235             }
0236         }
0237
0238         states: [
0239             State {
0240                 name: "left"
0241                 when: ((plasmoid.location === PlasmaCore.Types.LeftEdge && !reversedEnabled) ||
0242                        (plasmoid.location === PlasmaCore.Types.RightEdge && reversedEnabled))
0243
0244                 AnchorChanges {
0245                     target: mainIndicatorElement
0246                     anchors{ verticalCenter:parent.verticalCenter; horizontalCenter:undefined;
0247                         top:undefined; bottom:undefined; left:parent.left; right:undefined;}
0248                 }
0249                 PropertyChanges{
0250                     target: mainIndicatorElement
0251                     anchors.leftMargin: root.screenEdgeMargin;    anchors.rightMargin: 0;     anchors.topMargin:0;    anchors.bottomMargin:0;
0252                     anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
0253                 }
0254             },
0255             State {
0256                 name: "bottom"
0257                 when: (plasmoid.location === PlasmaCore.Types.Floating ||
0258                        (plasmoid.location === PlasmaCore.Types.BottomEdge && !reversedEnabled) ||
0259                        (plasmoid.location === PlasmaCore.Types.TopEdge && reversedEnabled))
0260
0261                 AnchorChanges {
0262                     target: mainIndicatorElement
0263                     anchors{ verticalCenter:undefined; horizontalCenter:parent.horizontalCenter;
0264                         top:undefined; bottom:parent.bottom; left:undefined; right:undefined;}
0265                 }
0266                 PropertyChanges{
0267                     target: mainIndicatorElement
0268                     anchors.leftMargin: 0;    anchors.rightMargin: 0;     anchors.topMargin:0;    anchors.bottomMargin: root.screenEdgeMargin;
0269                     anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
0270                 }
0271             },
0272             State {
0273                 name: "top"
0274                 when: ((plasmoid.location === PlasmaCore.Types.TopEdge && !reversedEnabled) ||
0275                        (plasmoid.location === PlasmaCore.Types.BottomEdge && reversedEnabled))
0276
0277                 AnchorChanges {
0278                     target: mainIndicatorElement
0279                     anchors{ verticalCenter:undefined; horizontalCenter:parent.horizontalCenter;
0280                         top:parent.top; bottom:undefined; left:undefined; right:undefined;}
0281                 }
0282                 PropertyChanges{
0283                     target: mainIndicatorElement
0284                     anchors.leftMargin: 0;    anchors.rightMargin: 0;     anchors.topMargin: root.screenEdgeMargin;    anchors.bottomMargin:0;
0285                     anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
0286                 }
0287             },
0288             State {
0289                 name: "right"
0290                 when: ((plasmoid.location === PlasmaCore.Types.RightEdge && !reversedEnabled) ||
0291                        (plasmoid.location === PlasmaCore.Types.LeftEdge && reversedEnabled))
0292
0293                 AnchorChanges {
0294                     target: mainIndicatorElement
0295                     anchors{ verticalCenter:parent.verticalCenter; horizontalCenter:undefined;
0296                         top:undefined; bottom:undefined; left:undefined; right:parent.right;}
0297                 }
0298                 PropertyChanges{
0299                     target: mainIndicatorElement
0300                     anchors.leftMargin: 0;    anchors.rightMargin: root.screenEdgeMargin;     anchors.topMargin:0;    anchors.bottomMargin:0;
0301                     anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
0302                 }
0303             }
0304         ]
0305     }
0306 }// number of windows indicator
0307