hhartz · December 3, 2009 07:15
diff --git a/arswall.qml b/arswall.qml
 import Qt 4.6


 Rectangle {
  id: Page

  width: 960; height: 720
  color: "#201F25"

  Rectangle {
    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.pixelSize: 36
      style: "Raised"
      styleColor: "black"
      anchors.centerIn: parent;
    }
  }

  Rectangle {
    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;

          Rectangle {
            id: ImageTextBack;
            anchors.fill: parent;
            color: "black"
            opacity: 0.8;
            visible: false;
            
            Text {
              id: ImageText;
              text: title
              color: "white";
              wrap: true;
              font.pixelSize: 24;
              font.bold: true;
              anchors.fill: parent;
              horizontalAlignment: "AlignHCenter";
              verticalAlignment: "AlignVCenter";
            }
          }
          
          MouseRegion {
            id: ImageRegion
            anchors.fill: parent
            hoverEnabled: true
            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
              PropertyChanges { target: ImageTextBack; visible: true; }
            }
          ]
        }
      ]

      transform: [
        Rotation {
          id: ImageWall;
          axis { x: 0; y: 1; z:0 }
          angle: 0;
        }
      ]
    }

    Rectangle {
      id: ImageInfo;
      height: parent.height;
      width: parent.width - 460;
      radius: 10; border.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: ""
      }

      Rectangle {
        id: ButtonLogin
        height: 30 
        width: 100
        radius: 10
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
        anchors.horizontalCenter: parent.horizontalCenter
        border.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.centerIn: parent
          text: "Close"
          font.bold: true
          font.pixelSize: 12
          color: "white"
          style: "Raised"
          styleColor: "black"
        }
      }
    }

    states: [
      State {
        name: "selected";
        when: FeedList.selected == true
        PropertyChanges { target: ImageWall; angle: 40; }
        PropertyChanges { target: FeedList; width: 1000; }
        PropertyChanges {
          target: ImageInfo;
          visible: true;
          x: Page.width - width - 20;
        }
      }
    ]

    transitions: [
      Transition {
        from: "*"
        to: "selected"
        reversible: true
        NumberAnimation {
          matchProperties: "angle,x"
          duration: 300
        }
      }      
    ]
  }
 }
	import Qt 4.6


	Rectangle {
	id: Page

	width: 960; height: 720
	color: "#201F25"

	Rectangle {
	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.pixelSize: 36
	style: "Raised"
	styleColor: "black"
	anchors.centerIn: parent;
	}
	}

	Rectangle {
	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;

	Rectangle {
	id: ImageTextBack;
	anchors.fill: parent;
	color: "black"
	opacity: 0.8;
	visible: false;

	Text {
	id: ImageText;
	text: title
	color: "white";
	wrap: true;
	font.pixelSize: 24;
	font.bold: true;
	anchors.fill: parent;
	horizontalAlignment: "AlignHCenter";
	verticalAlignment: "AlignVCenter";
	}
	}

	MouseRegion {
	id: ImageRegion
	anchors.fill: parent
	hoverEnabled: true
	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
	PropertyChanges { target: ImageTextBack; visible: true; }
	}
	]
	}
	]

	transform: [
	Rotation {
	id: ImageWall;
	axis { x: 0; y: 1; z:0 }
	angle: 0;
	}
	]
	}

	Rectangle {
	id: ImageInfo;
	height: parent.height;
	width: parent.width - 460;
	radius: 10; border.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: ""
	}

	Rectangle {
	id: ButtonLogin
	height: 30
	width: 100
	radius: 10
	anchors.bottom: parent.bottom
	anchors.bottomMargin: 5
	anchors.horizontalCenter: parent.horizontalCenter
	border.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.centerIn: parent
	text: "Close"
	font.bold: true
	font.pixelSize: 12
	color: "white"
	style: "Raised"
	styleColor: "black"
	}
	}
	}

	states: [
	State {
	name: "selected";
	when: FeedList.selected == true
	PropertyChanges { target: ImageWall; angle: 40; }
	PropertyChanges { target: FeedList; width: 1000; }
	PropertyChanges {
	target: ImageInfo;
	visible: true;
	x: Page.width - width - 20;
	}
	}
	]

	transitions: [
	Transition {
	from: "*"
	to: "selected"
	reversible: true
	NumberAnimation {
	matchProperties: "angle,x"
	duration: 300
	}
	}
	]
	}
	}