Update permission request notification to UI style

5 files changed, 73 insertions, 32 deletions

diff --git a/src/qml/FeaturePermissionBar.qml b/src/qml/FeaturePermissionBar.qml
index 908c85b..8595724 100644
--- a/src/qml/FeaturePermissionBar.qml
+++ b/src/qml/FeaturePermissionBar.qml
@@ -40,6 +40,8 @@ import QtQuick.Controls 1.0
 import QtWebEngine 1.1
 import QtQuick.Layouts 1.0
 
+import "assets"
+
 Rectangle {
     property var requestedFeature;
     property url securityOrigin;
@@ -47,7 +49,7 @@ Rectangle {
 
     id: permissionBar
     visible: false
-    height: acceptButton.height + 4
+    height: 50
 
     onRequestedFeatureChanged: {
         message.text = securityOrigin + " wants to access " + message.textForFeature(requestedFeature);
@@ -55,39 +57,79 @@ Rectangle {
 
 
     RowLayout {
+        spacing: 0
         anchors {
             fill: permissionBar
-            leftMargin: 5
-            rightMargin: 5
         }
-        Label {
-            id: message
+        Rectangle {
+            color: uiColor
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
             Layout.fillWidth: true
 
-            function textForFeature(feature) {
-                if (feature === WebEngineView.MediaAudioCapture)
-                    return "your microphone"
-                if (feature === WebEngineView.MediaVideoCapture)
-                    return "your camera"
-                if (feature === WebEngineView.MediaAudioVideoCapture)
-                    return "your camera and microphone"
-                if (feature === WebEngineView.Geolocation)
-                    return "your position"
+            Text {
+                id: message
+                width: parent.width
+                elide: Text.ElideRight
+                horizontalAlignment: Text.AlignHCenter
+                anchors {
+                    leftMargin: 15
+                    rightMargin: 15
+                    verticalCenter: parent.verticalCenter
+                    horizontalCenter: parent.horizontalCenter
+                }
+                font.family: defaultFontFamily
+                font.pixelSize: 20
+                color: "white"
+                function textForFeature(feature) {
+                    if (feature === WebEngineView.MediaAudioCapture)
+                        return "your microphone"
+                    if (feature === WebEngineView.MediaVideoCapture)
+                        return "your camera"
+                    if (feature === WebEngineView.MediaAudioVideoCapture)
+                        return "your camera and microphone"
+                    if (feature === WebEngineView.Geolocation)
+                        return "your position"
+                }
+            }
+        }
+        Rectangle {
+            width: 1
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
             }
+            color: uiSeparatorColor
         }
 
-        Button {
+        UIButton {
             id: acceptButton
-            text: "Accept"
+            implicitHeight: permissionBar.height
+            implicitWidth: toolBarSize
+            buttonText: "Accept"
+            textSize: 18
             Layout.alignment: Qt.AlignRight
             onClicked: {
                 view.grantFeaturePermission(securityOrigin, requestedFeature, true);
                 permissionBar.visible = false;
             }
         }
+        Rectangle {
+            width: 1
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: uiSeparatorColor
+        }
 
-        Button {
-            text: "Deny"
+        UIButton {
+            buttonText: "Deny"
+            textSize: 18
+            implicitHeight: permissionBar.height
+            implicitWidth: toolBarSize
             Layout.alignment: Qt.AlignRight
             onClicked: {
                 view.grantFeaturePermission(securityOrigin, requestedFeature, false);
diff --git a/src/qml/HomeScreen.qml b/src/qml/HomeScreen.qml
index 1fbdaac..4842fc3 100644
--- a/src/qml/HomeScreen.qml
+++ b/src/qml/HomeScreen.qml
@@ -511,18 +511,12 @@ Rectangle {
                 color: uiColor
                 implicitWidth: 180
                 implicitHeight: 70
+                buttonText: "OK"
                 visible: messageBox.state != "empty"
                 anchors {
                     horizontalCenter: parent.horizontalCenter
                     bottom: parent.bottom
                 }
-                Text {
-                    color: "white"
-                    anchors.centerIn: parent
-                    text: "OK"
-                    font.family: defaultFontFamily
-                    font.pixelSize: 28
-                }
                 onClicked: {
                     if (messageBox.state == "tabsfull") {
                         homeScreen.state = "disabled"
diff --git a/src/qml/PageView.qml b/src/qml/PageView.qml
index 243d892..471abd8 100644
--- a/src/qml/PageView.qml
+++ b/src/qml/PageView.qml
@@ -102,6 +102,7 @@ Rectangle {
                     }
                 }
             }
+
             FeaturePermissionBar {
                 id: permBar
                 view: webEngineView
diff --git a/src/qml/assets/UIButton.qml b/src/qml/assets/UIButton.qml
index 92afe5b..cc9351f 100644
--- a/src/qml/assets/UIButton.qml
+++ b/src/qml/assets/UIButton.qml
@@ -46,10 +46,20 @@ ToolButton {
     implicitHeight: toolBarSize
     implicitWidth: toolBarSize
 
+    property alias buttonText: label.text
+    property alias textColor: label.color
+    property alias textSize: label.font.pixelSize
     property string source: ""
     property real radius: 0.0
     property string color: uiColor
     property string highlightColor: buttonPressedColor
+    Text {
+        id: label
+        color: "white"
+        anchors.centerIn: parent
+        font.family: defaultFontFamily
+        font.pixelSize: 28
+    }
     style: ButtonStyle {
         background: Rectangle {
             opacity: root.enabled ? 1.0 : 0.3
diff --git a/src/qml/assets/UIToolBar.qml b/src/qml/assets/UIToolBar.qml
index 9fa893f..39a0974 100644
--- a/src/qml/assets/UIToolBar.qml
+++ b/src/qml/assets/UIToolBar.qml
@@ -160,13 +160,7 @@ ToolBar {
         UIButton {
             id: doneButton
             color: toolBarFillColor
-            Text {
-                color: "white"
-                anchors.centerIn: parent
-                text: "Done"
-                font.family: defaultFontFamily
-                font.pixelSize: 28
-            }
+            buttonText: "Done"
             implicitWidth: 120
             Component.onCompleted: doneButton.clicked.connect(root.doneClicked)
         }