vcs.maemo.org Git - situare/blob - src/qmlui/Panel.qml

   1 import Qt 4.7
   2
   3 Rectangle {
   4     id: panel
   5     height: parent.height
   6     color: "#222222"
   7     clip: true
   8
   9     function setView(view) {
  10         if (panel.state == "opened") {
  11             if ((flipable.side == Flipable.Front && frontLoader.source != view) || (flipable.side == Flipable.Back && backLoader.source != view)) {
  12                 flipable.side == Flipable.Front ? backLoader.source = view : frontLoader.source = view
  13                 flipable.flipped = !flipable.flipped
  14             } else {
  15                 panel.state = ""
  16             }
  17         } else {
  18             flipable.side == Flipable.Front ? frontLoader.source = view : backLoader.source = view
  19             panel.state = "opened"
  20         }
  21     }
  22
  23     Item {
  24         id: contentsArea
  25         state: deviceRotation.orientation
  26         anchors.centerIn: parent
  27         x: 0
  28         y: 0
  29         height: panel.height
  30         width: panel.width
  31
  32         Flipable {
  33             id: flipable
  34             anchors.fill: parent
  35             property bool flipped: false
  36
  37             front: Loader {
  38                 id: frontLoader
  39                 anchors { fill: parent; leftMargin: 5; rightMargin: 5 }
  40             }
  41
  42             back: Loader {
  43                 id: backLoader
  44                 anchors { fill: parent; leftMargin: 5; rightMargin: 5 }
  45             }
  46
  47             transform: Rotation {
  48                 id: rotation
  49                 origin.x: flipable.width / 2;
  50                 origin.y: flipable.height / 2
  51                 axis { x: 0; y: 1; z: 0 }
  52                 angle: 0
  53             }
  54
  55             states: State {
  56                 name: "orthogonal"
  57                 PropertyChanges { target: rotation; angle: 180 }
  58                 when: flipable.flipped
  59             }
  60
  61             transitions: Transition {
  62                 NumberAnimation { target: rotation; properties: "angle"; duration: 300 }
  63             }
  64         }
  65
  66         states: [
  67             State {
  68                 name: "potrait"
  69                 PropertyChanges {
  70                     target: contentsArea
  71                     rotation: -90
  72                     height: panel.width
  73                     width: panel.height
  74                 }
  75             }
  76         ]
  77
  78         transitions: [
  79             Transition {
  80                 from: ""
  81                 to: "potrait"
  82                 NumberAnimation { properties: "rotation,heigth,width"; duration: 200 }
  83                 reversible: true
  84             }
  85         ]
  86     }
  87
  88     states: [
  89         State {
  90             name: "opened"
  91             PropertyChanges {
  92                 target: panel
  93                 x: width
  94             }
  95         }
  96     ]
  97
  98     transitions: [
  99         Transition {
 100             from: ""
 101             to: "opened"
 102             NumberAnimation { properties: "x"; duration: 200 }
 103             reversible: true
 104         }
 105     ]
 106 }