Changeset View
Changeset View
Standalone View
Standalone View
containments/desktop/package/contents/ui/ActionButton.qml
Show All 12 Lines | |||||
13 | * GNU Library General Public License for more details | 13 | * GNU Library General Public License for more details | ||
14 | * | 14 | * | ||
15 | * You should have received a copy of the GNU Library General Public | 15 | * You should have received a copy of the GNU Library General Public | ||
16 | * License along with this program; if not, write to the | 16 | * License along with this program; if not, write to the | ||
17 | * Free Software Foundation, Inc., | 17 | * Free Software Foundation, Inc., | ||
18 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | 18 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | ||
19 | */ | 19 | */ | ||
20 | 20 | | |||
21 | import QtQuick 2.0 | 21 | import QtQuick 2.12 | ||
22 | import QtQuick.Layouts 1.4 | ||||
23 | | ||||
22 | import org.kde.plasma.core 2.0 as PlasmaCore | 24 | import org.kde.plasma.core 2.0 as PlasmaCore | ||
23 | import org.kde.plasma.components 2.0 as PlasmaComponents | 25 | import org.kde.plasma.components 2.0 as PlasmaComponents | ||
24 | 26 | | |||
25 | PlasmaCore.ToolTipArea { | 27 | PlasmaCore.ToolTipArea { | ||
26 | id: button | 28 | id: button | ||
27 | 29 | | |||
28 | location: PlasmaCore.Types.LeftEdge | 30 | location: PlasmaCore.Types.LeftEdge | ||
29 | mainText: action !== undefined ? action.text : "" | 31 | mainText: action !== undefined ? action.text : "" | ||
30 | mainItem: toolTipDelegate | 32 | mainItem: toolTipDelegate | ||
31 | 33 | | |||
32 | //API | 34 | //API | ||
33 | property PlasmaCore.Svg svg | 35 | property PlasmaCore.Svg svg | ||
34 | property alias elementId: icon.elementId | 36 | property alias elementId: icon.elementId | ||
35 | property QtObject action | 37 | property QtObject action | ||
36 | property bool backgroundVisible: false | 38 | property bool backgroundVisible: checked | ||
37 | property int iconSize: 32 | 39 | property int iconSize: 32 | ||
38 | property int pressedOffset: 1 | 40 | property int pressedOffset: 1 | ||
39 | property bool checked: false | 41 | property bool checked: false | ||
40 | property bool toggle: false | 42 | property bool toggle: false | ||
41 | property string text | 43 | property string text | ||
42 | signal clicked | 44 | signal clicked | ||
43 | 45 | | |||
44 | implicitWidth: buttonRow.implicitWidth | 46 | implicitWidth: buttonColumn.implicitWidth | ||
45 | implicitHeight: buttonRow.implicitHeight | 47 | implicitHeight: buttonColumn.implicitHeight | ||
46 | 48 | | |||
47 | opacity: action==undefined||action.enabled?1:0.6 | 49 | opacity: action==undefined||action.enabled?1:0.6 | ||
48 | 50 | | |||
49 | Behavior on opacity { | 51 | Behavior on opacity { | ||
50 | NumberAnimation { | 52 | NumberAnimation { | ||
51 | duration: units.longDuration | 53 | duration: units.longDuration | ||
52 | easing.type: Easing.InOutQuad | 54 | easing.type: Easing.InOutQuad | ||
davidedmundson: I try and follow a rule to have a rule that all:
Layout.*
Anchors.*
width/x/y/height… | |||||
53 | } | 55 | } | ||
54 | } | 56 | } | ||
55 | 57 | | |||
56 | onCheckedChanged: { | 58 | onCheckedChanged: { | ||
57 | if (checked) { | 59 | if (checked) { | ||
58 | buttonItem.elementId = "pressed" | 60 | buttonItem.elementId = "pressed" | ||
59 | shadowItem.opacity = 0 | 61 | shadowItem.opacity = 0 | ||
60 | } else { | 62 | } else { | ||
Show All 11 Lines | 73 | PlasmaCore.SvgItem { | |||
72 | id: shadowItem | 74 | id: shadowItem | ||
73 | svg: buttonSvg | 75 | svg: buttonSvg | ||
74 | elementId: "shadow" | 76 | elementId: "shadow" | ||
75 | width: iconSize+13//button.backgroundVisible?iconSize+8:iconSize | 77 | width: iconSize+13//button.backgroundVisible?iconSize+8:iconSize | ||
76 | height: width | 78 | height: width | ||
77 | visible: button.backgroundVisible | 79 | visible: button.backgroundVisible | ||
78 | } | 80 | } | ||
79 | 81 | | |||
80 | Row { | 82 | ColumnLayout { | ||
81 | id: buttonRow | 83 | id: buttonColumn | ||
82 | 84 | | |||
83 | Item { | 85 | Item { | ||
84 | width: buttonItem.visible?buttonItem.width:iconSize | 86 | width: buttonItem.visible?buttonItem.width:iconSize | ||
85 | height: buttonItem.visible?buttonItem.height:iconSize | 87 | height: buttonItem.visible?buttonItem.height:iconSize | ||
86 | 88 | | |||
87 | PlasmaCore.SvgItem { | 89 | PlasmaCore.SvgItem { | ||
88 | id: buttonItem | 90 | id: buttonItem | ||
89 | svg: buttonSvg | 91 | svg: buttonSvg | ||
90 | elementId: "normal" | 92 | elementId: "normal" | ||
91 | width: shadowItem.width | 93 | width: shadowItem.width | ||
92 | height: shadowItem.height | 94 | height: shadowItem.height | ||
93 | visible: backgroundVisible | 95 | visible: backgroundVisible | ||
94 | } | 96 | } | ||
95 | 97 | | |||
96 | PlasmaCore.SvgItem { | 98 | PlasmaCore.SvgItem { | ||
97 | id: icon | 99 | id: icon | ||
98 | width: iconSize | 100 | width: iconSize | ||
99 | height: iconSize | 101 | height: iconSize | ||
100 | svg: button.svg | 102 | svg: button.svg | ||
101 | anchors.centerIn: parent | 103 | anchors.centerIn: parent | ||
102 | } | 104 | } | ||
103 | } | 105 | } | ||
104 | 106 | | |||
105 | Text { | 107 | PlasmaComponents.Label { | ||
106 | id: actionText | 108 | id: actionText | ||
107 | text: button.text | 109 | text: button.text | ||
108 | style: Text.Outline | 110 | wrapMode: Text.WordWrap | ||
109 | color: theme.textColor | 111 | //anchors.verticalCenter: parent.verticalCenter | ||
110 | styleColor: Qt.rgba(1,1,1,0.4) | | |||
111 | anchors.verticalCenter: parent.verticalCenter | | |||
112 | } | 112 | } | ||
113 | } | 113 | } | ||
114 | 114 | | |||
115 | MouseArea { | 115 | MouseArea { | ||
116 | anchors.fill: parent | 116 | anchors.fill: parent | ||
117 | anchors.leftMargin: -10 | 117 | anchors.leftMargin: -10 | ||
118 | anchors.topMargin: -10 | 118 | anchors.topMargin: -10 | ||
119 | anchors.rightMargin: -10 | 119 | anchors.rightMargin: -10 | ||
Show All 29 Lines |
I try and follow a rule to have a rule that all:
Layout.*
Anchors.*
width/x/y/height properties
Should be in the code of whoever creates the component, not in the component itself. (i.e ConfigOverlay) it makes things more portable