contents/ui/FindInPageBar.qml

0001 // SPDX-FileCopyrightText: 2020 Rinigus <rinigus.git@gmail.com>
0002 //
0003 // SPDX-License-Identifier: GPL-2.0-or-later
0004
0005 import QtQuick 2.3
0006 import QtQuick.Layouts 1.0
0007 import QtQuick.Controls 2.0 as Controls
0008 import QtWebEngine 1.5
0009
0010 import org.kde.kirigami 2.5 as Kirigami
0011 import org.kde.angelfish 1.0
0012
0013 Item {
0014     id: findInPage
0015
0016     anchors {
0017         top: parent.bottom
0018         left: parent.left
0019         right: parent.right
0020     }
0021     height: Kirigami.Units.gridUnit * 3
0022
0023     property bool active: false
0024     property int  buttonSize: Kirigami.Units.gridUnit * 2
0025
0026     Rectangle { anchors.fill: parent; color: Kirigami.Theme.backgroundColor; }
0027
0028     RowLayout {
0029         id: layout
0030         anchors.fill: parent
0031         anchors.leftMargin: Kirigami.Units.gridUnit / 2
0032         anchors.rightMargin: Kirigami.Units.gridUnit / 2
0033
0034         spacing: Kirigami.Units.smallSpacing
0035         Kirigami.Theme.inherit: true
0036
0037         Controls.TextField {
0038             id: input
0039
0040             Kirigami.Theme.inherit: true
0041             Layout.fillWidth: true
0042             leftPadding: index.anchors.rightMargin
0043             rightPadding: index.width + 2 * index.anchors.rightMargin
0044             inputMethodHints: rootPage.privateMode ? Qt.ImhNoPredictiveText : Qt.ImhNone
0045             placeholderText: i18n("Search...")
0046
0047             onAccepted: currentWebView.findText(displayText)
0048             onDisplayTextChanged: currentWebView.findText(displayText)
0049             Keys.onEscapePressed: findInPage.active = false
0050
0051             color: currentWebView.findInPageResultCount == 0 ? Kirigami.Theme.neutralTextColor : Kirigami.Theme.textColor
0052
0053             Controls.Label {
0054                 id: index
0055                 anchors.right: parent.right
0056                 anchors.rightMargin: Kirigami.Units.gridUnit / 2
0057                 anchors.verticalCenter: parent.verticalCenter
0058                 text: "%1 / %2".arg(currentWebView.findInPageResultIndex).arg(currentWebView.findInPageResultCount)
0059                 verticalAlignment: Text.AlignVCenter
0060                 Kirigami.Theme.inherit: true
0061                 color: Kirigami.Theme.disabledTextColor
0062                 visible: input.displayText
0063             }
0064         }
0065
0066         Controls.ToolButton {
0067             Kirigami.Theme.inherit: true
0068             Layout.preferredWidth: buttonSize
0069             Layout.preferredHeight: buttonSize
0070
0071             icon.name: "go-up"
0072
0073             onClicked: currentWebView.findText(input.displayText, WebEngineView.FindBackward)
0074         }
0075
0076         Controls.ToolButton {
0077             Kirigami.Theme.inherit: true
0078             Layout.preferredWidth: buttonSize
0079             Layout.preferredHeight: buttonSize
0080
0081             icon.name: "go-down"
0082
0083             onClicked: currentWebView.findText(input.displayText)
0084         }
0085
0086         Controls.ToolButton {
0087             Kirigami.Theme.inherit: true
0088             Layout.preferredWidth: buttonSize
0089             Layout.preferredHeight: buttonSize
0090
0091             icon.name: "window-close"
0092             onClicked: findInPage.active = false
0093         }
0094     }
0095
0096     states: [
0097         State {
0098             name: "shown"
0099             when: findInPage.active
0100             AnchorChanges {
0101                 target: findInPage
0102                 anchors.bottom: findInPage.parent.bottom
0103                 anchors.top: undefined
0104             }
0105         },
0106         State {
0107             name: "hidden"
0108             AnchorChanges {
0109                 target: findInPage
0110                 anchors.bottom: undefined
0111                 anchors.top: findInPage.parent.bottom
0112             }
0113         }
0114     ]
0115
0116     onActiveChanged: {
0117         if (!active)
0118             input.text = '';
0119         else
0120             input.forceActiveFocus();
0121     }
0122
0123     function activate() {
0124         active = true;
0125         input.forceActiveFocus()
0126     }
0127 }