blob: 8677efca407ebbb64d11c80c5093431de00e4f98 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
Flipable {
id: Container
property var frontContainer: ContainerFront
property var flickableArea: Flickable
property var slider: Slider
property string photoTitle: ""
property string photoDescription: ""
property string photoTags: ""
property int photoWidth
property int photoHeight
property string photoType
property string photoAuthor
property string photoDate
property string photoUrl
property int rating: 2
signal closed
axis: Axis { startX: Container.width / 2; endX: Container.width / 2; endY: 1 }
front: Item {
id: ContainerFront; anchors.fill: Container
Rect {
anchors.fill: parent
color: "black"; opacity: 0.4
pen.color: "white"; pen.width: 2
}
MediaButton {
id: BackButton; x: 630; y: 370; text: "Back"
onClicked: { Container.closed.emit() }
}
MediaButton {
id: MoreButton; x: 530; y: 370; text: "View..."
onClicked: { Container.state='Back' }
}
Text { id: TitleText; style: "Raised"; styleColor: "black"; color: "white"; elide: "ElideRight"
x: 220; y: 30; width: parent.width - 240; text: Container.photoTitle; font.size: 22 }
LikeOMeter { x: 40; y: 250; rating: Container.rating }
Flickable { id: Flickable; x: 220; width: 480; height: 210; y: 130; clip: true
viewportWidth: 480; viewportHeight: DescriptionText.height
WebView { id: DescriptionText; width: parent.width
html: "<style TYPE=\"text/css\">body {color: white;} a:link {color: cyan; text-decoration: underline; }</style>" + Container.photoDescription }
}
Text { id: Size; color: "white"; width: 300; x: 40; y: 300
text: "<b>Size:</b> " + Container.photoWidth + 'x' + Container.photoHeight }
Text { id: Type; color: "white"; width: 300; x: 40; anchors.top: Size.bottom
text: "<b>Type:</b> " + Container.photoType }
Text { id: Author; color: "white"; width: 300; x: 220; y: 80
text: "<b>Author:</b> " + Container.photoAuthor }
Text { id: Date; color: "white"; width: 300; x: 220; anchors.top: Author.bottom
text: "<b>Published:</b> " + Container.photoDate }
Text { id: TagsLabel; color: "white"; x: 220; anchors.top: Date.bottom;
text: Container.photoTags == "" ? "" : "<b>Tags:</b> " }
Text { id: Tags; color: "white"; width: parent.width-x-20;
anchors.left: TagsLabel.right; anchors.top: Date.bottom;
elide: "ElideRight"; text: Container.photoTags }
ScrollBar { id: ScrollBar; x: 720; y: Flickable.y; width: 7; height: Flickable.height; opacity: 0;
flickableArea: Flickable; clip: true }
}
back: Item {
anchors.fill: Container
Rect { anchors.fill: parent; color: "black"; opacity: 0.4; pen.color: "white"; pen.width: 2 }
// Loading { anchors.centeredIn: parent; visible: BigImage.status }
Progress { anchors.centeredIn: parent; width: 200; height: 18; progress: BigImage.progress; visible: BigImage.status }
Flickable {
id: Flick; width: Container.width - 10; height: Container.height - 10
x: 5; y: 5; clip: true; viewportWidth: (BigImage.width * BigImage.scale) + BigImage.x;
viewportHeight: BigImage.height * BigImage.scale
Image {
id: BigImage; source: Container.photoUrl; scale: Slider.value
x:Math.max(0, ((Flick.width/2)-(width * scale / 2)));
y:Math.max(0, (Flick.height/2)-(height * scale / 2));
}
}
MediaButton {
id: BackButton2; x: 630; y: 370; text: "Back"; onClicked: { Container.state = '' }
}
Text {
text: "Image Unavailable"
visible: BigImage.status == 'Error'
anchors.centeredIn: parent; color: "white"; font.bold: true
}
Slider { id: Slider; x: 25; y: 374; visible: BigImage.status == 0; imageWidth: Container.photoWidth; imageHeight: Container.photoHeight }
}
states: [
State {
name: "Back"
SetProperty { target: Container; property: "rotation"; value: 180 }
}
]
transitions: [
Transition {
NumericAnimation { easing: "easeInOutQuad"; properties: "rotation"; duration: 500 }
}
]
}
|
