Changeset View
Changeset View
Standalone View
Standalone View
examples/gallery/contents/ui/gallery/ButtonGallery.qml
| Show All 13 Lines | |||||
| 14 | * You should have received a copy of the GNU Library General Public | 14 | * You should have received a copy of the GNU Library General Public | ||
| 15 | * License along with this program; if not, write to the | 15 | * License along with this program; if not, write to the | ||
| 16 | * Free Software Foundation, Inc., | 16 | * Free Software Foundation, Inc., | ||
| 17 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | 17 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | ||
| 18 | */ | 18 | */ | ||
| 19 | 19 | | |||
| 20 | import QtQuick 2.0 | 20 | import QtQuick 2.0 | ||
| 21 | import QtQuick.Controls 1.2 as Controls | 21 | import QtQuick.Controls 1.2 as Controls | ||
| 22 | import QtQuick.Controls 2.0 as QQC2 | ||||
| 22 | import QtQuick.Layouts 1.2 | 23 | import QtQuick.Layouts 1.2 | ||
| 23 | import org.kde.kirigami 1.0 | 24 | import org.kde.kirigami 2.0 | ||
| 24 | 25 | | |||
| 25 | ScrollablePage { | 26 | ScrollablePage { | ||
| 26 | id: page | 27 | id: page | ||
| 27 | Layout.fillWidth: true | 28 | Layout.fillWidth: true | ||
| 28 | //implicitWidth: Units.gridUnit * (Math.floor(Math.random() * 35) + 10) | 29 | //implicitWidth: Units.gridUnit * (Math.floor(Math.random() * 35) + 10) | ||
| 29 | 30 | | |||
| 30 | title: "Buttons" | 31 | title: "Buttons" | ||
| 31 | 32 | | |||
| 32 | actions { | 33 | actions { | ||
| 33 | main: Action { | 34 | main: Action { | ||
| 34 | iconName: sheet.opened ? "dialog-cancel" : "document-edit" | 35 | iconName: sheet.sheetOpen ? "dialog-cancel" : "document-edit" | ||
| 35 | text: "Main Action Text" | 36 | text: "Main Action Text" | ||
| 36 | checked: sheet.opened | 37 | checked: sheet.sheetOpen | ||
| 37 | checkable: true | 38 | checkable: true | ||
| 38 | onCheckedChanged: sheet.opened = checked; | 39 | onCheckedChanged: sheet.sheetOpen = checked; | ||
| 39 | } | 40 | } | ||
| 40 | left: Action { | 41 | left: Action { | ||
| 41 | iconName: "go-previous" | 42 | iconName: "go-previous" | ||
| 42 | text: "Left Action Text" | 43 | text: "Left Action Text" | ||
| 43 | onTriggered: { | 44 | onTriggered: { | ||
| 44 | showPassiveNotification("Left action triggered") | 45 | showPassiveNotification("Left action triggered") | ||
| 45 | } | 46 | } | ||
| 46 | } | 47 | } | ||
| Show All 12 Lines | 55 | contextualActions: [ | |||
| 59 | }, | 60 | }, | ||
| 60 | Action { | 61 | Action { | ||
| 61 | text:"Disabled Action" | 62 | text:"Disabled Action" | ||
| 62 | iconName: "folder" | 63 | iconName: "folder" | ||
| 63 | enabled: false | 64 | enabled: false | ||
| 64 | }, | 65 | }, | ||
| 65 | Action { | 66 | Action { | ||
| 66 | text: "Action for Sheet" | 67 | text: "Action for Sheet" | ||
| 67 | visible: sheet.opened | 68 | visible: sheet.sheetOpen | ||
| 68 | } | 69 | } | ||
| 69 | ] | 70 | ] | ||
| 70 | } | 71 | } | ||
| 71 | 72 | | |||
| 72 | 73 | | |||
| 73 | //Close the drawer with the back button | 74 | //Close the drawer with the back button | ||
| 74 | onBackRequested: { | 75 | onBackRequested: { | ||
| 75 | if (bottomDrawer.opened) { | 76 | if (bottomDrawer.drawerOpen) { | ||
| 76 | event.accepted = true; | 77 | event.accepted = true; | ||
| 77 | bottomDrawer.close(); | 78 | bottomDrawer.close(); | ||
| 78 | } | 79 | } | ||
| 79 | if (sheet.opened) { | 80 | if (sheet.sheetOpen) { | ||
| 80 | event.accepted = true; | 81 | event.accepted = true; | ||
| 81 | sheet.close(); | 82 | sheet.close(); | ||
| 82 | } | 83 | } | ||
| 83 | } | 84 | } | ||
| 84 | 85 | | |||
| 85 | OverlayDrawer { | 86 | OverlayDrawer { | ||
| 86 | id: bottomDrawer | 87 | id: bottomDrawer | ||
| 87 | anchors.fill: parent | | |||
| 88 | edge: Qt.BottomEdge | 88 | edge: Qt.BottomEdge | ||
| 89 | contentItem: Item { | 89 | contentItem: Item { | ||
| 90 | implicitHeight: childrenRect.height + Units.gridUnit | 90 | implicitHeight: childrenRect.height + Units.gridUnit | ||
| 91 | ColumnLayout { | 91 | ColumnLayout { | ||
| 92 | anchors.centerIn: parent | 92 | anchors.centerIn: parent | ||
| 93 | Controls.Button { | 93 | QQC2.Button { | ||
| 94 | text: "Button1" | 94 | text: "Button1" | ||
| 95 | onClicked: showPassiveNotification("Button 1 clicked") | 95 | onClicked: showPassiveNotification("Button 1 clicked") | ||
| 96 | } | 96 | } | ||
| 97 | Controls.Button { | 97 | QQC2.Button { | ||
| 98 | text: "Button2" | 98 | text: "Button2" | ||
| 99 | onClicked: showPassiveNotification("Button 2 clicked") | 99 | onClicked: showPassiveNotification("Button 2 clicked") | ||
| 100 | } | 100 | } | ||
| 101 | Item { | 101 | Item { | ||
| 102 | Layout.minimumHeight: Units.gridUnit * 4 | 102 | Layout.minimumHeight: Units.gridUnit * 4 | ||
| 103 | } | 103 | } | ||
| 104 | } | 104 | } | ||
| 105 | } | 105 | } | ||
| 106 | } | 106 | } | ||
| 107 | 107 | | |||
| 108 | | ||||
| 108 | OverlaySheet { | 109 | OverlaySheet { | ||
| 109 | id: sheet | 110 | id: sheet | ||
| 110 | ColumnLayout { | 111 | ColumnLayout { | ||
| 111 | Label { | 112 | Label { | ||
| 112 | Layout.fillWidth: true | 113 | Layout.fillWidth: true | ||
| 113 | wrapMode: Text.WordWrap | 114 | wrapMode: Text.WordWrap | ||
| 114 | text: " | 115 | text: " | ||
| 115 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id risus id augue euismod accumsan. Nunc vestibulum placerat bibendum. Morbi commodo auctor varius. Donec molestie euismod ultrices. Sed facilisis augue nec eros auctor, vitae mattis quam rhoncus. Nam ut erat diam. Curabitur iaculis accumsan magna, eget fermentum massa scelerisque eu. Cras elementum erat non erat euismod accumsan. Vestibulum ac mi sed dui finibus pulvinar. Vivamus dictum, leo sed lobortis porttitor, nisl magna faucibus orci, sit amet euismod arcu elit eget est. Duis et vehicula nibh. In arcu sapien, laoreet sit amet porttitor non, rhoncus vel magna. Suspendisse imperdiet consectetur est nec ornare. Pellentesque bibendum sapien at erat efficitur vehicula. Morbi sed porta nibh. Vestibulum ut urna ut dolor sagittis mattis." | 116 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id risus id augue euismod accumsan. Nunc vestibulum placerat bibendum. Morbi commodo auctor varius. Donec molestie euismod ultrices. Sed facilisis augue nec eros auctor, vitae mattis quam rhoncus. Nam ut erat diam. Curabitur iaculis accumsan magna, eget fermentum massa scelerisque eu. Cras elementum erat non erat euismod accumsan. Vestibulum ac mi sed dui finibus pulvinar. Vivamus dictum, leo sed lobortis porttitor, nisl magna faucibus orci, sit amet euismod arcu elit eget est. Duis et vehicula nibh. In arcu sapien, laoreet sit amet porttitor non, rhoncus vel magna. Suspendisse imperdiet consectetur est nec ornare. Pellentesque bibendum sapien at erat efficitur vehicula. Morbi sed porta nibh. Vestibulum ut urna ut dolor sagittis mattis." | ||
| Show All 10 Lines | |||||
| 126 | Morbi dictum, sapien at maximus pulvinar, sapien metus condimentum magna, quis lobortis nisi dui mollis turpis. Aliquam sit amet scelerisque dui. In sit amet tellus placerat, condimentum enim sed, hendrerit quam. Integer dapibus lobortis finibus. Suspendisse faucibus eros vitae ante posuere blandit. Nullam volutpat quam id diam hendrerit aliquam. Donec non sem at diam posuere convallis. Vivamus ut congue quam. Ut dictum fermentum sapien, eu ultricies est ornare ut. | 127 | Morbi dictum, sapien at maximus pulvinar, sapien metus condimentum magna, quis lobortis nisi dui mollis turpis. Aliquam sit amet scelerisque dui. In sit amet tellus placerat, condimentum enim sed, hendrerit quam. Integer dapibus lobortis finibus. Suspendisse faucibus eros vitae ante posuere blandit. Nullam volutpat quam id diam hendrerit aliquam. Donec non sem at diam posuere convallis. Vivamus ut congue quam. Ut dictum fermentum sapien, eu ultricies est ornare ut. | ||
| 127 | 128 | | |||
| 128 | Nullam fringilla a libero vehicula faucibus. Donec euismod sodales nulla, in vehicula lectus posuere a. Donec nisi nulla, pulvinar eu porttitor vitae, varius eget ante. Nam rutrum eleifend elit, quis facilisis leo sodales vitae. Aenean accumsan a nulla at sagittis. Integer placerat tristique magna, vitae iaculis ante cursus sit amet. Sed facilisis mollis turpis nec tristique. Etiam quis feugiat odio. Vivamus sagittis at purus nec aliquam. | 129 | Nullam fringilla a libero vehicula faucibus. Donec euismod sodales nulla, in vehicula lectus posuere a. Donec nisi nulla, pulvinar eu porttitor vitae, varius eget ante. Nam rutrum eleifend elit, quis facilisis leo sodales vitae. Aenean accumsan a nulla at sagittis. Integer placerat tristique magna, vitae iaculis ante cursus sit amet. Sed facilisis mollis turpis nec tristique. Etiam quis feugiat odio. Vivamus sagittis at purus nec aliquam. | ||
| 129 | 130 | | |||
| 130 | Morbi neque dolor, elementum ac fermentum ac, auctor ut erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus non nibh sit amet quam luctus congue. Donec in eros varius, porta metus sed, sagittis lacus. Mauris dapibus lorem nisi, non eleifend massa tristique egestas. Curabitur nec blandit urna. Mauris rhoncus libero felis, commodo viverra ante consectetur vel. Donec dictum tincidunt orci, quis tristique urna. Quisque egestas, dui ac mollis dictum, purus velit elementum est, at pellentesque erat est fermentum purus. Nulla a quam tellus. Vestibulum a congue ligula. Quisque feugiat nulla et tortor sodales viverra. Maecenas dolor leo, elementum sed urna vel, posuere hendrerit metus. Mauris pellentesque, mi non luctus aliquam, leo nulla varius arcu, vel pulvinar enim enim nec nisl. | 131 | Morbi neque dolor, elementum ac fermentum ac, auctor ut erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus non nibh sit amet quam luctus congue. Donec in eros varius, porta metus sed, sagittis lacus. Mauris dapibus lorem nisi, non eleifend massa tristique egestas. Curabitur nec blandit urna. Mauris rhoncus libero felis, commodo viverra ante consectetur vel. Donec dictum tincidunt orci, quis tristique urna. Quisque egestas, dui ac mollis dictum, purus velit elementum est, at pellentesque erat est fermentum purus. Nulla a quam tellus. Vestibulum a congue ligula. Quisque feugiat nulla et tortor sodales viverra. Maecenas dolor leo, elementum sed urna vel, posuere hendrerit metus. Mauris pellentesque, mi non luctus aliquam, leo nulla varius arcu, vel pulvinar enim enim nec nisl. | ||
| 131 | 132 | | |||
| 132 | Etiam sapien leo, venenatis eget justo at, pellentesque mollis tellus. Fusce consequat ullamcorper vulputate. Duis tellus nisi, dictum ut augue non, elementum congue ligula. Fusce in vehicula arcu. Nulla facilisi. Quisque a convallis sapien. Aenean pellentesque convallis egestas. Phasellus rhoncus, nulla in tempor maximus, arcu ex venenatis diam, sit amet egestas mi dolor non ante. " | 133 | Etiam sapien leo, venenatis eget justo at, pellentesque mollis tellus. Fusce consequat ullamcorper vulputate. Duis tellus nisi, dictum ut augue non, elementum congue ligula. Fusce in vehicula arcu. Nulla facilisi. Quisque a convallis sapien. Aenean pellentesque convallis egestas. Phasellus rhoncus, nulla in tempor maximus, arcu ex venenatis diam, sit amet egestas mi dolor non ante. " | ||
| 133 | } | 134 | } | ||
| 134 | Controls.Button { | 135 | QQC2.Button { | ||
| 135 | text: "Close" | 136 | text: "Close" | ||
| 136 | anchors.horizontalCenter: parent.horizontalCenter | 137 | anchors.horizontalCenter: parent.horizontalCenter | ||
| 137 | onClicked: sheet.close() | 138 | onClicked: sheet.close() | ||
| 138 | } | 139 | } | ||
| 139 | } | 140 | } | ||
| 140 | } | 141 | } | ||
| 141 | ColumnLayout { | 142 | ColumnLayout { | ||
| 142 | width: page.width | 143 | width: page.width | ||
| 143 | spacing: Units.smallSpacing | 144 | spacing: Units.smallSpacing | ||
| 144 | 145 | | |||
| 145 | Controls.Button { | 146 | QQC2.Button { | ||
| 146 | text: "Open Bottom drawer" | 147 | text: "Open Bottom drawer" | ||
| 147 | anchors.horizontalCenter: parent.horizontalCenter | 148 | anchors.horizontalCenter: parent.horizontalCenter | ||
| 148 | onClicked: bottomDrawer.open() | 149 | onClicked: bottomDrawer.open() | ||
| 149 | } | 150 | } | ||
| 150 | Controls.Button { | 151 | QQC2.Button { | ||
| 151 | text: "Open Sheet" | 152 | text: "Open Sheet" | ||
| 152 | anchors.horizontalCenter: parent.horizontalCenter | 153 | anchors.horizontalCenter: parent.horizontalCenter | ||
| 153 | onClicked: sheet.open() | 154 | onClicked: sheet.open() | ||
| 154 | } | 155 | } | ||
| 155 | Controls.Button { | 156 | QQC2.Button { | ||
| 156 | text: "Toggle Action Button" | 157 | text: "Toggle Action Button" | ||
| 157 | anchors.horizontalCenter: parent.horizontalCenter | 158 | anchors.horizontalCenter: parent.horizontalCenter | ||
| 158 | onClicked: mainAction.visible = !mainAction.visible; | 159 | onClicked: mainAction.visible = !mainAction.visible; | ||
| 159 | } | 160 | } | ||
| 160 | Controls.Button { | 161 | QQC2.Button { | ||
| 161 | text: "Show Passive Notification" | 162 | text: "Show Passive Notification" | ||
| 162 | anchors.horizontalCenter: parent.horizontalCenter | 163 | anchors.horizontalCenter: parent.horizontalCenter | ||
| 163 | onClicked: showPassiveNotification("This is a passive message", 3000); | 164 | onClicked: showPassiveNotification("This is a passive message", 3000); | ||
| 164 | } | 165 | } | ||
| 165 | Controls.Button { | 166 | QQC2.Button { | ||
| 166 | text: "Passive Notification Action" | 167 | text: "Passive Notification Action" | ||
| 167 | anchors.horizontalCenter: parent.horizontalCenter | 168 | anchors.horizontalCenter: parent.horizontalCenter | ||
| 168 | onClicked: showPassiveNotification("This is a passive message", "long", "Action", function() {showPassiveNotification("Passive notification action clicked")}); | 169 | onClicked: showPassiveNotification("This is a passive message", "long", "Action", function() {showPassiveNotification("Passive notification action clicked")}); | ||
| 169 | } | 170 | } | ||
| 170 | Controls.ToolButton { | 171 | QQC2.ToolButton { | ||
| 171 | text: "Toggle controls" | 172 | text: "Toggle controls" | ||
| 172 | checkable: true | 173 | checkable: true | ||
| 173 | checked: true | 174 | checked: true | ||
| 174 | anchors.horizontalCenter: parent.horizontalCenter | 175 | anchors.horizontalCenter: parent.horizontalCenter | ||
| 175 | onCheckedChanged: applicationWindow().controlsVisible = checked | 176 | onCheckedChanged: applicationWindow().controlsVisible = checked | ||
| 176 | } | 177 | } | ||
| 177 | Controls.Button { | 178 | QQC2.Button { | ||
| 178 | text: "Disabled Button" | 179 | text: "Disabled Button" | ||
| 179 | enabled: false | 180 | enabled: false | ||
| 180 | anchors.horizontalCenter: parent.horizontalCenter | 181 | anchors.horizontalCenter: parent.horizontalCenter | ||
| 181 | onClicked: showPassiveNotification("clicked") | 182 | onClicked: showPassiveNotification("clicked") | ||
| 182 | } | 183 | } | ||
| 183 | Controls.ToolButton { | 184 | QQC2.ToolButton { | ||
| 184 | text: "Tool Button" | 185 | text: "Tool Button" | ||
| 185 | anchors.horizontalCenter: parent.horizontalCenter | 186 | anchors.horizontalCenter: parent.horizontalCenter | ||
| 186 | onClicked: showPassiveNotification(text + " clicked") | 187 | onClicked: showPassiveNotification(text + " clicked") | ||
| 187 | } | 188 | } | ||
| 188 | Controls.ToolButton { | 189 | QQC2.ToolButton { | ||
| 189 | text: "Tool Button non flat" | 190 | text: "Tool Button non flat" | ||
| 190 | property bool flat: false | 191 | flat: false | ||
| 191 | anchors.horizontalCenter: parent.horizontalCenter | 192 | anchors.horizontalCenter: parent.horizontalCenter | ||
| 192 | onClicked: showPassiveNotification(text + " clicked") | 193 | onClicked: showPassiveNotification(text + " clicked") | ||
| 193 | } | 194 | } | ||
| 194 | Controls.ToolButton { | | |||
| 195 | iconName: "go-previous" | | |||
| 196 | property bool flat: false | | |||
| 197 | anchors.horizontalCenter: parent.horizontalCenter | | |||
| 198 | onClicked: showPassiveNotification("Button clicked") | | |||
| 199 | } | | |||
| 200 | Row { | | |||
| 201 | spacing: 0 | | |||
| 202 | anchors.horizontalCenter: parent.horizontalCenter | | |||
| 203 | Controls.ToolButton { | | |||
| 204 | iconName: "edit-cut" | | |||
| 205 | property bool flat: false | | |||
| 206 | onClicked: showPassiveNotification("Cut clicked") | | |||
| 207 | } | | |||
| 208 | Controls.ToolButton { | | |||
| 209 | iconName: "edit-copy" | | |||
| 210 | property bool flat: false | | |||
| 211 | onClicked: showPassiveNotification("Copy clicked") | | |||
| 212 | } | | |||
| 213 | Controls.ToolButton { | | |||
| 214 | iconName: "edit-paste" | | |||
| 215 | property bool flat: false | | |||
| 216 | onClicked: showPassiveNotification("Paste clicked") | | |||
| 217 | } | | |||
| 218 | } | | |||
| 219 | } | 195 | } | ||
| 220 | } | 196 | } | ||