Awesome Flat QML UI

Info Thread
By -Info Thread
December 24, 2022
0

 


 
 

QML Flat Custom Control Component UI :

  1. Buttons
  2. Radio Button
  3. Check Box
  4. Switch
  5. input
  6. ComboBox
  7. Slider
  8. Double Slider
  9. Progress bar
  10. Tumbler
  11. SpinBox

 

Source Code Of Custom Component :

Directory Structure :


 

How To Use Custom Component :

Main.qml File  :

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
import QtQuick.Shapes 1.0
import QtQuick.Layouts 1.0
import "../Button"
import "../Input"
import "../Progress"

ApplicationWindow {
    id: root
    visible: true
    width: 800
    height: 480
    title: qsTr("https://dabreha.blogspot.com")
    Flickable {
        width: root.width; height: root.height
        anchors.horizontalCenter: parent.horizontalCenter
        contentWidth: layout.width;
        contentHeight: layout.height


        ColumnLayout {
            id:layout
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.leftMargin: 20
            spacing: 15


            Text {
                text: "Buttons: "
                font.pixelSize: 18
                font.family: "Arial"
                font.weight: Font.Thin
                color: "#a0000000"
                Layout.leftMargin: 20
            }


            GridLayout {
                width: root.width - 10
                rows: 8
                Layout.leftMargin: 20


                Button {
                    text: "First"
                    backgroundDefaultColor: "#727CF5"
                }


                Button {
                    text: "Secondary"
                    backgroundDefaultColor: "#5A6268"
                }


                Button {
                    text: "Success"
                    backgroundDefaultColor: "#0ACF97"
                }


                Button {
                    text: "Danger"
                    backgroundDefaultColor: "#F9375E"
                }


                Button {
                    text: "Warning"
                    contentItemTextColor: "#313A46"
                    backgroundDefaultColor: "#FFBC00"
                }


                Button {
                    text: "Info"
                    backgroundDefaultColor: "#2B99B9"
                }


                Button {
                    text: "Light"
                    contentItemTextColor: "#313A46"
                    backgroundDefaultColor: "#EEF2F7"
                }


                Button {
                    backgroundDefaultColor: "#212730"
                    backgroundPressedColor: "#313A46"
                }
            }


            Text {
                text: "Radio Button: "
                font.pixelSize: 18
                font.family: "Arial"
                font.weight: Font.Thin
                color: "#a0000000"
                Layout.leftMargin: 20
            }


            GridLayout {
                width: root.width
                rows: 5
                Layout.leftMargin: 20


                Repeater {
                    model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]


                    Column {
                        spacing: 15


                        RadioButton {
                            text: "Radio Button 1"
                            checked: true
                            checkedColor: modelData
                        }


                        RadioButton {
                            text: "Radio Button 2"
                            checkedColor: modelData
                        }


                        RadioButton {
                            text: "Radio Button 3"
                            checkedColor: modelData
                        }
                    }
                }
            }


            Text {
                text: "Check Box: "
                font.pixelSize: 18
                font.family: "Arial"
                font.weight: Font.Thin
                color: "#a0000000"
                Layout.leftMargin: 20
            }


            GridLayout {
                width: root.width
                rows: 5
                Layout.leftMargin: 20


                Repeater {
                    model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]


                    Column {
                        spacing: 15


                        CheckBox {
                            text: "Check Button 1"
                            checked: true
                            checkedColor: modelData
                        }


                        CheckBox {
                            text: "Check Button 2"
                            checkedColor: modelData
                        }


                        CheckBox {
                            text: "Check Button 3"
                            checkedColor: modelData
                        }
                    }
                }
            }


            Text {
                text: "Switch: "
                font.pixelSize: 18
                font.family: "Arial"
                font.weight: Font.Thin
                color: "#a0000000"
                Layout.leftMargin: 20
            }


            GridLayout {
                width: root.width
                rows: switchRepeater.count
                Layout.leftMargin: 20


                Repeater {
                    id: switchRepeater
                    model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]
                    Column {
                        spacing: 15
                        Switch {
                            checkedColor: modelData
                            checked: true
                        }


                        Switch {
                            checkedColor: modelData
                        }


                        Switch {
                            checkedColor: modelData
                            checked: true
                        }
                    }
                }
            }


            Text {
                text: "Text Input: "
                font.pixelSize: 18
                font.family: "Arial"
                font.weight: Font.Thin
                color: "#a0000000"
                Layout.leftMargin: 20
            }


            GridLayout {
                width: root.width
                rows: 3
                columns: 3
                Layout.leftMargin: 20


                Repeater {
                    id: textFieldRepeater
                    model: ["#727CF5", "#0ACF97", "#F9375E",
                        "#FFBC00", "#2B99B9", "#5A6268",
                        "#EEF2F7", "#212730"]


                    TextField {
                        checkedColor: modelData
                    }
                }


                TextField {
                    enabled: false
                    placeholderText: "禁用状态"
                }
            }


            Text {
                text: "ComboBox: "
                font.pixelSize: 18
                font.family: "Arial"
                font.weight: Font.Thin
                color: "#a0000000"
                Layout.leftMargin: 20
            }


            GridLayout {
                width: root.width
                rows: 3
                columns: 3
                Layout.leftMargin: 20


                Repeater {
                    id: comboboxRepeater
                    model: ["#727CF5", "#0ACF97", "#F9375E",
                        "#FFBC00", "#2B99B9", "#5A6268",
                        "#EEF2F7", "#212730", "#3498DB"]


                    ComboBox {
                        model: ["First", "Second", "Third"]
                        checkedColor: modelData
                    }
                }
            }


            Text {
                text: "Slider: "
                font.pixelSize: 18
                font.family: "Arial"
                font.weight: Font.Thin
                color: "#a0000000"
                Layout.leftMargin: 20
            }


            GridLayout {
                width: root.width
                rows: 3
                columns: 3
                Layout.leftMargin: 20


                Repeater {
                    id: spinBoxRepeater
                    model: ["#727CF5", "#0ACF97", "#F9375E",
                        "#FFBC00", "#2B99B9", "#5A6268",
                        "#EEF2F7", "#212730", "#3498DB"]


                    Slider {
                        checkedColor: modelData
                        value: Math.random()
                    }
                }
            }


            Text {
                text: "RangeSlider: "
                font.pixelSize: 18
                font.family: "Arial"
                font.weight: Font.Thin
                color: "#a0000000"
                Layout.leftMargin: 20
            }


            GridLayout {
                width: root.width
                rows: 3
                columns: 3
                Layout.leftMargin: 20


                Repeater {
                    model: ["#727CF5", "#0ACF97", "#F9375E",
                        "#FFBC00", "#2B99B9", "#5A6268",
                        "#EEF2F7", "#212730", "#3498DB"]


                    RangeSlider {
                        checkedColor: modelData
                        //                        first.value: Math.random()
                        //                        second.value: Math.random()
                    }
                }
            }


            Text {
                text: "ProgressBar: "
                font.pixelSize: 18
                font.family: "Arial"
                font.weight: Font.Thin
                color: "#a0000000"
                Layout.leftMargin: 20
            }


            GridLayout {
                width: root.width
                rows: 3
                columns: 3
                Layout.leftMargin: 20


                Repeater {
                    model: ["#727CF5", "#0ACF97", "#F9375E",
                        "#FFBC00", "#2B99B9", "#5A6268",
                        "#EEF2F7", "#212730", "#3498DB"]


                    ProgressBar {
                        color: modelData
                        value: Math.random()
                    }
                }
            }


            Text {
                text: "SpinBox: "
                font.pixelSize: 18
                font.family: "Arial"
                font.weight: Font.Thin
                color: "#a0000000"
                Layout.leftMargin: 20
            }


            GridLayout {
                width: root.width
                rows: 3
                columns: 3
                Layout.leftMargin: 20


                Repeater {
                    model: ["#727CF5", "#0ACF97", "#F9375E",
                        "#FFBC00", "#2B99B9", "#5A6268",
                        "#EEF2F7", "#212730", "#3498DB"]


                    SpinBox {
                        value: Math.random() * 10
                        color: modelData
                    }
                }
            }


            Text {
                text: "Tumbler: "
                font.pixelSize: 18
                font.family: "Arial"
                font.weight: Font.Thin
                color: "#a0000000"
                Layout.leftMargin: 20
            }


            GridLayout {
                width: root.width
                rows: 3
                Layout.leftMargin: 20


                Repeater {
                    model: ["#727CF5", "#0ACF97", "#F9375E",
                        "#FFBC00", "#2B99B9", "#5A6268",
                        "#EEF2F7", "#212730", "#3498DB"]


                    Tumbler {
                        model: ["00", "01", "02", "03", "04", "05"]
                        currentItemColor: modelData
                    }
                }
            }
        }
    }
}

 

Component Library :  

1.1 Button

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0


Button {
    id: root
    property color backgroundDefaultColor: "#4E5BF2"
    property color backgroundPressedColor: Qt.darker(backgroundDefaultColor, 1.2)
    property color contentItemTextColor: "white"


    text: "Button"
    hoverEnabled: true


    contentItem: Text {
        text: root.text
        color: root.contentItemTextColor
        font.pixelSize: 15
        font.family: "Arial"
        font.weight: Font.Thin
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }


    background: Rectangle {
        implicitWidth: 83
        implicitHeight: 37
        color: root.down ? root.backgroundPressedColor : root.backgroundDefaultColor


        Rectangle {
            anchors.fill: parent
            color: "#20000000"
            opacity: root.hovered
            Behavior on opacity {
                NumberAnimation { duration: 300 }
            }
        }


        radius: 3
        layer.enabled: true//root.hovered
        layer.effect: DropShadow {
            transparentBorder: true
            color: root.down ? root.backgroundPressedColor : root.backgroundDefaultColor
            samples: 20 /*20*/
        }
    }
}

1.2 Radio Button

import QtQuick 2.0
import QtQuick.Controls 2.0


RadioButton {
    id: root


    property color checkedColor: "#0ACF97"
    text: qsTr("RadioButton")


    hoverEnabled: true
    indicator: Rectangle {
        x: root.leftPadding
        anchors.verticalCenter: parent.verticalCenter
        width: 26; height: width
        antialiasing: true
        radius: width/2
        border.width: 2
        border.color: root.checkedColor


        Rectangle {
            anchors.centerIn: parent
            width: parent.width*0.7; height: width
            antialiasing: true
            radius: width/2
            color: {
                if (checked)
                    return checkedColor


                if (hovered)
                    return "#BDC3C7"


                return "#00000000"
            }
            visible: {
                if (checked)
                    return true


                if (hovered)
                    return true


                return false
            }
            opacity: visible


            Behavior on opacity {
                NumberAnimation {
                    duration: 250
                }
            }
        }
    }
}

 

1.3 CheckBox

import QtQuick 2.0
import QtQuick.Controls 2.0


CheckBox {
    id: root


    property color checkedColor: "#0ACF97"


    text: qsTr("CheckBox")


    hoverEnabled: true
    indicator: Rectangle {
        x: root.leftPadding
        anchors.verticalCenter: parent.verticalCenter
        width: 26; height: width
        antialiasing: true
        radius: 5
        border.width: 2
        border.color: root.checkedColor


        Rectangle {
            anchors.centerIn: parent
            width: parent.width*0.7; height: width
            antialiasing: true
            radius: parent.radius * 0.7
            color: {
                if (checked)
                    return checkedColor


                if (hovered)
                    return "#BDC3C7"


                return "#00000000"
            }
            visible: {
                if (checked)
                    return true


                if (hovered)
                    return true


                return false
            }
            opacity: visible


            Behavior on opacity {
                NumberAnimation {
                    duration: 250
                }
            }
        }
    }
}

 

1.4 Switch

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0


Switch {
    id: root
    property color checkedColor: "#0ACF97"


    hoverEnabled: true
    indicator: Rectangle {
        width: 54
        height: 34
        radius: height / 2
        color: root.checked ? checkedColor : "white"
        border.width: 2
        border.color: root.checked ? checkedColor : "#E5E5E5"


        Rectangle {
            x: root.checked ? parent.width - width - 2 : 1
            width: root.checked ? parent.height - 4 : parent.height - 2
            height: width
            radius: width / 2
            anchors.verticalCenter: parent.verticalCenter
            color: "white"
            border.color: "#D5D5D5"


            Behavior on x {
                NumberAnimation { duration: 200 }
            }
        }


        layer.enabled: root.hovered
        layer.effect: DropShadow {
            id: dropShadow
            transparentBorder: true
            color: root.checked ? root.checkedColor : "#E5E5E5"
            samples: 10 /*20*/
        }
    }
}

 

1.5 TextField

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0


TextField {
    id: root


    property color checkedColor: "#D5DBDB"


    signal doubleClicked(var/*MouseEvent*/ event)


    placeholderText: qsTr("Please enter content")
    font.family: "Arial"
    font.pixelSize: 15
    font.weight: Font.Thin
    antialiasing: true


    background: Rectangle {
        implicitWidth: 213
        implicitHeight: 42
        radius: 8
        color: root.enabled ? "transparent" : "#F4F6F6"
        border.color: root.enabled ? root.checkedColor : "#D5DBDB"
        border.width: 2
        opacity: root.enabled ? 1 : 0.7


        layer.enabled: root.hovered
        layer.effect: DropShadow {
            id: dropShadow
            transparentBorder: true
            color: root.checkedColor
            samples: 10 /*20*/
        }
    }


    cursorDelegate: Rectangle {
        width: 1
        height: parent.height * 0.4
        color: root.checkedColor
        visible: root.focus


        Timer {
            interval: 600
            repeat: true
            running: root.focus
            onRunningChanged: parent.visible = running
            onTriggered: parent.visible = !parent.visible
        }
    }


    onDoubleClicked: selectAll()


    /* note: This signal was introduced in QtQuick.Controls 2.1 (Qt 5.8). */
    onPressed: {
        _private.mouseEvent = event
        _private.isCheckDoubleClickedEvent++


        if (! _checkDoubleClickedEventTimer.running)
            _checkDoubleClickedEventTimer.restart()
    }


    /* Private */
    Item {
        id: _private
        property int isCheckDoubleClickedEvent: 0
        property var/*MouseEvent*/ mouseEvent


        Timer {
            id: _checkDoubleClickedEventTimer
            running: false
            repeat: false
            interval: 180
            onTriggered: {
                if (_private.isCheckDoubleClickedEvent >= 2) {
                    /* Double Clicked Event */
                    root.doubleClicked(_private.mouseEvent)
                }


                stop()
                _private.isCheckDoubleClickedEvent = 0
            }
        }
    }
}

 

1.6 Combobox

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0


ComboBox {
    id: root


    property color checkedColor: "#1ABC9C"


    delegate: ItemDelegate {
        width: root.width


        contentItem: Text {
            text: modelData
            color: root.highlightedIndex === index ? "white" : "black"
            font.family: "Arial"
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }


        background: Rectangle {
             width: parent.width
             height: parent.height
             color: root.highlightedIndex === index ? root.checkedColor : "#F3F4F5"
         }
    }


    indicator: Canvas {
        id: canvas
        x: root.width - width - 10
        y: (root.availableHeight - height) / 2
        width: 12
        height: 8
        contextType: "2d"


        Connections {
            target: root
            function onPressedChanged () {  canvas.requestPaint() }
        }


        onPaint: {
            context.reset();
            context.moveTo(0, 0);
            context.lineTo(width, 0);
            context.lineTo(width / 2, height);
            context.closePath();
            context.fillStyle = "white"
            context.fill();
        }
    }


    contentItem: Item {
        width: root.background.width - root.indicator.width - 10
        height: root.background.height


        Text {
            anchors.verticalCenter: parent.verticalCenter
            x: 10
            text: root.displayText
            elide: Text.ElideRight


            font.pixelSize: 15
            font.family: "Arial"
            font.weight: Font.Thin
            color: root.down ? Qt.rgba(255, 255, 255, 0.75) : "white"
        }
    }


    background: Rectangle {
        implicitWidth: 102
        implicitHeight: 41
        color: root.down ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
        radius: 5


        layer.enabled: root.hovered | root.down
        layer.effect: DropShadow {
            transparentBorder: true
            color: root.checkedColor
            samples: 10 /*20*/
        }
    }


    popup: Popup {
        y: root.height - 1
        width: root.width
        implicitHeight: contentItem.implicitHeight
        padding: 0


        contentItem: ListView {
            implicitHeight: contentHeight
            model: root.popup.visible ? root.delegateModel : null
            clip: true
            currentIndex: root.highlightedIndex


            ScrollIndicator.vertical: ScrollIndicator { }
        }


        background: Rectangle {
            color: "#F3F4F5"
            radius: 5
            clip: true


            layer.enabled: root.hovered | root.down
            layer.effect: DropShadow {
                transparentBorder: true
                color: "#F3F4F5"
                samples: 10 /*20*/
            }
        }
    }
}

 

1.7 Slider

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0


Slider {
    id: root


    property color checkedColor: "#3498DB"


    value: 0.5


    background: Rectangle {
        x: root.leftPadding
        y: root.topPadding + root.availableHeight / 2 - height / 2
        implicitWidth: 200
        implicitHeight: 12
        width: root.availableWidth
        height: implicitHeight
        radius: height / 2
        color: "#EBEDEF"


        Rectangle {
            width: root.visualPosition == 0 ? 0 : root.handle.x + root.handle.width / 2
            height: parent.height
            color: root.checkedColor
            radius: height / 2




            layer.enabled: root.hovered | root.pressed
            layer.effect: DropShadow {
                transparentBorder: true
                color: root.checkedColor
                samples: 8
            }
        }
    }


    handle: Rectangle {
        x: root.leftPadding + root.visualPosition * (root.availableWidth - width)
        y: root.topPadding + root.availableHeight / 2 - height / 2
        implicitWidth: root.background.implicitHeight + 6
        implicitHeight: implicitWidth
        radius: implicitWidth / 2
        color: root.pressed ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
        border.color: Qt.darker(root.checkedColor, 0.93)


        layer.enabled: root.hovered | root.pressed
        layer.effect: DropShadow {
            transparentBorder: true
            color: root.checkedColor
            samples: 10 /*20*/
        }
    }
}

 

1.8 Range Slider

import QtQuick 2.5
import QtQuick.Controls 2.0


RangeSlider {
    id: root


    property color checkedColor: "#3498DB"


    first.value: 0.25
    second.value: 0.75


    background: Rectangle {
        x: root.leftPadding
        y: root.topPadding + root.availableHeight / 2 - height / 2
        implicitWidth: 200
        implicitHeight: 12
        width: root.availableWidth
        height: implicitHeight
        radius: height / 2
        color: "#EBEDEF"


        Rectangle {
            x: root.first.visualPosition * parent.width
            width: root.second.visualPosition * parent.width - x
            height: parent.height
            color: root.checkedColor
            radius: height / 2
        }
    }


    first.handle: Rectangle {
        x: root.leftPadding + first.visualPosition * (root.availableWidth - width)
        y: root.topPadding + root.availableHeight / 2 - height / 2
        implicitWidth: root.background.implicitHeight + 6
        implicitHeight: implicitWidth
        radius: implicitWidth / 2
        color: first.pressed ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
        border.color: Qt.darker(root.checkedColor, 0.93)
    }


    second.handle: Rectangle {
        x: root.leftPadding + second.visualPosition * (root.availableWidth - width)
        y: root.topPadding + root.availableHeight / 2 - height / 2
        implicitWidth: root.background.implicitHeight + 6
        implicitHeight: implicitWidth
        radius: implicitWidth / 2
        color: second.pressed ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
        border.color: Qt.darker(root.checkedColor, 0.93)
    }
}

 

1.9 ProgressBar

import QtQuick 2.0
import QtQuick.Controls 2.0


ProgressBar {
    id: root


    property color color: "#3498DB"


    value: 0.5
//    padding: 2


    background: Rectangle {
        implicitWidth: 200
        implicitHeight: 20
        color: "#EBEDEF"
//        radius: implicitHeight / 2
    }


    contentItem: Item {
        implicitWidth: root.background.implicitWidth
        implicitHeight: root.background.implicitHeight


        Rectangle {
            width: root.visualPosition * parent.width
            height: parent.height
            color: root.color
//            radius: parent.height / 2
        }
    }
}

 

1.10 SpinBox

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0


SpinBox {
      id: root


      property color color: "#3498DB"


      value: 50
      editable: true


      contentItem: TextInput {
          text: root.value


          font.pixelSize: 15
          font.family: "Arial"
          font.weight: Font.Thin


          horizontalAlignment: Qt.AlignHCenter
          verticalAlignment: Qt.AlignVCenter


          readOnly: !root.editable
          validator: root.validator
      }


      up.indicator: Rectangle {
          x: root.mirrored ? 0 : parent.width - width
          implicitWidth: 37
          implicitHeight: implicitWidth
          color: root.up.pressed ? "#EBEDEF" : root.color


          Text {
              text: "+"
              anchors.fill: parent
              color: root.up.pressed ? root.color : "white"


              font.bold: true
              font.pixelSize: root.font.pixelSize * 2
              fontSizeMode: Text.Fit


              horizontalAlignment: Text.AlignHCenter
              verticalAlignment: Text.AlignVCenter
          }
      }


      down.indicator: Rectangle {
          x: root.mirrored ? parent.width - width : 0
          implicitWidth: root.up.indicator.implicitWidth
          implicitHeight: implicitWidth
          color: root.down.pressed ? "#EBEDEF" : root.color


          Text {
              text: "-"
              anchors.fill: parent
              color: root.down.pressed ? root.color : "white"


              font.bold: true
              font.pixelSize: root.font.pixelSize * 2
              fontSizeMode: Text.Fit


              horizontalAlignment: Text.AlignHCenter
              verticalAlignment: Text.AlignVCenter
          }
      }


      background: Rectangle {
          implicitWidth: 138
          border.color: "#EBEDEF"


          layer.enabled: root.hovered
          layer.effect: DropShadow {
              id: dropShadow
              transparentBorder: true
              color: "#EEF2F7"
              samples: 8 /*20*/
          }
      }
  }

 

1.11 Tumbler

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0


Tumbler {
    id: root


    property color currentItemColor: "#3498DB"


    visibleItemCount: 5


    delegate: Text {
        text: modelData
        color: root.currentItemColor


        font.family: "Arial"
        font.weight: Font.Thin
        font.pixelSize: 50


        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        opacity: 1.0 - Math.abs(Tumbler.displacement) / root.visibleItemCount
        scale: opacity
    }


    /*
    contentItem: PathView {
        id: pathView
        model: root.model
        delegate: root.delegate
        clip: true
        pathItemCount: root.visibleItemCount
        currentIndex: root.currentIndex
        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        dragMargin: width / 2


        path: Path {
            startX: pathView.width / 2
            startY: 0
            PathLine { x: pathView.width/2; y: pathView.height }
        }
    }
    */


    background: Rectangle {
        width: root.width;
        height: root.height
        border.color: "#EBEDEF"


        layer.enabled: root.hovered
        layer.effect: DropShadow {
            transparentBorder: true
            color: root.currentItemColor
            samples: 5 /*20*/
        }
    }
}

 


 

 

 

 

 

Tags:

You may like these posts

Show more

Post a Comment

0Comments

Post a Comment (0)
Share to other apps
Copy Post Link