switching to a reusable LibraryItem component for easier refactoring

src/qml/presenter/LibraryItem.qml

@@ -8,7 +8,7 @@ import org.kde.kirigami 2.13 as Kirigami
 import "./" as Presenter
 import org.presenter 1.0
 
-Item {
+ColumnLayout {
     id: root
     property var proxyModel
     property var innerModel
@@ -16,9 +16,36 @@ Item {
     property string headerLabel
     property string itemLabel
     property string itemSubtitle
+    property string itemIcon
     property var newItemFuntion
     property var deleteItemFuntion
 
+    states: [
+        State {
+            name: "deselected"
+            when: (selectedLibrary !== libraryType)
+            PropertyChanges {
+                target: root
+                Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
+            }
+        },
+        State {
+            name: "selected"
+            when: (selectedLibrary == libraryType)
+            PropertyChanges { target: root }
+        }
+    ]
+
+    transitions: Transition {
+        to: "*"
+        NumberAnimation {
+            target: root
+            properties: "preferredHeight"
+            easing.type: Easing.OutCubic
+            duration: 300
+        }
+    }
+
     Rectangle {
         id: libraryPanel
         Layout.preferredHeight: 40
@@ -34,7 +61,7 @@ Item {
             anchors.leftMargin: 15
             anchors.verticalCenter: parent.verticalCenter
             elide: Text.ElideLeft
-            text: label
+            text: headerLabel
         }
 
         Controls.Label {
@@ -79,6 +106,7 @@ Item {
         z: 2
         Layout.preferredHeight: 40
         Layout.fillWidth: true
+        Layout.alignment: Qt.AlignTop
         /* width: parent.width */
         color: Kirigami.Theme.backgroundColor
         opacity: 1
@@ -134,12 +162,13 @@ Item {
     }
 
     ListView {
-        Layout.preferredHeight: parent.height - 240
+        Layout.fillHeight: true
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignTop
         id: libraryList
         model: proxyModel
-        ItemselectionModel {
+        clip: true
+        ItemSelectionModel {
             id: selectionModel
             model: proxyModel
             onSelectionChanged: {
@@ -182,18 +211,26 @@ Item {
             Item{
                 implicitWidth: ListView.view.width
                 height: selectedLibrary == libraryType ? 50 : 0
-                Kirigami.BasiclistItem {
+                Kirigami.BasicListItem {
                     id: listItem
 
                     property bool rightMenu: false
                     property bool selected: selectionModel.isSelected(proxyModel.idx(index))
+                    property bool fileValidation: fileHelper.validate(filePath)
 
                     implicitWidth: libraryList.width
                     height: selectedLibrary == libraryType ? 50 : 0
                     clip: true
-                    label: itemLabel
+                    label: title
-                    subtitle: itemSubtitle
+                    subtitle: {
-                    icon: "folder-music-symbolic"
+                        if (selectedLibrary == "song")
+                            author
+                        else if (fileValidation)
+                            filePath;
+                        else
+                            "file is missing"
+                    }
+                    icon: itemIcon
                     iconSize: Kirigami.Units.gridUnit
                     supportsMouseEvents: false
                     backgroundColor: Kirigami.Theme.backgroundColor;
@@ -204,7 +241,16 @@ Item {
                         value: Kirigami.Theme.highlightColor
                     }
 
-                    textColor: Kirigami.Theme.textColor;
+                    textColor: {
+                        if (selectedLibrary == "song")
+                            Kirigami.Theme.textColor;
+                        else if (fileValidation) {
+                            Kirigami.Theme.textColor;
+                        }
+                        else
+                            "red"
+                    }
+
                     Binding on textColor {
                         when: dragHandler.containsMouse ||
                             (selectionModel.hasSelection &&

src/qml/presenter/ServiceList.qml

@@ -242,7 +242,8 @@ Item {
                                         }
                                         rightClickMenu.popup(mouse);
                                     }
-                                    else if ((mouse.button === Qt.LeftButton) && (mouse.modifiers === Qt.ShiftModifier)) {
+                                    else if ((mouse.button === Qt.LeftButton) &&
+                                             (mouse.modifiers === Qt.ShiftModifier)) {
                                         selectItems(index);
                                     } else {
                                         serviceItemList.currentIndex = index;
@@ -546,15 +547,17 @@ Item {
             return;
         }
         case 'song': {
-            const newtext = songProxyModel.getLyricList(itemID);
+            const lyrics = songProxyModel.getLyricList(itemID);
             const song = songProxyModel.getSong(itemID);
+            /* showPassiveNotification(song.title); */
             console.log("adding: " + song.title +
                         " of type " + type +
-                        " with " + newtext.length + " slides");
+                        " with " + lyrics.length + " slides");
             ServiceItemModel.insertItem(index, song.title,
                                         type, song.background,
-                                        song.backgroundType, newtext,
+                                        song.backgroundType, lyrics,
-                                        song.audio, song.font, song.fontSize, newtext.length);
+                                        song.audio, song.font, song.fontSize,
+                                        lyrics.length);
             return;
         }
         case 'presentation': {

src/resources.qrc

@@ -6,6 +6,7 @@
         <file>qml/presenter/ServiceList.qml</file>
         <file>qml/presenter/MainWindow.qml</file>
         <file>qml/presenter/Library.qml</file>
+        <file>qml/presenter/LibraryItem.qml</file>
         <file>qml/presenter/Header.qml</file>
         <file>qml/presenter/Actions.qml</file>
         <file>qml/presenter/PanelItem.qml</file>