summaryrefslogtreecommitdiffstats
path: root/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
diff options
context:
space:
mode:
Diffstat (limited to 'examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml')
-rw-r--r--examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml174
1 files changed, 97 insertions, 77 deletions
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
index 466ea8b97..33109bd34 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
@@ -40,6 +40,9 @@ Rectangle {
property string folder
+ property int itemHeight: Math.min(parent.width, parent.height) / 15
+ property int buttonHeight: Math.min(parent.width, parent.height) / 12
+
signal fileSelected(string file)
function selectFile(file) {
@@ -66,12 +69,12 @@ Rectangle {
Rectangle {
id: root
- color: "white"
+ color: "black"
property bool showFocusHighlight: false
property variant folders: folders1
property variant view: view1
property alias folder: folders1.folder
- property color textColor: "black"
+ property color textColor: "white"
FolderListModel {
id: folders1
@@ -103,34 +106,39 @@ Rectangle {
fileBrowser.selectFile(path)
}
width: root.width
- height: 52
+ height: folderImage.height
color: "transparent"
Rectangle {
- id: highlight; visible: false
+ id: highlight
+ visible: false
anchors.fill: parent
- color: palette.highlight
- gradient: Gradient {
- GradientStop { id: t1; position: 0.0; color: palette.highlight }
- GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
- }
+ anchors.leftMargin: 5
+ anchors.rightMargin: 5
+ color: "#212121"
}
Item {
- width: 48; height: 48
+ id: folderImage
+ width: itemHeight
+ height: itemHeight
Image {
+ id: folderPicture
source: "qrc:/folder.png"
- anchors.centerIn: parent
+ width: itemHeight * 0.9
+ height: itemHeight * 0.9
+ anchors.left: parent.left
+ anchors.margins: 5
visible: folders.isFolder(index)
}
}
Text {
id: nameText
- anchors.fill: parent; verticalAlignment: Text.AlignVCenter
+ anchors.fill: parent;
+ verticalAlignment: Text.AlignVCenter
text: fileName
- anchors.leftMargin: 54
- font.pixelSize: 32
+ anchors.leftMargin: itemHeight + 10
color: (wrapper.ListView.isCurrentItem && root.showFocusHighlight) ? palette.highlightedText : textColor
elide: Text.ElideRight
}
@@ -142,7 +150,7 @@ Rectangle {
root.showFocusHighlight = false;
wrapper.ListView.view.currentIndex = index;
}
- onClicked: { if (folders == wrapper.ListView.view.model) launch() }
+ onClicked: { if (folders === wrapper.ListView.view.model) launch() }
}
states: [
@@ -160,17 +168,12 @@ Rectangle {
id: view1
anchors.top: titleBar.bottom
anchors.bottom: cancelButton.top
- x: 0
width: parent.width
model: folders1
delegate: folderDelegate
highlight: Rectangle {
- color: palette.highlight
+ color: "#212121"
visible: root.showFocusHighlight && view1.count != 0
- gradient: Gradient {
- GradientStop { id: t1; position: 0.0; color: palette.highlight }
- GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
- }
width: view1.currentItem == null ? 0 : view1.currentItem.width
}
highlightMoveVelocity: 1000
@@ -215,12 +218,8 @@ Rectangle {
model: folders2
delegate: folderDelegate
highlight: Rectangle {
- color: palette.highlight
+ color: "#212121"
visible: root.showFocusHighlight && view2.count != 0
- gradient: Gradient {
- GradientStop { id: t1; position: 0.0; color: palette.highlight }
- GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
- }
width: view1.currentItem == null ? 0 : view1.currentItem.width
}
highlightMoveVelocity: 1000
@@ -254,19 +253,29 @@ Rectangle {
}
Rectangle {
- id: cancelButton
- width: 100
- height: titleBar.height - 7
+ width: parent.width
+ height: buttonHeight + 10
+ anchors.bottom: parent.bottom
color: "black"
- anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
+ }
+
+ Rectangle {
+ id: cancelButton
+ width: parent.width
+ height: buttonHeight
+ color: "#212121"
+ anchors.bottom: parent.bottom
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.margins: 5
+ radius: buttonHeight / 15
Text {
- anchors { fill: parent; margins: 4 }
+ anchors.fill: parent
text: "Cancel"
color: "white"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
- font.pixelSize: 20
}
MouseArea {
@@ -277,55 +286,66 @@ Rectangle {
Keys.onPressed: {
root.keyPressed(event.key);
- if (event.key == Qt.Key_Return || event.key == Qt.Key_Select || event.key == Qt.Key_Right) {
+ if (event.key === Qt.Key_Return || event.key === Qt.Key_Select || event.key === Qt.Key_Right) {
view.currentItem.launch();
event.accepted = true;
- } else if (event.key == Qt.Key_Left) {
+ } else if (event.key === Qt.Key_Left) {
up();
}
}
- BorderImage {
- source: "qrc:/titlebar.sci";
- width: parent.width;
- height: 52
- y: -7
+
+ Rectangle {
id: titleBar
+ width: parent.width
+ height: buttonHeight + 10
+ anchors.top: parent.top
+ color: "black"
Rectangle {
- id: upButton
- width: 48
- height: titleBar.height - 7
- color: "transparent"
- Image { anchors.centerIn: parent; source: "qrc:/up.png" }
- MouseArea { id: upRegion; anchors.centerIn: parent
- width: 56
- height: 56
- onClicked: up()
- }
- states: [
- State {
- name: "pressed"
- when: upRegion.pressed
- PropertyChanges { target: upButton; color: palette.highlight }
- }
- ]
- }
+ width: parent.width;
+ height: buttonHeight
+ color: "#212121"
+ anchors.margins: 5
+ anchors.top: parent.top
+ anchors.left: parent.left
+ anchors.right: parent.right
+ radius: buttonHeight / 15
- Rectangle {
- color: "gray"
- x: 48
- width: 1
- height: 44
- }
+ Rectangle {
+ id: upButton
+ width: buttonHeight
+ height: buttonHeight
+ color: "transparent"
+ Image {
+ width: itemHeight
+ height: itemHeight
+ anchors.centerIn: parent
+ source: "qrc:/up.png"
+ }
+ MouseArea { id: upRegion; anchors.centerIn: parent
+ width: buttonHeight
+ height: buttonHeight
+ onClicked: up()
+ }
+ states: [
+ State {
+ name: "pressed"
+ when: upRegion.pressed
+ PropertyChanges { target: upButton; color: palette.highlight }
+ }
+ ]
+ }
- Text {
- anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
- anchors.leftMargin: 4; anchors.rightMargin: 4
- text: folders.folder
- color: "white"
- elide: Text.ElideLeft; horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter
- font.pixelSize: 32
+ Text {
+ anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
+ anchors.leftMargin: 5; anchors.rightMargin: 5
+ text: folders.folder
+ color: "white"
+ elide: Text.ElideLeft;
+ horizontalAlignment: Text.AlignLeft;
+ verticalAlignment: Text.AlignVCenter
+ }
}
}
@@ -366,14 +386,14 @@ Rectangle {
function keyPressed(key) {
switch (key) {
- case Qt.Key_Up:
- case Qt.Key_Down:
- case Qt.Key_Left:
- case Qt.Key_Right:
- root.showFocusHighlight = true;
+ case Qt.Key_Up:
+ case Qt.Key_Down:
+ case Qt.Key_Left:
+ case Qt.Key_Right:
+ root.showFocusHighlight = true;
break;
- default:
- // do nothing
+ default:
+ // do nothing
break;
}
}