trinity/qml/RoomSettings.qml

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.0
import QtQuick.Shapes 1.0

Popup {
    id: roomSettings

    width: 500
    height: 256

    x: parent.width / 2 - width / 2
    y: parent.height / 2 - height / 2

    modal: true

    property var room

    Rectangle {
        width: parent.width
        height: parent.height

        anchors.horizontalCenter: parent.horizontalCenter

        color: "transparent"

        TabBar {
            id: bar

            TabButton {
                text: "General"
            }

            TabButton {
                text: "Security & Privacy"
            }

            TabButton {
                text: "Roles & Permissions"
            }

            TabButton {
                text: "Notifications"
            }

            TabButton {
                text: "Advanced"
            }
        }

        SwipeView {
            id: settingsStack

            anchors.top: bar.bottom

            width: parent.width
            height: parent.height

            currentIndex: bar.currentIndex

            clip: true

            Item {
                id: overviewTab

                Label {
                    id: nameLabel

                    text: "Room Name"
                }

                TextField {
                    id: nameField

                    text: room.name

                    anchors.top: nameLabel.bottom
                }

                Label {
                    id: topicLabel

                    text: "Room Topic"

                    anchors.top: nameField.bottom
                }

                TextField {
                    id: topicField

                    text: room.topic

                    anchors.top: topicLabel.bottom
                }
            }
        }
    }
}