src/qml/NavigationBar.qml

   1 import QtQuick 2.5
   2 import QtQuick.Controls 1.4
   3 import QtQuick.Controls.Styles 1.4
   4 import QtQuick.Layouts 1.2
   5
   6 import "assets"
   7
   8 ToolBar {
   9     id: root
  10
  11     property alias addressBar: urlBar
  12     property Item webView: null
  13
  14     visible: opacity != 0.0
  15     opacity: tabView.viewState == "page" ? 1.0 : 0.0
  16
  17     function load(url) {
  18         webView.url = url
  19         homeScreen.state = "disabled"
  20     }
  21
  22     function refresh() {
  23         bookmarksButton.bookmarked = homeScreen.contains(urlBar.text) !== -1
  24     }
  25
  26     state: "enabled"
  27
  28     style: ToolBarStyle {
  29         background: Rectangle {
  30             color: uiColor
  31             implicitHeight: toolBarSize
  32         }
  33         padding {
  34             left: 0
  35             right: 0
  36             top: 0
  37             bottom: 0
  38         }
  39     }
  40
  41     Behavior on y {
  42         NumberAnimation { duration: animationDuration }
  43     }
  44
  45     states: [
  46         State {
  47             name: "enabled"
  48             PropertyChanges {
  49                 target: root
  50                 y: 0
  51             }
  52         },
  53         State {
  54             name: "tracking"
  55             PropertyChanges {
  56                 target: root
  57                 y: {
  58                     var diff = touchReference - touchY
  59
  60                     if (velocityY > velocityThreshold) {
  61                         if (diff > 0)
  62                             return -toolBarSize
  63                         else
  64                             return 0
  65                     }
  66
  67                     if (!touchGesture || diff == 0) {
  68                         if (y < -toolBarSize / 2)
  69                             return -toolBarSize
  70                         else
  71                             return 0
  72                     }
  73
  74                     if (diff > toolBarSize)
  75                         return -toolBarSize
  76
  77                     if (diff > 0) {
  78                         if (y == -toolBarSize)
  79                             return -toolBarSize
  80                         return -diff
  81                     }
  82
  83                     // diff < 0
  84
  85                     if (y == 0)
  86                         return 0
  87
  88                     diff = Math.abs(diff)
  89                     if (diff >= toolBarSize)
  90                         return 0
  91
  92                     return -toolBarSize + diff
  93                 }
  94             }
  95         },
  96         State {
  97             name: "disabled"
  98             PropertyChanges {
  99                 target: root
 100                 y: -toolBarSize
 101             }
 102         }
 103     ]
 104
 105     RowLayout {
 106         height: toolBarSize - 2
 107         anchors {
 108             top: parent.top
 109             right: parent.right
 110             left: parent.left
 111         }
 112         spacing: 0
 113
 114         UIButton {
 115             id: backButton
 116             source: "qrc:///back"
 117             onClicked: webView.goBack()
 118             enabled: webView && webView.canGoBack
 119         }
 120         Rectangle {
 121             width: 1
 122             anchors {
 123                 top: parent.top
 124                 bottom: parent.bottom
 125             }
 126             color: uiSeparatorColor
 127         }
 128         UIButton {
 129             id: forwardButton
 130             source: "qrc:///forward"
 131             onClicked: webView.goForward()
 132             enabled: webView && webView.canGoForward
 133         }
 134         Rectangle {
 135             width: 1
 136             anchors {
 137                 top: parent.top
 138                 bottom: parent.bottom
 139             }
 140             color: uiSeparatorColor
 141         }
 142         Rectangle {
 143             Layout.fillWidth: true
 144             implicitWidth: 10
 145             anchors {
 146                 top: parent.top
 147                 bottom: parent.bottom
 148             }
 149             color: uiColor
 150         }
 151         TextField {
 152             id: urlBar
 153             Layout.fillWidth: true
 154             text: webView ? webView.url : ""
 155             activeFocusOnPress: true
 156             placeholderText: qsTr("Search or type a URL")
 157             focus: false
 158
 159             onActiveFocusChanged: {
 160                 if (activeFocus)
 161                     root.state = "enabled"
 162                 else
 163                     root.state = "tracking"
 164             }
 165
 166             UIButton {
 167                 id: reloadButton
 168                 source: webView && webView.loading ? "qrc:///stop" : "qrc:///refresh"
 169                 height: 54
 170                 width: height
 171                 color: "transparent"
 172                 highlightColor: "#eeeeee"
 173                 radius: width / 2
 174                 anchors {
 175                     rightMargin: 1
 176                     right: parent.right
 177                     verticalCenter: addressBar.verticalCenter;
 178                 }
 179                 onClicked: { webView.loading ? webView.stop() : webView.reload() }
 180             }
 181             style: TextFieldStyle {
 182                 textColor: "black"
 183                 font.family: defaultFontFamily
 184                 font.pixelSize: 28
 185                 selectionColor: uiHighlightColor
 186                 selectedTextColor: "black"
 187                 placeholderTextColor: placeholderColor
 188                 background: Rectangle {
 189                     implicitWidth: 514
 190                     implicitHeight: 56
 191                     border.color: textFieldStrokeColor
 192                     border.width: 1
 193                 }
 194                 padding {
 195                     left: 15
 196                     right: reloadButton.width
 197                 }
 198             }
 199             onAccepted: {
 200                 webView.url = engine.fromUserInput(text)
 201                 homeScreen.state = "disabled"
 202                 tabView.viewState = "page"
 203             }
 204
 205             onTextChanged: refresh()
 206             onEditingFinished: selectAll()
 207             onFocusChanged: {
 208                 if (focus) {
 209                     forceActiveFocus()
 210                     selectAll()
 211                 } else {
 212                     urlBar.cursorPosition = 0
 213                     deselect()
 214                 }
 215             }
 216         }
 217         Rectangle {
 218             Layout.fillWidth: true
 219             implicitWidth: 10
 220             anchors {
 221                 top: parent.top
 222                 bottom: parent.bottom
 223             }
 224             color: uiColor
 225         }
 226         Rectangle {
 227             width: 1
 228             anchors {
 229                 top: parent.top
 230                 bottom: parent.bottom
 231             }
 232             color: uiSeparatorColor
 233         }
 234         UIButton {
 235             id: homeButton
 236             source: "qrc:///home"
 237             onClicked: {
 238                 if (homeScreen.state == "disabled" || homeScreen.state == "edit") {
 239                     homeScreen.messageBox.state = "disabled"
 240                     homeScreen.state = "enabled"
 241                 } else if (homeScreen.state != "disabled")
 242                     homeScreen.state = "disabled"
 243             }
 244         }
 245         Rectangle {
 246             width: 1
 247             anchors {
 248                 top: parent.top
 249                 bottom: parent.bottom
 250             }
 251             color: uiSeparatorColor
 252         }
 253         UIButton {
 254             id: pageViewButton
 255             source: "qrc:///tabs"
 256             onClicked: {
 257                 if (tabView.viewState == "list") {
 258                     tabView.viewState = "page"
 259                 } else {
 260                     tabView.get(tabView.currentIndex).item.webView.takeSnapshot()
 261                     homeScreen.state = "disabled"
 262                     tabView.viewState = "list"
 263                 }
 264             }
 265             Text {
 266                 anchors {
 267                     centerIn: parent
 268                     verticalCenterOffset: 4
 269                 }
 270
 271                 text: tabView.count
 272                 font.family: defaultFontFamily
 273                 font.pixelSize: 16
 274                 font.weight: Font.DemiBold
 275                 color: "white"
 276             }
 277         }
 278         Rectangle {
 279             width: 1
 280             anchors {
 281                 top: parent.top
 282                 bottom: parent.bottom
 283             }
 284             color: uiSeparatorColor
 285         }
 286         UIButton {
 287             id: bookmarksButton
 288             property bool bookmarked: false
 289             source: bookmarked ? "qrc:///star_checked" : "qrc:///star"
 290             onClicked: {
 291                 if (!webView)
 292                     return
 293                 var icon = webView.loading ? "" : webView.icon
 294                 var idx = homeScreen.contains(webView.url.toString())
 295                 if (idx !== -1) {
 296                     homeScreen.remove("", idx)
 297                     return
 298                 }
 299                 var count = homeScreen.count
 300                 homeScreen.add(webView.title, webView.url, icon, engine.fallbackColor())
 301                 if (count < homeScreen.count)
 302                     bookmarked = true
 303             }
 304             Component.onCompleted: refresh()
 305         }
 306         Rectangle {
 307             width: 1
 308             anchors {
 309                 top: parent.top
 310                 bottom: parent.bottom
 311             }
 312             color: uiSeparatorColor
 313         }
 314         UIButton {
 315             id: settingsButton
 316             source: "qrc:///settings"
 317             checkable: true
 318             checked: false
 319             onClicked: tabView.interactive = !checked
 320         }
 321     }
 322     ProgressBar {
 323         id: progressBar
 324         height: 2
 325         anchors {
 326             left: parent.left
 327             bottom: parent.bottom
 328             right: parent.right
 329             leftMargin: -10
 330             rightMargin: -10
 331         }
 332         style: ProgressBarStyle {
 333             background: Rectangle {
 334                 height: 1
 335                 color: uiSeparatorColor
 336             }
 337             progress: Rectangle {
 338                 color: uiHighlightColor
 339             }
 340         }
 341         minimumValue: 0
 342         maximumValue: 100
 343         value: (webView && webView.loadProgress < 100) ? webView.loadProgress : 0
 344     }
 345 }