abstract out letterbox message

interface/resources/qml/hifi/LetterboxMessage.qml

@@ -0,0 +1,51 @@
+//
+//  LetterboxMessage.qml
+//  qml/hifi
+//
+//  Created by Zach Fox and Howard Stearns on 1/5/2017
+//  Copyright 2017 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import "../styles-uit"
+
+Item {
+    property alias text: popupText.text
+    visible: false
+    id: letterbox
+    anchors.fill: parent
+    Rectangle {
+        anchors.fill: parent
+        color: "black"
+        opacity: 0.5
+        radius: hifi.dimensions.borderRadius
+    }
+    Rectangle {
+        width: Math.max(parent.width * 0.75, 400)
+        height: popupText.contentHeight*1.5
+        anchors.centerIn: parent
+        radius: hifi.dimensions.borderRadius
+        color: "white"
+        FiraSansSemiBold {
+            id: popupText
+            size: hifi.fontSizes.textFieldInput
+            color: hifi.colors.darkGray
+            horizontalAlignment: Text.AlignHCenter
+            anchors.fill: parent
+            anchors.leftMargin: 15
+            anchors.rightMargin: 15
+            wrapMode: Text.WordWrap
+        }
+    }
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton
+        onClicked: {
+            letterbox.visible = false
+        }
+    }
+}

interface/resources/qml/hifi/Pal.qml

@@ -11,21 +11,6 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
-/* TODO:
-
-   prototype:
-   - only show kick/mute when canKick
-   - margins everywhere
-   - column head centering
-   - column head font
-   - proper button .svg on toolbar
-
-   mvp:
-   - Show all participants, including ignored, and populate initial ignore/mute status.
-   - If name is elided, hover should scroll name left so the full name can be read.
-   
- */
-
 import QtQuick 2.5
 import QtQuick.Controls 1.4
 import "../styles-uit"
@@ -384,81 +369,17 @@ Item {
         }
     }
     // Explanitory popup upon clicking "[?]" next to "NAMES"
-    Item {
-        visible: false
+    LetterboxMessage {
         id: namesPopup
-        anchors.fill: pal
-        Rectangle {
-            anchors.fill: parent
-            color: "black"
-            opacity: 0.5
-            radius: hifi.dimensions.borderRadius
-        }
-        Rectangle {
-            width: Math.max(parent.width * 0.75, 400)
-            height: popupText.contentHeight*1.5
-            anchors.centerIn: parent
-            radius: hifi.dimensions.borderRadius
-            color: "white"
-            FiraSansSemiBold {
-                id: popupText
-                text: "Bold names in the list are Avatar Display Names.\n" +
-                    "If a Display Name isn't set, a unique Session Display Name is assigned." +
-                    "\n\nAdministrators of this domain can also see the Username or Machine ID associated with each avatar present."
-                size: hifi.fontSizes.textFieldInput
-                color: hifi.colors.darkGray
-                horizontalAlignment: Text.AlignHCenter
-                anchors.fill: parent
-                anchors.leftMargin: 15
-                anchors.rightMargin: 15
-                wrapMode: Text.WordWrap
-            }
-        }
-        MouseArea {
-            anchors.fill: parent
-            acceptedButtons: Qt.LeftButton
-            onClicked: {
-                namesPopup.visible = false
-            }
-        }
+        text: "Bold names in the list are Avatar Display Names.\n" +
+            "If a Display Name isn't set, a unique Session Display Name is assigned." +
+            "\n\nAdministrators of this domain can also see the Username or Machine ID associated with each avatar present."
     }
     // Explanitory popup upon clicking "[?]" next to "ADMIN"
-    Item {
-        visible: false
+    LetterboxMessage {
         id: adminPopup
-        anchors.fill: pal
-        Rectangle {
-            anchors.fill: parent
-            color: "black"
-            opacity: 0.5
-            radius: hifi.dimensions.borderRadius
-        }
-        Rectangle {
-            width: Math.max(parent.width * 0.75, 400)
-            height: adminPopupText.contentHeight*1.5
-            anchors.centerIn: parent
-            radius: hifi.dimensions.borderRadius
-            color: "white"
-            FiraSansSemiBold {
-                id: adminPopupText
-                text: 'Silencing a user mutes their microphone. Silenced users can unmute themselves by clicking the "UNMUTE" button on their HUD.\n\n' +
-                    "Banning a user will remove them from this domain and prevent them from returning. You can un-ban users from your domain's settings page."
-                size: hifi.fontSizes.textFieldInput
-                color: hifi.colors.darkGray
-                horizontalAlignment: Text.AlignHCenter
-                anchors.fill: parent
-                anchors.leftMargin: 15
-                anchors.rightMargin: 15
-                wrapMode: Text.WordWrap
-            }
-        }
-        MouseArea {
-            anchors.fill: parent
-            acceptedButtons: Qt.LeftButton
-            onClicked: {
-                adminPopup.visible = false
-            }
-        }
+        text: "Silencing a user mutes their microphone. Silenced users can unmute themselves by clicking the "UNMUTE" button on their HUD.\n\n" +
+            "Banning a user will remove them from this domain and prevent them from returning. You can un-ban users from your domain's settings page."
     }
 
     function findSessionIndex(sessionId, optionalData) { // no findIndex in .qml