Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ars Feed Wall QML Demo
import Qt 4.6
Rect {
id: Page
width: 960; height: 720
color: "#201F25"
Rect {
id: Banner
width: parent.width - 20
height: Logo.height + 20
anchors.horizontalCenter: parent.horizontalCenter;
y: 10; radius: 10; z: 10;
opacity: 0.9;
gradient: Gradient {
GradientStop { position: 0; color: "#8B0504"; }
GradientStop { position: 1; color: "black"; }
}
Image {
id: Logo
source: "http://static.arstechnica.com/mt-static/plugins/ArsTheme/style/themes/light/images/logo.png"
anchors.verticalCenter: parent.verticalCenter;
x: 15;
}
Text {
text: "News Feed"
color: "white";
font.bold: true;
font.size: 36
style: "Raised"
styleColor: "black"
anchors.centeredIn: parent;
}
}
Rect {
width: parent.width - 20;
anchors.horizontalCenter: parent.horizontalCenter;
height: Page.height - Banner.height - 30;
y: Banner.height + 20;
color: "#201F25";
XmlListModel {
id: FeedModel
source: "http://feeds.arstechnica.com/arstechnica/index"
query: "/rss/channel/item"
namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
XmlRole { name: "title"; query: "title/string()" }
XmlRole { name: "author"; query: "author/string()" }
XmlRole { name: "description"; query: "description/string()" }
XmlRole { name: "image"; query: "media:content/@url/string()" }
}
GridView {
id: FeedList;
width: parent.width;
height: parent.height + 200;
model: FeedModel;
z: 0;
property var selected: false;
cellWidth: 300 + 10;
cellHeight: 169 + 10;
delegate: [
Image {
id: FeedImage;
source: image;
width: 300;
height: 169;
Rect {
id: ImageTextBack;
anchors.fill: parent;
color: "black"
opacity: 0.8;
visible: false;
Text {
id: ImageText;
text: title
color: "white";
wrap: true;
font.size: 24;
font.bold: true;
anchors.fill: parent;
hAlign: "AlignHCenter";
vAlign: "AlignVCenter";
}
}
MouseRegion {
id: ImageRegion
anchors.fill: parent
onClicked: {
FeedList.selected = true;
StoryContent.html = "<html><style>\
body { color: white }\
img { display: none }\
a { color: orange }\
</style><body>\
<h1>" + title + "</h1>\
<h3>By: " + author + "</h3>\
<p>" + description + "</p>\
</body></html>"
}
}
states: [
State {
name: "hover"
when: ImageRegion.containsMouse == true
SetProperties { target: ImageTextBack; visible: true; }
}
]
}
]
transform: [
Rotation3D {
id: ImageWall;
axis { startX: 0; endX: 0; startY: 0; endY: 1 }
angle: 0;
}
]
}
Rect {
id: ImageInfo;
height: parent.height;
width: parent.width - 460;
radius: 10; pen.color: "white";
visible: false;
x: 1000
gradient: Gradient {
GradientStop { position: 0; color: "black"; }
GradientStop { position: 1; color: "#1F1F1F"; }
}
WebView {
id: StoryContent
anchors.fill: parent;
html: ""
}
Rect {
id: ButtonLogin
height: 30
width: 100
radius: 10
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
anchors.horizontalCenter: parent.horizontalCenter
pen.color: "#011C00"
gradient: Gradient {
GradientStop { position: 0; color: "#69FF65" }
GradientStop { position: 0.4; color: "#095606" }
GradientStop { position: 0.8; color: "#69FF65" }
GradientStop { position: 1; color: "#095606" }
}
MouseRegion {
anchors.fill: parent;
onClicked: { FeedList.selected = false; }
}
Text {
anchors.centeredIn: parent
text: "Close"
font.bold: true
font.size: 12
color: "white"
style: "Raised"
styleColor: "black"
}
}
}
states: [
State {
name: "selected";
when: FeedList.selected == true
SetProperties { target: ImageWall; angle: 40; }
SetProperties { target: FeedList; width: 1000; }
SetProperties {
target: ImageInfo;
visible: true;
x: Page.width - width - 20;
}
}
]
transitions: [
Transition {
toState: "selected"
reversible: true
NumberAnimation {
properties: "angle,x"
duration: 300
}
}
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment