Changeset View
Changeset View
Standalone View
Standalone View
cuttlefish/package/contents/ui/Preview.qml
| Show All 14 Lines | |||||
| 15 | * You should have received a copy of the GNU General Public License * | 15 | * You should have received a copy of the GNU General Public License * | ||
| 16 | * along with this program; if not, write to the * | 16 | * 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 | 21 | | |||
| 22 | import QtQuick 2.2 | 22 | import QtQuick 2.2 | ||
| 23 | import QtQuick.Controls 1.0 | 23 | import QtQuick.Controls 2.0 | ||
| 24 | import QtQuick.Layouts 1.0 | 24 | import QtQuick.Layouts 1.0 | ||
| 25 | 25 | | |||
| 26 | import org.kde.plasma.core 2.0 as PlasmaCore | 26 | import org.kde.kirigami 2.8 as Kirigami | ||
| 27 | import org.kde.plasma.components 2.0 as PlasmaComponents | | |||
| 28 | import org.kde.plasma.extras 2.0 as PlasmaExtras | | |||
| 29 | | ||||
| 30 | 27 | | |||
| 31 | Rectangle { | 28 | Rectangle { | ||
| 32 | 29 | | |||
| 33 | id: preview | 30 | color: Kirigami.Theme.backgroundColor | ||
| 34 | | ||||
| 35 | color: PlasmaCore.ColorScope.backgroundColor | | |||
| 36 | | ||||
| 37 | property string iconName: "plasma" | | |||
| 38 | property string fullPath: "" | | |||
| 39 | property string category: "" | | |||
| 40 | property string fileName: "" | | |||
| 41 | property string type: "" | | |||
| 42 | property string iconTheme: "" | | |||
| 43 | property variant sizes: [] | | |||
| 44 | property bool scalable: true | | |||
| 45 | 31 | | |||
| 46 | function clipboard(text) { | 32 | function clipboard(text) { | ||
| 47 | if (!pickerMode) { | 33 | if (!pickerMode) { | ||
| 48 | clipboardHelper.text = text; | 34 | clipboardHelper.text = text; | ||
| 49 | clipboardHelper.selectAll(); | 35 | clipboardHelper.selectAll(); | ||
| 50 | clipboardHelper.copy(); | 36 | clipboardHelper.copy(); | ||
| 51 | } else { | 37 | } else { | ||
| 52 | iconModel.output(text); | 38 | iconModel.output(text); | ||
| 53 | } | 39 | } | ||
| 54 | 40 | | |||
| 55 | } | 41 | } | ||
| 56 | TextEdit { | 42 | TextEdit { | ||
| 57 | id: clipboardHelper | 43 | id: clipboardHelper | ||
| 58 | visible: false | 44 | visible: false | ||
| 59 | } | 45 | } | ||
| 60 | 46 | | |||
| 61 | 47 | | |||
| 62 | ColumnLayout { | 48 | GridLayout { | ||
| 63 | anchors.margins: units.gridUnit | | |||
| 64 | anchors.rightMargin: units.gridUnit * 2 | | |||
| 65 | anchors.fill: parent | 49 | anchors.fill: parent | ||
| 66 | spacing: units.gridUnit / 2 | 50 | columns: 2 | ||
ngraham: A GridLayout with one column is just a ColumnLayout; use that instead | |||||
| 67 | 51 | Rectangle { | |||
| 68 | Item { height: units.gridUnit / 2 } | 52 | color: "transparent" | ||
| 69 | 53 | Layout.fillHeight: true | |||
GB_2: Maybe add `wrapMode: Text.Wrap`, so the heading can have multiple lines. | |||||
| 70 | PlasmaExtras.Heading { | | |||
| 71 | level: 3 | | |||
| 72 | elide: Text.ElideRight | | |||
| 73 | Layout.fillWidth: true | 54 | Layout.fillWidth: true | ||
| 74 | Layout.fillHeight: false | 55 | GridLayout { | ||
| 75 | wrapMode: Text.Wrap | 56 | id: previewGrid | ||
| 76 | text: iconName | 57 | anchors.centerIn: parent | ||
| 77 | } | 58 | columns: sizes.length | ||
| 78 | RowLayout { | 59 | rows: 2 | ||
| 79 | Layout.fillWidth: false | 60 | property var sizes: [8, 16, 32, 48, 64, 128] | ||
| 80 | Layout.fillHeight: false | 61 | Repeater { | ||
| 81 | Layout.preferredHeight: indexToSize(4) | 62 | model: previewGrid.sizes.length | ||
| 82 | anchors.horizontalCenter: parent.horizontalCenter | 63 | delegate: Kirigami.Icon { | ||
| 83 | 64 | Layout.alignment: Qt.AlignBottom | |||
| 84 | PlasmaCore.IconItem { | 65 | source: preview.iconName | ||
| 85 | source: iconName | 66 | width: previewGrid.sizes[index] | ||
| 86 | usesPlasmaTheme: cuttlefish.usesPlasmaTheme | 67 | height: previewGrid.sizes[index] | ||
| 87 | colorGroup: PlasmaCore.ColorScope.colorGroup | 68 | } | ||
| 88 | Layout.preferredWidth: indexToSize(0) | 69 | } | ||
| 89 | Layout.preferredHeight: indexToSize(0) | 70 | Repeater { | ||
| 90 | } | 71 | model: previewGrid.sizes.length | ||
| 91 | PlasmaCore.IconItem { | 72 | delegate: Label { | ||
| 92 | source: iconName | 73 | Layout.alignment: Qt.AlignTop | Qt.AlignHCenter | ||
| 93 | usesPlasmaTheme: cuttlefish.usesPlasmaTheme | 74 | text: previewGrid.sizes[index] | ||
| 94 | colorGroup: PlasmaCore.ColorScope.colorGroup | | |||
| 95 | Layout.preferredWidth: indexToSize(1) | | |||
| 96 | Layout.preferredHeight: indexToSize(1) | | |||
| 97 | } | | |||
| 98 | PlasmaCore.IconItem { | | |||
| 99 | source: iconName | | |||
| 100 | usesPlasmaTheme: cuttlefish.usesPlasmaTheme | | |||
| 101 | colorGroup: PlasmaCore.ColorScope.colorGroup | | |||
| 102 | Layout.preferredWidth: indexToSize(2) | | |||
| 103 | Layout.preferredHeight: indexToSize(2) | | |||
| 104 | } | | |||
| 105 | PlasmaCore.IconItem { | | |||
| 106 | source: iconName | | |||
| 107 | usesPlasmaTheme: cuttlefish.usesPlasmaTheme | | |||
| 108 | colorGroup: PlasmaCore.ColorScope.colorGroup | | |||
| 109 | Layout.preferredWidth: indexToSize(3) | | |||
| 110 | Layout.preferredHeight: indexToSize(3) | | |||
| 111 | } | | |||
| 112 | PlasmaCore.IconItem { | | |||
| 113 | source: iconName | | |||
| 114 | usesPlasmaTheme: cuttlefish.usesPlasmaTheme | | |||
| 115 | colorGroup: PlasmaCore.ColorScope.colorGroup | | |||
| 116 | Layout.preferredWidth: indexToSize(4) | | |||
| 117 | Layout.preferredHeight: indexToSize(4) | | |||
| 118 | } | 75 | } | ||
| 119 | } | 76 | } | ||
| 120 | | ||||
| 121 | PlasmaCore.IconItem { | | |||
| 122 | source: iconName | | |||
| 123 | usesPlasmaTheme: cuttlefish.usesPlasmaTheme | | |||
This feature will be missing. Despite still having the checkbox for it. davidedmundson: This feature will be missing. Despite still having the checkbox for it.
| |||||
| 124 | colorGroup: PlasmaCore.ColorScope.colorGroup | | |||
| 125 | Layout.fillHeight: false | | |||
| 126 | Layout.preferredWidth: parent.width | | |||
| 127 | Layout.preferredHeight: parent.width | | |||
| 128 | } | 77 | } | ||
| 129 | 78 | } | |||
ngraham: Center this button horizontally | |||||
| 79 | Rectangle { | ||||
| 80 | color: "transparent" | ||||
| 81 | Layout.fillHeight: true | ||||
| 82 | Layout.fillWidth: true | ||||
| 130 | GridLayout { | 83 | GridLayout { | ||
| 84 | anchors.centerIn: parent | ||||
| 131 | columns: 2 | 85 | columns: 2 | ||
| 132 | 86 | Label { | |||
| 133 | PlasmaComponents.Label { | 87 | Layout.fillHeight: true | ||
| 88 | Layout.alignment: Qt.AlignRight | ||||
| 134 | text: i18n("Name:") | 89 | text: i18n("Name:") | ||
| 135 | } | 90 | } | ||
| 136 | PlasmaComponents.Label { | 91 | ToolButton { | ||
Needs a tooltip saying that this will copy the name to the clipboard (the icon isn't enough) ngraham: Needs a tooltip saying that this will copy the name to the clipboard (the icon isn't enough) | |||||
| 137 | text: iconName | 92 | icon.name: "edit-copy" | ||
| 138 | wrapMode: Text.Wrap | 93 | text: preview.iconName | ||
| 94 | onClicked: clipboard(preview.iconName) | ||||
This is going to shock people, but I might even suggest displaying a Kirigami PassiveNotification saying "<text> copied to clipboard" when this is clicked. Otherwise it looks like nothing happens when you click the button. ngraham: This is going to shock people, but I might even suggest displaying a Kirigami… | |||||
| 139 | } | 95 | } | ||
| 140 | PlasmaComponents.Label { | 96 | Label { | ||
| 97 | Layout.fillHeight: true | ||||
| 98 | Layout.alignment: Qt.AlignRight | ||||
| 141 | text: i18n("Filename:") | 99 | text: i18n("Filename:") | ||
| 142 | } | 100 | } | ||
| 143 | PlasmaComponents.Label { | 101 | ToolButton { | ||
Needs a tooltip saying that this will open the image in an external app (the icon isn't enough, though making it actually use the icon of the app that it will open with would help with that) ngraham: Needs a tooltip saying that this will open the image in an external app (the icon isn't enough… | |||||
| 144 | text: fileName | 102 | icon.name: "document-open" | ||
| 145 | wrapMode: Text.Wrap | 103 | text: preview.fileName | ||
| 146 | verticalAlignment: Text.AlignVCenter | 104 | onClicked: Qt.openUrlExternally(preview.fullPath) | ||
| 147 | } | 105 | } | ||
| 148 | PlasmaComponents.Label { | 106 | Label { | ||
| 107 | Layout.fillHeight: true | ||||
ngraham: Colorscheme -> Color Scheme | |||||
| 108 | Layout.alignment: Qt.AlignRight | ||||
| 149 | text: i18n("Category:") | 109 | text: i18n("Category:") | ||
| 150 | } | 110 | } | ||
| 151 | PlasmaComponents.Label { | 111 | Label { | ||
| 152 | text: category | 112 | font.capitalization: Font.Capitalize | ||
| 153 | wrapMode: Text.WordWrap | 113 | text: preview.category | ||
| 154 | } | 114 | } | ||
| 155 | PlasmaComponents.Label { | 115 | Label { | ||
| 116 | Layout.fillHeight: true | ||||
| 117 | Layout.alignment: Qt.AlignRight | ||||
| 156 | text: i18n("Scalable:") | 118 | text: i18n("Scalable:") | ||
| 157 | } | 119 | } | ||
| 158 | PlasmaComponents.Label { | 120 | Label { | ||
| 159 | text: scalable ? i18n("yes") : i18n("no") | 121 | text: preview.scalable ? i18n("Yes") : i18n("No") | ||
| 160 | } | 122 | } | ||
Use a Kirigami.FormLayout for this (if not using it was deliberate because of layout bugs, let's fix those) ngraham: Use a Kirigami.FormLayout for this (if not using it was deliberate because of layout bugs… | |||||
| 161 | PlasmaComponents.Label { | | |||
| 162 | text: i18n("Sizes:") | | |||
| 163 | } | 123 | } | ||
| 164 | PlasmaComponents.Label { | | |||
| 165 | text: (sizes != undefined) ? sizes.join(", ") : "" | | |||
| 166 | } | | |||
| 167 | } | | |||
| 168 | Item { | | |||
| 169 | Layout.fillHeight: true | | |||
| 170 | } | | |||
| 171 | PlasmaComponents.ToolButton { | | |||
| 172 | text: pickerMode ? i18n("Insert icon name") : i18n("Copy icon name to clipboard") | | |||
| 173 | iconSource: "edit-copy" | | |||
| 174 | Layout.fillWidth: true | | |||
| 175 | onClicked: clipboard(preview.iconName); | | |||
| 176 | } | | |||
| 177 | PlasmaComponents.ToolButton { | | |||
| 178 | text: pickerMode ? i18n("Insert QtQuick code") : i18n("Copy QtQuick code to clipboard") | | |||
| 179 | iconSource: "edit-copy" | | |||
| 180 | Layout.fillWidth: true | | |||
| 181 | onClicked: { | | |||
| 182 | var code = "/* Don't forget to import...\n\ | | |||
| 183 | import org.kde.plasma.core 2.0 as PlasmaCore\n\ | | |||
| 184 | */\n\ | | |||
| 185 | PlasmaCore.IconItem {\n\ | | |||
| 186 | source: \"" + preview.iconName + "\"\n\ | | |||
| 187 | Layout.preferredWidth: units.iconSizes.medium\n\ | | |||
| 188 | Layout.preferredHeight: units.iconSizes.medium\n\ | | |||
| 189 | }\n\ | | |||
| 190 | "; | | |||
| 191 | clipboard(code); | | |||
| 192 | } | | |||
| 193 | } | | |||
| 194 | PlasmaComponents.CheckBox { | | |||
| 195 | text: i18n("Update preview on hover") | | |||
| 196 | onCheckedChanged: hoveredHighlight = checked | | |||
| 197 | } | 124 | } | ||
| 198 | } | 125 | } | ||
| 199 | 126 | | |||
| 200 | Rectangle { | 127 | Rectangle { | ||
| 201 | color: theme.highlightColor | 128 | opacity: 0.2 | ||
| 202 | width: Math.round(units.gridUnit / 20) | 129 | color: Kirigami.Theme.textColor | ||
| 130 | height: 1 | ||||
There's plenty of space for a button that has visible text. I'd recommend doing that instead of using a tiny icons-only button. ngraham: There's plenty of space for a button that has visible text. I'd recommend doing that instead of… | |||||
| 203 | anchors { | 131 | anchors { | ||
| 204 | left: parent.left | 132 | left: parent.left | ||
| 133 | right: parent.right | ||||
| 205 | top: parent.top | 134 | top: parent.top | ||
| 206 | bottom: parent.bottom | | |||
| 207 | } | 135 | } | ||
| 208 | } | 136 | } | ||
| 209 | } | 137 | } | ||
A GridLayout with one column is just a ColumnLayout; use that instead