QMLVideo Example visual update
Task-number: QTBUG-36287 Change-Id: I797a995c2ccd6f6fec40fbf50f93e297ae15a9b1 Reviewed-by: Topi Reiniö <topi.reinio@digia.com>
This commit is contained in:
Tomi Korpipää
@@ -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 {
|
||||
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 }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: "gray"
|
||||
x: 48
|
||||
width: 1
|
||||
height: 44
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user