Changeset View
Changeset View
Standalone View
Standalone View
src/touch/qml/FileOpen.qml
Show All 18 Lines | |||||
19 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND | 19 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND | ||
20 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT | 20 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT | ||
21 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, | 21 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, | ||
22 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING | 22 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING | ||
23 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR | 23 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR | ||
24 | * OTHER DEALINGS IN THE SOFTWARE. | 24 | * OTHER DEALINGS IN THE SOFTWARE. | ||
25 | */ | 25 | */ | ||
26 | 26 | | |||
27 | import QtQuick 2.10 | 27 | import QtQuick 2.12 | ||
28 | import QtQuick.Controls 2.0 as Controls | 28 | import QtQuick.Controls 2.0 as Controls | ||
29 | import QtQuick.Layouts 1.2 | 29 | import QtQuick.Layouts 1.2 | ||
30 | import org.kde.kirigami 2.4 as Kirigami | 30 | import org.kde.kirigami 2.4 as Kirigami | ||
31 | import Utils 1.0 | 31 | import Utils 1.0 | ||
32 | 32 | | |||
33 | ListView { | 33 | ListView { | ||
34 | property var _dirmodel: DirModel { id: dirmodel } | 34 | property var _dirmodel: DirModel { id: dirmodel } | ||
35 | property alias path: dirmodel.path | 35 | property alias path: dirmodel.path | ||
36 | property alias mode: dirmodel.mode | 36 | property alias mode: dirmodel.mode | ||
37 | property alias dirName: dirmodel.dirName | 37 | property alias dirName: dirmodel.dirName | ||
38 | id: listView | 38 | id: listView | ||
39 | signal selected(string path) | 39 | signal selected(string path) | ||
40 | model: dirmodel.filteredModel | 40 | model: dirmodel.filteredModel | ||
41 | onPathChanged: if(headerItem && headerItem.text) headerItem.text = "" | 41 | onPathChanged: if(headerItem && headerItem.text) headerItem.text = "" | ||
42 | header: Controls.TextField { | 42 | header: Controls.TextField { | ||
43 | onActiveFocusChanged: { | 43 | onActiveFocusChanged: { | ||
44 | if (activeFocus) { | 44 | if (activeFocus) { | ||
45 | listView.currentIndex = -1 | 45 | listView.currentIndex = -1 | ||
46 | } | 46 | } | ||
47 | } | 47 | } | ||
48 | id: search | 48 | id: search | ||
49 | placeholderText: "Search..." | 49 | placeholderText: qsTr("Search...") | ||
50 | onTextChanged: dirmodel.filter = text | 50 | onTextChanged: dirmodel.filter = text | ||
51 | width: listView.width | 51 | width: listView.width | ||
52 | Rectangle { | 52 | leftPadding: Kirigami.Units.largeSpacing | ||
53 | anchors.fill: parent | 53 | | ||
54 | z: -1 | | |||
55 | color: Kirigami.Theme.backgroundColor | | |||
56 | } | | |||
57 | Row { | 54 | Row { | ||
58 | spacing: 20 | | |||
59 | anchors.right: parent.right | 55 | anchors.right: parent.right | ||
60 | anchors.verticalCenter: parent.verticalCenter | 56 | anchors.verticalCenter: parent.verticalCenter | ||
61 | height: parent.height | 57 | height: parent.height | ||
62 | Kirigami.Icon{ | 58 | rightPadding: contextDrawer.dragMargin | ||
59 | Item { | ||||
63 | anchors.verticalCenter: parent.verticalCenter | 60 | anchors.verticalCenter: parent.verticalCenter | ||
61 | height: parent.height | ||||
62 | width: height | ||||
63 | | ||||
64 | Kirigami.Icon { | ||||
65 | anchors.centerIn: parent | ||||
64 | source: "edit-clear" | 66 | source: "edit-clear" | ||
65 | height: parent.height / 2 | 67 | height: parent.height / 2 | ||
66 | width: height | 68 | width: height | ||
67 | MouseArea { | 69 | smooth: true | ||
68 | anchors.fill: parent | 70 | } | ||
69 | onClicked: { | 71 | TapHandler { | ||
ngraham: Why not just put this inside the Icon? Seems redundant to put both inside an Item | |||||
I did that so the clickable area is bigger than the icon - clickable area: https://i.imgur.com/PogLuij.png , icon area: https://i.imgur.com/mw4NAt9.png z3ntu: I did that so the clickable area is bigger than the icon - clickable area: https://i.imgur. | |||||
Perhaps instead you could use a Button with flat: true and an overridden width and height. That would get you the same thing in one item, and it would have proper animations and visual states for hover and tap/click. ngraham: Perhaps instead you could use a `Button` with `flat: true` and an overridden width and height. | |||||
I've tried the following but I never got the icon to show up. I couldn't figure out why though, see also the messages in #kde-devel Controls.Button { anchors.verticalCenter: parent.verticalCenter height: parent.height width: height flat: true icon.name: "go-parent-folder" onClicked: { dirmodel.cdUp() } } z3ntu: I've tried the following but I never got the icon to show up. I couldn't figure out why though… | |||||
72 | onTapped: { | ||||
70 | search.text = "" | 73 | search.text = "" | ||
71 | } | 74 | } | ||
72 | } | 75 | } | ||
73 | } | 76 | } | ||
74 | Kirigami.Icon { | 77 | Item { | ||
75 | anchors.verticalCenter: parent.verticalCenter | 78 | anchors.verticalCenter: parent.verticalCenter | ||
79 | height: parent.height | ||||
80 | width: height | ||||
81 | | ||||
82 | Kirigami.Icon { | ||||
83 | anchors.centerIn: parent | ||||
76 | source: "go-parent-folder" | 84 | source: "go-parent-folder" | ||
77 | height: parent.height / 2 | 85 | height: parent.height / 2 | ||
78 | width: height | 86 | width: height | ||
79 | MouseArea { | 87 | smooth: true | ||
80 | anchors.fill: parent | 88 | } | ||
81 | onClicked: dirmodel.cdUp() | 89 | TapHandler { | ||
ngraham: Ditto | |||||
90 | onTapped: { | ||||
91 | dirmodel.cdUp() | ||||
92 | } | ||||
82 | } | 93 | } | ||
83 | } | 94 | } | ||
84 | } | 95 | } | ||
85 | z: 2 | 96 | z: 2 | ||
86 | } | 97 | } | ||
87 | headerPositioning: ListView.PullBackHeader | 98 | headerPositioning: ListView.PullBackHeader | ||
88 | currentIndex: -1 | 99 | currentIndex: -1 | ||
100 | | ||||
89 | delegate: Kirigami.BasicListItem { | 101 | delegate: Kirigami.BasicListItem { | ||
90 | label: display | 102 | label: display | ||
91 | icon: model.icon | 103 | icon: model.icon | ||
92 | highlighted: focus && ListView.isCurrentItem | 104 | highlighted: focus && ListView.isCurrentItem | ||
93 | onClicked: { | 105 | onClicked: { | ||
94 | if(ListView.isCurrentItem) { | 106 | if(ListView.isCurrentItem) { | ||
95 | if (type === "folder") { | 107 | if (type === "folder") { | ||
96 | dirmodel.cd(display) | 108 | dirmodel.cd(display) | ||
97 | } else { | 109 | } else { | ||
98 | selected(fullpath) | 110 | selected(fullpath) | ||
99 | } | 111 | } | ||
100 | } else { | 112 | } else { | ||
101 | currentIndex = index; | 113 | currentIndex = index; | ||
102 | } | 114 | } | ||
103 | } | 115 | } | ||
104 | Rectangle { | 116 | Rectangle { | ||
105 | width: height | 117 | width: height | ||
106 | height: parent.height * 3 | 118 | height: parent.height * 3 | ||
107 | radius: height / 2 | 119 | radius: height / 2 | ||
108 | color: Kirigami.Theme.backgroundColor | 120 | color: Kirigami.Theme.backgroundColor | ||
121 | | ||||
109 | Kirigami.Icon { | 122 | Kirigami.Icon { | ||
110 | source: type === "folder" ? "folder-open" : "document-open" | 123 | source: type === "folder" ? "folder-open" : "document-open" | ||
111 | anchors.fill: parent | 124 | anchors.fill: parent | ||
112 | anchors.margins: parent.height / 6 | 125 | anchors.margins: parent.height / 6 | ||
126 | } | ||||
113 | MouseArea { | 127 | MouseArea { | ||
114 | anchors.fill: parent | 128 | anchors.fill: parent | ||
115 | onClicked: selected(fullpath) | 129 | onClicked: selected(fullpath) | ||
116 | } | 130 | } | ||
117 | } | 131 | } | ||
118 | } | 132 | } | ||
133 | | ||||
134 | Controls.Label { | ||||
135 | anchors.fill: parent | ||||
136 | horizontalAlignment: Qt.AlignHCenter | ||||
137 | verticalAlignment: Qt.AlignVCenter | ||||
138 | visible: parent.count == 0 | ||||
139 | text: qsTr("Nothing to show") | ||||
ngraham: Doesn't need an exclamation point | |||||
ngraham: `i18n()`, not `qstr()` | |||||
140 | opacity: 0.6 | ||||
avoid bold font. In fact, this should probably have opacity: 0.6 to match other "there's nothing here" placeholder text used in other apps. ngraham: avoid bold font. In fact, this should probably have `opacity: 0.6` to match other "there's… | |||||
119 | } | 141 | } | ||
120 | } | 142 | } |
Why not just put this inside the Icon? Seems redundant to put both inside an Item