starting song editor

src/qml/presenter/LeftDock.qml

@@ -9,20 +9,31 @@ import org.kde.kirigami 2.13 as Kirigami
 
 ColumnLayout {
     id: root
-    Layout.fillHeight: true
+
+    Rectangle {
+        id: headerBackground
+        color: Kirigami.Theme.backgroundColor
+        height: 40
+        opacity: 1.0
+        Layout.fillWidth: true
 
         Kirigami.Heading {
             id: serviceTitle
             text: "Service List"
-        level: 1
+            anchors.centerIn: headerBackground 
-        Layout.alignment: Qt.AlignHCenter
+            padding: 5
+            level: 3
+        }
     }
 
     ListView {
         id: serviceItemList
+        Layout.fillWidth: true
+        Layout.fillHeight: true
         model: listModel
         delegate: itemDelegate
-        /* flickDeceleration: 2000 */
+        clip: true
+        spacing: 2
         
         Component {
             id: itemDelegate
@@ -49,8 +60,6 @@ ColumnLayout {
             anchors.leftMargin: 10
             active: hovered || pressed
         }
-    }
-
         ListModel {
             id: listModel
             ListElement {
@@ -126,4 +135,6 @@ ColumnLayout {
                  type: "video"
              }
          }
+     }
 }
+

src/qml/presenter/MainWindow.qml

@@ -16,7 +16,6 @@ Controls.Page {
     Item {
         id: mainItem
         anchors.fill: parent
-        height: parent.height
 
         Controls.SplitView {
             id: splitMainView
@@ -40,9 +39,8 @@ Controls.Page {
                 Controls.SplitView.preferredWidth: 200
             }
 
-            Rectangle {
+            Presenter.SongEditor {
                 id: rightMainArea
-                color: "red"
                 Controls.SplitView.fillHeight: true
                 Controls.SplitView.fillWidth: true
                 Controls.SplitView.preferredWidth: 700

src/qml/presenter/SongEditor.qml

@@ -0,0 +1,83 @@
+import QtQuick 2.13
+import QtQuick.Dialogs 1.0
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.2
+import QtMultimedia 5.15
+import QtAudioEngine 1.15
+import org.kde.kirigami 2.13 as Kirigami
+import "./" as Presenter
+
+Item {
+    id: root
+
+    GridLayout {
+        id: mainLayout
+        columns: 2
+        rowSpacing: 5
+        columnSpacing: 20
+
+        Controls.ToolBar {
+            Layout.columnSpan: 2
+            id: toolbar
+            RowLayout {
+                anchors.fill: parent 
+
+                Controls.ComboBox {
+                    model: ["VictorMono", "Calibri", "Arial", "Quicksand"]
+                }
+                Controls.SpinBox {
+                    editable: true
+                    from: 5
+                    to: 72
+                }
+                Controls.ComboBox {
+                    model: ["Left", "Center", "Right", "Justify"]
+                    implicitWidth: 100
+                }
+                Controls.ToolButton {
+                    text: "B"
+                }
+                Controls.ToolButton {
+                    text: "I"
+                }
+                Controls.ToolButton {
+                    text: "U"
+                }
+                Controls.ToolSeparator {}
+                Controls.ToolButton {
+                    text: "Effects"
+                }
+            }
+        }
+
+        Controls.TextField {
+            implicitWidth: 300
+            Layout.leftMargin: 20
+        }
+
+        Rectangle {
+            color: "red"
+            implicitWidth: 400
+            implicitHeight: 10
+            Layout.rightMargin: 20
+        }
+
+        Controls.TextArea {
+            implicitWidth: 300
+            implicitHeight: 500
+            Layout.bottomMargin: 30
+            Layout.leftMargin: 20
+            placeholderText: "Put lyrics here..."
+        }
+
+        Rectangle {
+            color: "red"
+            implicitWidth: 400
+            implicitHeight: 500
+            Layout.bottomMargin: 30
+            Layout.rightMargin: 20
+        }
+    }
+
+}

src/resources.qrc

@@ -10,5 +10,6 @@
         <file>qml/presenter/Header.qml</file>
         <file>qml/presenter/Actions.qml</file>
         <file>qml/presenter/PanelItem.qml</file>
+        <file>qml/presenter/SongEditor.qml</file>
     </qresource>
 </RCC>