Differential D26353 Diff 80397 src/touch/qml/FileOpen.qml

Changeset View

Standalone View

View Options

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​
27import QtQuick 2.10 27​import QtQuick 2.12
28import QtQuick.Controls 2.0 as Controls 28​import QtQuick.Controls 2.0 as Controls
29import QtQuick.Layouts 1.2 29​import QtQuick.Layouts 1.2
30import org.kde.kirigami 2.4 as Kirigami 30​import org.kde.kirigami 2.4 as Kirigami
31import Utils 1.0 31​import Utils 1.0
32 32​
33ListView { 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 {
ngrahamUnsubmitted
Not Done

Why not just put this inside the Icon? Seems redundant to put both inside an Item

ngraham: Why not just put this inside the Icon? Seems redundant to put both inside an Item
z3ntuAuthorUnsubmitted
Not Done

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.
ngrahamUnsubmitted
Not Done

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.
z3ntuAuthorUnsubmitted
Not Done

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 {
ngrahamUnsubmitted
Not Done

Ditto

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")
ngrahamUnsubmitted
Done

Doesn't need an exclamation point

ngraham: Doesn't need an exclamation point
ngrahamUnsubmitted
Done

i18n(), not qstr()

ngraham: `i18n()`, not `qstr()`
140​ opacity: 0.6
ngrahamUnsubmitted
Done

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​}