overte-Armored-Dragon/interface/resources/qml/hifi/NameCard.qml

//
//  NameCard.qml
//  qml/hifi
//
//  Created by Howard Stearns on 12/9/2016
//  Copyright 2016 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 Hifi 1.0 as Hifi
import QtQuick 2.5
import "../styles-uit"

Row {
    id: thisNameCard;
    // Spacing
    spacing: 10;
    // Anchors
    anchors.top: parent.top;
    anchors {
        topMargin: (parent.height - contentHeight)/2;
        bottomMargin: (parent.height - contentHeight)/2;
        leftMargin: 10;
        rightMargin: 10;
    }

    // Properties
    property int contentHeight: 50;
    property string displayName: "";
    property string userName: "";
    property int displayTextHeight: 18;
    property int usernameTextHeight: 12;

    Column {
        id: avatarImage;
        // Size
        height: contentHeight;
        width: height;
        Image {
            id: userImage;
            source: "../../icons/defaultNameCardUser.png"
            // Anchors
            width: parent.width;
            height: parent.height;
        }
    }
    Column {
        id: textContainer;
        // Size
        width: parent.width - avatarImage.width - parent.anchors.leftMargin - parent.anchors.rightMargin - parent.spacing;
        height: contentHeight;

        // DisplayName Text
        FiraSansSemiBold {
            id: displayNameText;
            // Properties
            text: thisNameCard.displayName;
            elide: Text.ElideRight;
            // Size
            width: parent.width;
            // Text Size
            size: thisNameCard.displayTextHeight;
            // Text Positioning
            verticalAlignment: Text.AlignVCenter;
        }

        // UserName Text
        FiraSansSemiBold {
            id: userNameText;
            // Properties
            text: thisNameCard.userName;
            elide: Text.ElideRight;
            visible: thisNameCard.displayName;
            // Size
            width: parent.width;
            // Text Size
            size: thisNameCard.usernameTextHeight;
            // Text Positioning
            verticalAlignment: Text.AlignVCenter;
        }

        // Spacer
        Item {
            height: 7;
            width: parent.width;
        }

        // VU Meter
        Rectangle {
            id: nameCardVUMeter;
            objectName: "AvatarInputs";
            width: parent.width;
            height: 4;
            // Avatar Audio VU Meter
            Item {
                id: controls;
                width: nameCardVUMeter.width;

                Rectangle {
                    anchors.fill: parent;
                    color: nameCardVUMeter.audioClipping ? "red" : "#696969";

                    Item {
                        id: audioMeter
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        anchors.leftMargin: nameCardVUMeter.iconPadding
                        anchors.right: parent.right
                        anchors.rightMargin: nameCardVUMeter.iconPadding
                        height: 8
                        Rectangle {
                            id: blueRect
                            color: "blue"
                            anchors.top: parent.top
                            anchors.bottom: parent.bottom
                            anchors.left: parent.left
                            width: parent.width / 4
                        }
                        Rectangle {
                            id: greenRect
                            color: "green"
                            anchors.top: parent.top
                            anchors.bottom: parent.bottom
                            anchors.left: blueRect.right
                            anchors.right: redRect.left
                        }
                        Rectangle {
                            id: redRect
                            color: "red"
                            anchors.top: parent.top
                            anchors.bottom: parent.bottom
                            anchors.right: parent.right
                            width: parent.width / 5
                        }
                        Rectangle {
                            z: 100
                            anchors.top: parent.top
                            anchors.bottom: parent.bottom
                            anchors.right: parent.right
                            width: (1.0 - nameCardVUMeter.audioLevel) * parent.width
                            color: "#dddddd";
                        }
                    }
                }
            }
        }
    }
}