<div dir="ltr">Hi Artem,<div><br></div><div>Just tried again on my work PC with same result.</div><div><br></div><div><div>Qt: 5.5.1</div><div>KDE Frameworks: 5.18.0</div></div><div><div>gcc (Ubuntu 5.3.1-13ubuntu1) 5.3.1 20160323</div></div><div><br></div><div>Ubuntu 16.04</div><div><br></div><div>Regards,</div><div>Jasem</div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Thu, Mar 31, 2016 at 5:17 AM, Artem Fedoskin <span dir="ltr"><<a href="mailto:afedoskin3@gmail.com" target="_blank">afedoskin3@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><div><div><div>Dear KStars contributors,<br><br></div>I wasn't able to reproduce this error. Jasem, can you tell me your Qt and compiler versions? Also it will be great if others try to run What's Interesting and post here their experience.<br><br></div>I will add licenses in my next commit, sorry to miss this thing.<br><br></div>Regards, Artem<br></div><div class="gmail_extra"><br><div class="gmail_quote">2016-03-31 2:44 GMT+06:00 Jasem Mutlaq <span dir="ltr"><<a href="mailto:mutlaqja@ikarustech.com" target="_blank">mutlaqja@ikarustech.com</a>></span>:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Git commit a54e9342ae93bec1d14fa619a26e6cd64ad68657 by Jasem Mutlaq.<br>
Committed on 30/03/2016 at 20:42.<br>
Pushed by mutlaqja into branch 'master'.<br>
<br>
Adding What is interesting QML port by Artem Fedoskin. Still crashing so there is a lot of work to be done stability wise.<br>
REVIEW:127116<br>
<a href="mailto:CCMAIL%3Akstars-devel@kde.org" target="_blank">CCMAIL:kstars-devel@kde.org</a><br>
<br>
M  +4    -2    CMakeLists.txt<br>
M  +27   -17   kstars/CMakeLists.txt<br>
M  +4    -4    kstars/kstars.cpp<br>
M  +4    -4    kstars/kstars.h<br>
M  +6    -6    kstars/kstarsactions.cpp<br>
M  +2    -2    kstars/kstarsinit.cpp<br>
M  +3    -1    kstars/tools/whatsinteresting/qml/CMakeLists.txt<br>
A  +59   -0    kstars/tools/whatsinteresting/qml/CategoryTitle.qml     [License: UNKNOWN]  *<br>
A  +14   -0    kstars/tools/whatsinteresting/qml/DetailsItem.qml     [License: UNKNOWN]  *<br>
M  +571  -527  kstars/tools/whatsinteresting/qml/wiview.qml<br>
M  +3    -0    kstars/tools/whatsinteresting/skyobjitem.cpp<br>
M  +0    -6    kstars/tools/whatsinteresting/skyobjitem.h<br>
M  +10   -0    kstars/tools/whatsinteresting/skyobjlistmodel.cpp<br>
M  +6    -0    kstars/tools/whatsinteresting/skyobjlistmodel.h<br>
M  +6    -1    kstars/tools/whatsinteresting/wiview.cpp<br>
<br>
The files marked with a * at the end have a non valid license. Please read: <a href="http://techbase.kde.org/Policies/Licensing_Policy" rel="noreferrer" target="_blank">http://techbase.kde.org/Policies/Licensing_Policy</a> and use the headers which are listed at that page.<br>
<br>
<br>
<a href="http://commits.kde.org/kstars/a54e9342ae93bec1d14fa619a26e6cd64ad68657" rel="noreferrer" target="_blank">http://commits.kde.org/kstars/a54e9342ae93bec1d14fa619a26e6cd64ad68657</a><br>
<br>
diff --git a/CMakeLists.txt b/CMakeLists.txt<br>
index c88980a..e3ad2b4 100644<br>
--- a/CMakeLists.txt<br>
+++ b/CMakeLists.txt<br>
@@ -16,8 +16,8 @@ find_package(ECM 1.7.0 REQUIRED NO_MODULE)<br>
 set(CMAKE_MODULE_PATH ${ECM_MODULE_PATH})<br>
 set(CMAKE_MODULE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/cmake/modules" ${CMAKE_MODULE_PATH})<br>
<br>
-#find_package(Qt5 5.2 REQUIRED COMPONENTS Gui Qml Quick Xml Sql Svg PrintSupport)<br>
-find_package(Qt5 5.2 REQUIRED COMPONENTS Gui Xml Sql Svg PrintSupport)<br>
+find_package(Qt5 5.2 REQUIRED COMPONENTS Gui Qml Quick Xml Sql Svg PrintSupport)<br>
+#find_package(Qt5 5.2 REQUIRED COMPONENTS Gui Xml Sql Svg PrintSupport)<br>
 include(KDEInstallDirs)<br>
 include(KDECompilerSettings)<br>
 include(KDECMakeSettings)<br>
@@ -39,6 +39,8 @@ find_package(KF5 REQUIRED COMPONENTS<br>
   IconThemes<br>
 )<br>
<br>
+#message("KF5 Version is ${KF5_VERSION}")<br>
+<br>
 find_package(Eigen3 REQUIRED)<br>
 add_definitions(${EIGEN_DEFINITIONS})<br>
 include_directories(${EIGEN3_INCLUDE_DIR})<br>
diff --git a/kstars/CMakeLists.txt b/kstars/CMakeLists.txt<br>
index 065cd3c..f91fbd5 100644<br>
--- a/kstars/CMakeLists.txt<br>
+++ b/kstars/CMakeLists.txt<br>
@@ -1,8 +1,10 @@<br>
 add_subdirectory( data )<br>
 add_subdirectory( icons )<br>
 add_subdirectory( htmesh )<br>
-#FIXME Port to QML2<br>
-#add_subdirectory( tools/whatsinteresting/qml)<br>
+<br>
+if (${KF5_VERSION} VERSION_EQUAL 5.18.0 OR ${KF5_VERSION} VERSION_GREATER 5.18.0)<br>
+add_subdirectory( tools/whatsinteresting/qml)<br>
+endif()<br>
<br>
 Find_package(ZLIB REQUIRED)<br>
 Find_package(Threads REQUIRED)<br>
@@ -184,16 +186,6 @@ set(libkstarstools_SRCS<br>
         tools/flagmanager.cpp<br>
         tools/horizonmanager.cpp<br>
<br>
-        #FIXME Port to QML2<br>
-        #tools/whatsinteresting/skyobjlistmodel.cpp<br>
-        #tools/whatsinteresting/wiview.cpp<br>
-        #tools/whatsinteresting/modelmanager.cpp<br>
-        #tools/whatsinteresting/skyobjitem.cpp<br>
-        #tools/whatsinteresting/wilpsettings.cpp<br>
-        #tools/whatsinteresting/wiequipsettings.cpp<br>
-        #tools/whatsinteresting/obsconditions.cpp<br>
-        #tools/whatsinteresting/skyobjdescription.cpp<br>
-<br>
         #FIXME Port to KF5<br>
         #tools/moonphasetool.cpp<br>
<br>
@@ -203,6 +195,20 @@ set(libkstarstools_SRCS<br>
         tools/starhopperdialog.cpp<br>
        )<br>
<br>
+if (${KF5_VERSION} VERSION_EQUAL 5.18.0 OR ${KF5_VERSION} VERSION_GREATER 5.18.0)<br>
+set(libkstarstools_SRCS<br>
+    ${libkstarstools_SRCS}<br>
+    tools/whatsinteresting/skyobjlistmodel.cpp<br>
+    tools/whatsinteresting/wiview.cpp<br>
+    tools/whatsinteresting/modelmanager.cpp<br>
+    tools/whatsinteresting/skyobjitem.cpp<br>
+    tools/whatsinteresting/wilpsettings.cpp<br>
+    tools/whatsinteresting/wiequipsettings.cpp<br>
+    tools/whatsinteresting/obsconditions.cpp<br>
+    tools/whatsinteresting/skyobjdescription.cpp<br>
+    )<br>
+endif()<br>
+<br>
 ki18n_wrap_ui(libkstarstools_SRCS<br>
        tools/altvstime.ui<br>
        tools/argchangeviewoption.ui<br>
@@ -242,13 +248,17 @@ ki18n_wrap_ui(libkstarstools_SRCS<br>
        tools/scriptnamedialog.ui<br>
        tools/skycalendar.ui<br>
        tools/wutdialog.ui<br>
-       tools/flagmanager.ui<br>
-        tools/whatsinteresting/wilpsettings.ui<br>
-        tools/whatsinteresting/wiequipsettings.ui<br>
+       tools/flagmanager.ui<br>
         tools/starhopperdialog.ui<br>
         tools/horizonmanager.ui<br>
         )<br>
<br>
+if (${KF5_VERSION} VERSION_EQUAL 5.18.0 OR ${KF5_VERSION} VERSION_GREATER 5.18.0)<br>
+ki18n_wrap_ui(libkstarstools_SRCS<br>
+        tools/whatsinteresting/wilpsettings.ui<br>
+        tools/whatsinteresting/wiequipsettings.ui<br>
+        )<br>
+endif()<br>
<br>
 set(libkstarscomponents_SRCS<br>
    skycomponents/skylabeler.cpp<br>
@@ -554,8 +564,8 @@ target_link_libraries(KStarsLib<br>
         Qt5::PrintSupport<br>
         Qt5::Sql<br>
         Qt5::Svg<br>
-        #Qt5::Qml<br>
-        #Qt5::Quick<br>
+        Qt5::Qml<br>
+        Qt5::Quick<br>
        ${ZLIB_LIBRARIES}<br>
         )<br>
<br>
diff --git a/kstars/kstars.cpp b/kstars/kstars.cpp<br>
index 73e590f..c4411bb 100644<br>
--- a/kstars/kstars.cpp<br>
+++ b/kstars/kstars.cpp<br>
@@ -63,9 +63,9 @@ KStars::KStars( bool doSplash, bool clockrun, const QString &startdate )<br>
       m_AstroCalc(0), m_AltVsTime(0), m_SkyCalendar(0), m_ScriptBuilder(0),<br>
       m_PlanetViewer(0), m_WUTDialog(0), m_JMoonTool(0), m_MoonPhaseTool(0), m_FlagManager(0), m_HorizonManager(0), m_EyepieceView(0),<br>
       //FIXME Port to QML2<br>
-      #if 0<br>
+      //#if 0<br>
       m_WIView(0), m_ObsConditions(0), m_wiDock(0),<br>
-      #endif<br>
+      //#endif<br>
       DialogIsObsolete(false), StartClockRunning( clockrun ),<br>
       StartDateString( startdate )<br>
 {<br>
@@ -359,12 +359,12 @@ void KStars::selectPreviousFov()<br>
 }<br>
<br>
 //FIXME Port to QML2<br>
-#if 0<br>
+//#if 0<br>
 void KStars::showWISettingsUI()<br>
 {<br>
     slotWISettings();<br>
 }<br>
-#endif<br>
+//#endif<br>
<br>
 void KStars::updateTime( const bool automaticDSTchange ) {<br>
     // Due to frequently use of this function save data and map pointers for speedup.<br>
diff --git a/kstars/kstars.h b/kstars/kstars.h<br>
index 39a7ad0..c24efc4 100644<br>
--- a/kstars/kstars.h<br>
+++ b/kstars/kstars.h<br>
@@ -500,13 +500,13 @@ private slots:<br>
     void slotWUT();<br>
<br>
     //FIXME Port to QML2<br>
-    #if 0<br>
+    //#if 0<br>
     /** action slot: open What's Interesting settings window */<br>
     void slotWISettings();<br>
<br>
     /** action slot: open What's Interesting window */<br>
     void slotShowWIView(int status);<br>
-    #endif<br>
+    //#endif<br>
<br>
     /** action slot: open Sky Calendar tool */<br>
     void slotCalendar();<br>
@@ -682,13 +682,13 @@ private:<br>
     #endif<br>
<br>
     // FIXME Port to QML2<br>
-    #if 0<br>
+    //#if 0<br>
     WIView *m_WIView;<br>
     WILPSettings *m_WISettings;<br>
     WIEquipSettings *m_WIEquipmentSettings;<br>
     ObsConditions *m_ObsConditions;<br>
     QDockWidget *m_wiDock;<br>
-    #endif<br>
+    //#endif<br>
<br>
<br>
     QActionGroup *projectionGroup, *cschemeGroup;<br>
diff --git a/kstars/kstarsactions.cpp b/kstars/kstarsactions.cpp<br>
index aeef2fc..a65bd98 100644<br>
--- a/kstars/kstarsactions.cpp<br>
+++ b/kstars/kstarsactions.cpp<br>
@@ -30,8 +30,8 @@<br>
 #include <QDockWidget><br>
 #include <QPointer><br>
 #include <QInputDialog><br>
-//#include <QQuickWindow><br>
-//#include <QQuickView><br>
+#include <QQuickWindow><br>
+#include <QQuickView><br>
 #include <QDebug><br>
 #include <QAction><br>
 #include <QFileDialog><br>
@@ -82,11 +82,11 @@<br>
 #include "tools/eyepiecefield.h"<br>
<br>
 //FIXME Port to QML2<br>
-#if 0<br>
+//#if 0<br>
 #include "tools/whatsinteresting/wiview.h"<br>
 #include "tools/whatsinteresting/wilpsettings.h"<br>
 #include "tools/whatsinteresting/wiequipsettings.h"<br>
-#endif<br>
+//#endif<br>
<br>
 #include "tools/skycalendar.h"<br>
 #include "tools/scriptbuilder.h"<br>
@@ -412,7 +412,7 @@ void KStars::slotWUT() {<br>
 }<br>
<br>
 //FIXME Port to QML2<br>
-#if 0<br>
+//#if 0<br>
 void KStars::slotWISettings()<br>
 {<br>
     if (m_WIView && !m_wiDock->isVisible())<br>
@@ -487,7 +487,7 @@ void KStars::slotShowWIView(int status)<br>
     }<br>
 }<br>
<br>
-#endif<br>
+//#endif<br>
<br>
 void KStars::slotCalendar() {<br>
     if ( ! m_SkyCalendar ) m_SkyCalendar = new SkyCalendar(this);<br>
diff --git a/kstars/kstarsinit.cpp b/kstars/kstarsinit.cpp<br>
index e6af58a..8acf8ea 100644<br>
--- a/kstars/kstarsinit.cpp<br>
+++ b/kstars/kstarsinit.cpp<br>
@@ -390,11 +390,11 @@ void KStars::initActions() {<br>
         << QKeySequence(Qt::CTRL+Qt::Key_U );<br>
<br>
     //FIXME Port to QML2<br>
-    #if 0<br>
+    //#if 0<br>
     actionCollection()->addAction("whats_interesting", this, SLOT( slotWISettings() ) )<br>
         << i18n("What's Interesting...")<br>
         << QKeySequence(Qt::CTRL+Qt::Key_W );<br>
-    #endif<br>
+    //#endif<br>
<br>
     actionCollection()->addAction("skycalendar", this, SLOT( slotCalendar() ) )<br>
         << i18n("Sky Calendar");<br>
diff --git a/kstars/tools/whatsinteresting/qml/CMakeLists.txt b/kstars/tools/whatsinteresting/qml/CMakeLists.txt<br>
index a5ae3f8..e9b892f 100644<br>
--- a/kstars/tools/whatsinteresting/qml/CMakeLists.txt<br>
+++ b/kstars/tools/whatsinteresting/qml/CMakeLists.txt<br>
@@ -1,6 +1,8 @@<br>
 #install_files<br>
<br>
-install( FILES wiview.qml ScrollBar.qml<br>
+install( FILES wiview.qml<br>
+         CategoryTitle.qml<br>
+         DetailsItem.qml<br>
          leftArrow.png<br>
          settingsIcon.png<br>
          reloadIcon.png<br>
diff --git a/kstars/tools/whatsinteresting/qml/CategoryTitle.qml b/kstars/tools/whatsinteresting/qml/CategoryTitle.qml<br>
new file mode 100644<br>
index 0000000..96396a5<br>
--- /dev/null<br>
+++ b/kstars/tools/whatsinteresting/qml/CategoryTitle.qml<br>
@@ -0,0 +1,59 @@<br>
+import QtQuick 2.5<br>
+<br>
+Text {<br>
+    property string title<br>
+    property color activeColor:"#e4800d"<br>
+    property color disabledColor:"#6b6660"<br>
+<br>
+    id: categoryTitle<br>
+    color: activeColor<br>
+    text: title<br>
+    anchors.centerIn: parent<br>
+    font {<br>
+        family: "Cantarell"<br>
+        pixelSize: 16<br>
+        bold: false<br>
+    }<br>
+    renderType: Text.NativeRendering<br>
+<br>
+    states: [<br>
+        State {<br>
+            name: "selected"<br>
+<br>
+            PropertyChanges {<br>
+                target: categoryTitle<br>
+                font {<br>
+                    pixelSize: 21<br>
+                    bold: true<br>
+                }<br>
+            }<br>
+        },<br>
+        State {<br>
+            name: "selectedNoBold"<br>
+            PropertyChanges {<br>
+                target: categoryTitle<br>
+                font {<br>
+                    pixelSize: 21<br>
+                    bold: false<br>
+                }<br>
+            }<br>
+        },<br>
+        State {<br>
+            name: ""<br>
+<br>
+            PropertyChanges {<br>
+                target: categoryTitle<br>
+                font {<br>
+                    pixelSize: 16<br>
+                    bold: false<br>
+                }<br>
+            }<br>
+        }<br>
+    ]<br>
+<br>
+    Behavior on font.pixelSize {<br>
+        NumberAnimation {<br>
+            duration: 150<br>
+        }<br>
+    }<br>
+}<br>
diff --git a/kstars/tools/whatsinteresting/qml/DetailsItem.qml b/kstars/tools/whatsinteresting/qml/DetailsItem.qml<br>
new file mode 100644<br>
index 0000000..1786f89<br>
--- /dev/null<br>
+++ b/kstars/tools/whatsinteresting/qml/DetailsItem.qml<br>
@@ -0,0 +1,14 @@<br>
+import QtQuick 2.5<br>
+<br>
+Text {<br>
+    width: 164<br>
+    height: 21<br>
+    color: "#ffffff"<br>
+    anchors.left: parent.left<br>
+    anchors.leftMargin: 8<br>
+    font{<br>
+        pixelSize: 13<br>
+        family: "Cantarell"<br>
+    }<br>
+    verticalAlignment: Text.AlignVCenter<br>
+}<br>
diff --git a/kstars/tools/whatsinteresting/qml/wiview.qml b/kstars/tools/whatsinteresting/qml/wiview.qml<br>
index f576ae0..1fbcdbd 100644<br>
--- a/kstars/tools/whatsinteresting/qml/wiview.qml<br>
+++ b/kstars/tools/whatsinteresting/qml/wiview.qml<br>
@@ -1,107 +1,108 @@<br>
+<br>
 // Copyright (C) 2013 Samikshan Bairagya <<a href="mailto:samikshan@gmail.com" target="_blank">samikshan@gmail.com</a>><br>
 /***************************************************************************<br>
  *                                                                         *<br>
- *   This program is free software; you can redistribute it and/or modify  *<br>
- *   it under the terms of the GNU General Public License as published by  *<br>
- *   the Free Software Foundation; either version 2 of the License, or     *<br>
- *   (at your option) any later version.                                   *<br>
- *                                                                         *<br>
- ***************************************************************************/<br>
-<br>
-import QtQuick 1.0<br>
+  *   This program is free software; you can redistribute it and/or modify  *<br>
+   *   it under the terms of the GNU General Public License as published by  *<br>
+    *   the Free Software Foundation; either version 2 of the License, or     *<br>
+     *   (at your option) any later version.                                   *<br>
+      *                                                                         *<br>
+       ***************************************************************************/<br>
+import QtQuick 2.5<br>
+import QtQuick.Layouts 1.1<br>
+import QtQuick.Controls 1.2<br>
<br>
 Rectangle {<br>
     id: container<br>
     objectName: "containerObj"<br>
-    width: 376<br>
-    height: 575<br>
     color: "#020518"<br>
     anchors.fill: parent<br>
<br>
+    property double buttonOpacity: 0.2<br>
+    property double categoryTitleOpacity: 0.350<br>
+<br>
     Text {<br>
         id: title<br>
         x: 9<br>
         y: 34<br>
-        width: 209<br>
-        height: 46<br>
         color: "#59ad0e"<br>
         text: xi18n("What's Interesting...")<br>
         verticalAlignment: Text.AlignVCenter<br>
-        font.family: "Cantarell"<br>
-        font.bold: false<br>
-        font.pixelSize: 22<br>
+        font {<br>
+            family: "Cantarell"<br>
+            bold: false<br>
+            pixelSize:22<br>
+        }<br>
     }<br>
<br>
-    Rectangle {<br>
+    Item {<br>
         id: base<br>
         y: 89<br>
         width: parent.width<br>
         height: 385<br>
-        color: "transparent"<br>
-        radius: 12<br>
-        anchors.left: parent.left<br>
-        anchors.leftMargin: 0<br>
-        anchors.right: parent.right<br>
-        anchors.rightMargin: 0<br>
+        anchors {<br>
+            left: parent.left<br>
+            leftMargin: 0<br>
+            right: parent.right<br>
+            rightMargin: 0<br>
+        }<br>
+<br>
         Item {<br>
             id: viewsRow<br>
             objectName: "viewsRowObj"<br>
             width: parent.width<br>
-            anchors.top: parent.top<br>
-            anchors.bottom: parent.bottom<br>
+            anchors {<br>
+                top: parent.top<br>
+                bottom: parent.bottom<br>
+            }<br>
<br>
             signal categorySelected(int category)<br>
<br>
-            Rectangle {<br>
+            Item {<br>
                 id: categoryView<br>
                 x: 0<br>
                 y: 31<br>
                 width: parent.width<br>
                 height: 351<br>
-                color: "transparent"<br>
<br>
                 Rectangle {<br>
                     id: background<br>
<br>
                     color: "#00060b"<br>
                     radius: 12<br>
-                    anchors.top: parent.top<br>
-                    anchors.topMargin: 15<br>
-                    anchors.bottom: parent.bottom<br>
-                    anchors.bottomMargin: 13<br>
-                    anchors.right: parent.right<br>
-                    anchors.rightMargin: 20<br>
-                    anchors.left: parent.left<br>
-                    anchors.leftMargin: 20<br>
+                    anchors {<br>
+                        top: parent.top<br>
+                        topMargin: 15<br>
+                        bottom: parent.bottom<br>
+                        bottomMargin: 13<br>
+                        right: parent.right<br>
+                        rightMargin: 20<br>
+                        left: parent.left<br>
+                        leftMargin: 20<br>
+                    }<br>
+<br>
                     opacity: 0.500<br>
-                    border.width: 4<br>
-                    border.color: "black"<br>
+                    border {<br>
+                        width: 4<br>
+                        color: "black"<br>
+                    }<br>
                 }<br>
<br>
-                Rectangle {<br>
-                    id: planetRect<br>
-                    x: 128<br>
-                    y: 35<br>
+                Item {<br>
+                    id: planetItem<br>
                     width: planetText.width<br>
                     height: planetText.height<br>
-                    color: "#00000000"<br>
-                    anchors.verticalCenterOffset: -130<br>
-                    anchors.horizontalCenterOffset: -30<br>
-                    anchors.verticalCenter: parent.verticalCenter<br>
-                    anchors.horizontalCenter: parent.horizontalCenter<br>
+                    anchors{<br>
+                        verticalCenterOffset: -130<br>
+                        horizontalCenterOffset: -30<br>
+                        centerIn: parent<br>
+                    }<br>
<br>
-                    Text {<br>
+                    CategoryTitle {<br>
                         id: planetText<br>
-                        x: 0<br>
-                        y: 0<br>
-                        color: "#e4800d"<br>
-                        text: xi18n("Planets")<br>
-                        anchors.horizontalCenter: parent.horizontalCenter<br>
-                        anchors.verticalCenter: parent.verticalCenter<br>
-                        verticalAlignment: Text.AlignVCenter<br>
-                        horizontalAlignment: Text.AlignHCenter<br>
-                        font.family: "Cantarell"<br>
-                        font.pixelSize: 16<br>
+<br>
+                        title: xi18n("Planets")<br>
+                        anchors.centerIn: parent<br>
<br>
                         MouseArea {<br>
                             id: planetMouseArea<br>
@@ -116,30 +117,22 @@ Rectangle {<br>
                     }<br>
                 }<br>
<br>
-                Rectangle {<br>
-                    id: starRect<br>
-                    x: 253<br>
-                    y: 80<br>
+                Item {<br>
+                    id: starItem<br>
+<br>
                     width: starText.width<br>
                     height: starText.height<br>
-                    color: "#00000000"<br>
-                    anchors.verticalCenterOffset: -85<br>
-                    anchors.horizontalCenterOffset: 87<br>
-                    anchors.horizontalCenter: parent.horizontalCenter<br>
-                    anchors.verticalCenter: parent.verticalCenter<br>
+                    anchors{<br>
+                        verticalCenterOffset: -85<br>
+                        horizontalCenterOffset: 87<br>
+                        centerIn: parent<br>
+                    }<br>
<br>
-                    Text {<br>
+                    CategoryTitle {<br>
                         id: starText<br>
-                        x: 0<br>
-                        y: 0<br>
-                        color: "#e4800d"<br>
-                        text: xi18n("Stars")<br>
-                        anchors.horizontalCenter: parent.horizontalCenter<br>
-                        anchors.verticalCenter: parent.verticalCenter<br>
-                        verticalAlignment: Text.AlignVCenter<br>
-                        horizontalAlignment: Text.AlignHCenter<br>
-                        font.family: "Cantarell"<br>
-                        font.pixelSize: 16<br>
+<br>
+                        title: xi18n("Stars")<br>
+                        anchors.centerIn: parent<br>
<br>
                         MouseArea {<br>
                             id: starMouseArea<br>
@@ -154,28 +147,20 @@ Rectangle {<br>
                     }<br>
                 }<br>
<br>
-                Rectangle {<br>
-                    id: conRect<br>
-                    x: 71<br>
-                    y: 113<br>
+                Item {<br>
+                    id: conItem<br>
                     width: conText.width<br>
                     height: conText.height<br>
-                    color: "#00000000"<br>
-                    anchors.verticalCenterOffset: -52<br>
-                    anchors.horizontalCenterOffset: -63<br>
-                    anchors.horizontalCenter: parent.horizontalCenter<br>
-                    anchors.verticalCenter: parent.verticalCenter<br>
+                    anchors {<br>
+                        verticalCenterOffset: -52<br>
+                        horizontalCenterOffset: -63<br>
+                        centerIn: parent<br>
+                    }<br>
<br>
-                    Text {<br>
+                    CategoryTitle {<br>
                         id: conText<br>
-                        color: "#e4800d"<br>
-                        text: xi18n("Constellations")<br>
-                        anchors.verticalCenter: parent.verticalCenter<br>
-                        anchors.horizontalCenter: parent.horizontalCenter<br>
-                        font.family: "Cantarell"<br>
-                        verticalAlignment: Text.AlignVCenter<br>
-                        horizontalAlignment: Text.AlignHCenter<br>
-                        font.pixelSize: 16<br>
+                        title: xi18n("Constellations")<br>
+                        anchors.centerIn: parent<br>
<br>
                         MouseArea {<br>
                             id: conMouseArea<br>
@@ -190,38 +175,34 @@ Rectangle {<br>
                     }<br>
                 }<br>
<br>
-                Rectangle {<br>
+                Item {<br>
                     id: dsoContainer<br>
                     y: 172<br>
                     height: 166<br>
-                    color: "#00000000"<br>
-                    anchors.right: parent.right<br>
-                    anchors.rightMargin: 35<br>
-                    anchors.left: parent.left<br>
-                    anchors.leftMargin: 35<br>
+                    anchors {<br>
+                        right: parent.right<br>
+                        rightMargin: 35<br>
+                        left: parent.left<br>
+                        leftMargin: 35<br>
+                    }<br>
<br>
-                    Rectangle {<br>
-                        id: dsoRect<br>
-                        x: 79<br>
-                        y: 18<br>
+                    Item {<br>
+                        id: dsoItem<br>
                         width: dsoText.width<br>
                         height: dsoText.height<br>
-                        color: "#00000000"<br>
-                        anchors.verticalCenterOffset: -54<br>
-                        anchors.horizontalCenterOffset: 0<br>
-                        anchors.horizontalCenter: parent.horizontalCenter<br>
-                        anchors.verticalCenter: parent.verticalCenter<br>
-                        Text {<br>
+<br>
+                        anchors {<br>
+                            verticalCenterOffset: -54<br>
+                            horizontalCenterOffset: 0<br>
+                            centerIn: parent<br>
+                        }<br>
+<br>
+                        CategoryTitle {<br>
                             id: dsoText<br>
-                            x: 0<br>
-                            y: 0<br>
-                            color: "#e4800d"<br>
-                            text: xi18n("Deep-sky Objects")<br>
-                            anchors.horizontalCenter: parent.horizontalCenter<br>
-                            anchors.verticalCenter: parent.verticalCenter<br>
-                            verticalAlignment: Text.AlignVCenter<br>
-                            horizontalAlignment: Text.AlignHCenter<br>
-                            font.pixelSize: 16<br>
+<br>
+                            title: xi18n("Deep-sky Objects")<br>
+                            anchors.centerIn: parent<br>
+<br>
                             MouseArea {<br>
                                 id: dsoMouseArea<br>
                                 hoverEnabled: true<br>
@@ -229,34 +210,31 @@ Rectangle {<br>
                                 onEntered: container.state = "dsoAreaEntered"<br>
                                 onClicked: container.state = "dsoAreaClicked"<br>
                             }<br>
-                            font.family: "Cantarell"<br>
                         }<br>
                     }<br>
<br>
-                    Rectangle {<br>
-                        id: galRect<br>
-                        x: 35<br>
-                        y: 68<br>
+                    Item {<br>
+                        id: galItem<br>
+<br>
                         width: galText.width<br>
                         height: galText.height<br>
-                        color: "#00000000"<br>
-                        anchors.verticalCenterOffset: -4<br>
-                        anchors.horizontalCenterOffset: -77<br>
-                        anchors.horizontalCenter: parent.horizontalCenter<br>
-                        anchors.verticalCenter: parent.verticalCenter<br>
-                        opacity: 0.350<br>
-                        Text {<br>
+<br>
+                        anchors {<br>
+                            verticalCenterOffset: -4<br>
+                            horizontalCenterOffset: -77<br>
+                            centerIn: parent<br>
+                        }<br>
+                        opacity: categoryTitleOpacity<br>
+<br>
+                        CategoryTitle {<br>
                             id: galText<br>
-                            x: 0<br>
-                            y: 0<br>
-                            color: "#6b6660"<br>
-                            text: xi18n("Galaxies")<br>
-                            anchors.horizontalCenter: parent.horizontalCenter<br>
-                            anchors.verticalCenter: parent.verticalCenter<br>
-                            verticalAlignment: Text.AlignVCenter<br>
-                            horizontalAlignment: Text.AlignHCenter<br>
-                            font.pixelSize: 16<br>
-                            anchors.topMargin: 0<br>
+                            color: disabledColor<br>
+                            title: xi18n("Galaxies")<br>
+                            anchors {<br>
+                                centerIn: parent<br>
+                                margins: 0<br>
+                            }<br>
+<br>
                             MouseArea {<br>
                                 id: galMouseArea<br>
                                 enabled: false<br>
@@ -268,36 +246,28 @@ Rectangle {<br>
                                     container.state = "dsoTypeSelected"<br>
                                 }<br>
                             }<br>
-                            anchors.rightMargin: 0<br>
-                            anchors.bottomMargin: 0<br>
-                            font.family: "Cantarell"<br>
-                            anchors.leftMargin: 0<br>
                         }<br>
                     }<br>
<br>
-                    Rectangle {<br>
-                        id: nebRect<br>
-                        x: 96<br>
-                        y: 124<br>
+                    Item {<br>
+                        id: nebItem<br>
+<br>
                         width: nebText.width<br>
                         height: nebText.height<br>
-                        color: "#00000000"<br>
-                        anchors.verticalCenterOffset: 52<br>
-                        anchors.horizontalCenterOffset: -17<br>
-                        anchors.horizontalCenter: parent.horizontalCenter<br>
-                        anchors.verticalCenter: parent.verticalCenter<br>
+<br>
+                        anchors {<br>
+                            verticalCenterOffset: 52<br>
+                            horizontalCenterOffset: -17<br>
+                            centerIn: parent<br>
+                        }<br>
                         opacity: 0.340<br>
-                        Text {<br>
+<br>
+                        CategoryTitle {<br>
                             id: nebText<br>
-                            x: 0<br>
-                            y: 0<br>
-                            color: "#6b6660"<br>
-                            text: xi18n("Nebulae")<br>
-                            anchors.horizontalCenter: parent.horizontalCenter<br>
-                            anchors.verticalCenter: parent.verticalCenter<br>
-                            verticalAlignment: Text.AlignVCenter<br>
-                            horizontalAlignment: Text.AlignHCenter<br>
-                            font.pixelSize: 16<br>
+                            color: disabledColor<br>
+                            title: xi18n("Nebulae")<br>
+                            anchors.centerIn: parent<br>
+<br>
                             MouseArea {<br>
                                 id: nebMouseArea<br>
                                 enabled: false<br>
@@ -309,33 +279,28 @@ Rectangle {<br>
                                     container.state = "dsoTypeSelected"<br>
                                 }<br>
                             }<br>
-                            font.family: "Cantarell"<br>
                         }<br>
                     }<br>
<br>
-                    Rectangle {<br>
-                        id: clustRect<br>
-                        x: 181<br>
-                        y: 80<br>
+                    Item {<br>
+                        id: clustItem<br>
+<br>
                         width: clustText.width<br>
                         height: clustText.height<br>
-                        color: "#00000000"<br>
-                        anchors.verticalCenterOffset: 8<br>
-                        anchors.horizontalCenterOffset: 69<br>
-                        anchors.horizontalCenter: parent.horizontalCenter<br>
-                        anchors.verticalCenter: parent.verticalCenter<br>
-                        opacity: 0.350<br>
-                        Text {<br>
+<br>
+                        anchors {<br>
+                            verticalCenterOffset: 8<br>
+                            horizontalCenterOffset: 69<br>
+                            centerIn: parent<br>
+                        }<br>
+                        opacity: categoryTitleOpacity<br>
+<br>
+                        CategoryTitle {<br>
                             id: clustText<br>
-                            x: 0<br>
-                            y: 0<br>
-                            color: "#6b6660"<br>
-                            text: xi18n("Clusters")<br>
-                            anchors.verticalCenter: parent.verticalCenter<br>
-                            anchors.horizontalCenter: parent.horizontalCenter<br>
-                            verticalAlignment: Text.AlignVCenter<br>
-                            horizontalAlignment: Text.AlignHCenter<br>
-                            font.pixelSize: 16<br>
+                            color: disabledColor<br>
+                            title: xi18n("Clusters")<br>
+                            anchors.centerIn: parent<br>
+<br>
                             MouseArea {<br>
                                 id: clustMouseArea<br>
                                 enabled: false<br>
@@ -347,27 +312,26 @@ Rectangle {<br>
                                     container.state = "dsoTypeSelected"<br>
                                 }<br>
                             }<br>
-                            font.family: "Cantarell"<br>
                         }<br>
                     }<br>
                 }<br>
-            }//end of categoryView<br>
+            } //end of categoryView<br>
<br>
             Flipable {<br>
                 id: skyObjView<br>
                 width: parent.width<br>
                 height: parent.height<br>
                 anchors.leftMargin: categoryView.width<br>
-//                anchors.leftMargin: 370<br>
<br>
+                //anchors.leftMargin: 370<br>
                 anchors.left: categoryView.right<br>
<br>
                 property bool flipped: false<br>
<br>
-                front: Rectangle {<br>
+                front: Item {<br>
                     id: soListContainer<br>
-                    color: "transparent"<br>
                     anchors.fill: parent<br>
+                    enabled: !parent.flipped // To hide content of front side on back side<br>
<br>
                     Rectangle {<br>
                         id: soListViewBackground<br>
@@ -378,7 +342,6 @@ Rectangle {<br>
                     }<br>
<br>
                     Rectangle {<br>
-<br>
                         id: soListViewContainer<br>
                         x: parent.x + 15<br>
                         y: 31<br>
@@ -386,24 +349,28 @@ Rectangle {<br>
                         height: 351<br>
                         color: "transparent"<br>
                         radius: 12<br>
-                        border.width: 4<br>
-                        border.color: "#000000"<br>
+                        border {<br>
+                            width: 4<br>
+                            color: "#000000"<br>
+                        }<br>
<br>
                         ListView {<br>
                             id: soListView<br>
+                            z: 0<br>
                             objectName: "soListObj"<br>
                             anchors.fill: parent<br>
<br>
                             signal soListItemClicked(int type, string typeName, int curIndex)<br>
                             clip: true<br>
<br>
-                            ScrollBar {<br>
-                                flickable: soListView<br>
+                            ScrollView {<br>
+                                anchors.fill: parent<br>
+                                contentItem: soListView<br>
                             }<br>
<br>
                             delegate: Item {<br>
                                 id: soListItem<br>
-                                x: 5<br>
+                                x: 8<br>
                                 height: 40<br>
<br>
                                 Text {<br>
@@ -420,7 +387,9 @@ Rectangle {<br>
                                         onExited: dispText.color = "white"<br>
                                         onClicked: {<br>
                                             soListView.currentIndex = index<br>
-                                            soListView.soListItemClicked(type, typeName, soListView.currentIndex)<br>
+                                            soListView.soListItemClicked(<br>
+                                                        type, typeName,<br>
+                                                        soListView.currentIndex)<br>
                                             skyObjView.flipped = true<br>
                                         }<br>
                                     }<br>
@@ -432,11 +401,11 @@ Rectangle {<br>
                     }<br>
                 }<br>
<br>
-                back: Rectangle {<br>
+                back: Item {<br>
                     id: detailsViewContainer<br>
                     width: parent.width<br>
                     height: parent.height<br>
-                    color: "transparent"<br>
+                    enabled: parent.flipped<br>
<br>
                     Rectangle {<br>
                         id: detailsViewBackground<br>
@@ -454,8 +423,10 @@ Rectangle {<br>
                         width: parent.width - 30<br>
                         color: "transparent"<br>
                         radius: 12<br>
-                        border.width: 4<br>
-                        border.color: "#000000"<br>
+                        border {<br>
+                            width: 4<br>
+                            color: "#000000"<br>
+                        }<br>
<br>
                         Text {<br>
                             id: soname<br>
@@ -465,31 +436,36 @@ Rectangle {<br>
                             height: 22<br>
                             color: "#ffffff"<br>
                             text: xi18n("text")<br>
-                            anchors.left: parent.left<br>
-                            anchors.leftMargin: 8<br>
-                            font.bold: true<br>
-                            horizontalAlignment: Text.AlignLeft<br>
+                            anchors{<br>
+                                left: parent.left<br>
+                                leftMargin: 8<br>
+                            }<br>
+                            font{<br>
+                                bold: true<br>
+                                pixelSize: 16<br>
+                            }<br>
                             verticalAlignment: Text.AlignVCenter<br>
-                            font.pixelSize: 16<br>
                         }<br>
<br>
                         Text {<br>
                             id: posText<br>
-                            x: 10<br>
                             objectName: "posTextObj"<br>
                             y: 45<br>
-                            anchors.right: parent.right<br>
-                            anchors.rightMargin: 10<br>
+                            anchors{<br>
+                                right: parent.right<br>
+                                rightMargin: 10<br>
+                            }<br>
                             width: 320<br>
                             height: 16<br>
                             color: "#f7f7ac"<br>
                             text: xi18n("text")<br>
-                            font.family: "Cantarell"<br>
                             horizontalAlignment: Text.AlignRight<br>
-                            font.underline: false<br>
-                            font.italic: false<br>
-                            font.bold: true<br>
-                            font.pixelSize: 11<br>
+                            font{<br>
+                                family: "Cantarell"<br>
+                                bold: true<br>
+                                pixelSize:11<br>
+                            }<br>
+<br>
                         }<br>
<br>
                         Rectangle {<br>
@@ -499,32 +475,39 @@ Rectangle {<br>
                             color: "#010a14"<br>
                             radius: 10<br>
                             border.width: 0<br>
-                            anchors.right: parent.right<br>
-                            anchors.rightMargin: 4<br>
-                            anchors.left: parent.left<br>
-                            anchors.leftMargin: 4<br>
+                            anchors{<br>
+                                right: parent.right<br>
+                                rightMargin: 4<br>
+                                left: parent.left<br>
+                                leftMargin: 4<br>
+                            }<br>
                             border.color: "#585454"<br>
+<br>
                             Flickable {<br>
                                 id: flickableDescText<br>
                                 clip: true<br>
                                 flickableDirection: Flickable.VerticalFlick<br>
                                 width: parent.width<br>
                                 height: parent.height<br>
-                                anchors.top: parent.top<br>
-                                anchors.topMargin: 3<br>
-                                anchors.bottom: parent.bottom<br>
-                                anchors.bottomMargin: 4<br>
+                                anchors{<br>
+                                    top: parent.top<br>
+                                    topMargin: 3<br>
+                                    bottom: parent.bottom<br>
+                                    bottomMargin: 4<br>
+                                }<br>
<br>
                                 contentWidth: parent.width<br>
                                 contentHeight: col.height + 4<br>
<br>
                                 Item {<br>
                                     id: descTextItem<br>
-                                    anchors.top :parent.top<br>
-                                    anchors.topMargin: 3<br>
-                                    anchors.left: parent.left<br>
-                                    anchors.leftMargin: 6<br>
-                                    anchors.right: parent.right<br>
+                                    anchors{<br>
+                                        top: parent.top<br>
+                                        topMargin: 3<br>
+                                        left: parent.left<br>
+                                        leftMargin: 6<br>
+                                        right: parent.right<br>
+                                    }<br>
                                     Column {<br>
                                         id: col<br>
                                         width: parent.width<br>
@@ -533,56 +516,59 @@ Rectangle {<br>
                                             objectName: "descTextObj"<br>
                                             color: "#187988"<br>
                                             text: xi18n("text")<br>
-                                            font.family: "Cantarell"<br>
                                             clip: true<br>
                                             wrapMode: Text.WrapAtWordBoundaryOrAnywhere<br>
                                             width: parent.width<br>
-                                            font.pixelSize: 13<br>
+                                            font{<br>
+                                                family: "Cantarell"<br>
+                                                pixelSize: 13<br>
+                                            }<br>
                                         }<br>
                                         Text {<br>
                                             id: descSrcText<br>
                                             objectName: "descSrcTextObj"<br>
                                             color: "#18885f"<br>
                                             text: xi18n("Source: ")<br>
-                                            font.family: "Cantarell"<br>
-                                            font.italic: true<br>
-                                            horizontalAlignment: Text.AlignRight<br>
                                             clip: true<br>
+                                            horizontalAlignment: Text.AlignRight<br>
                                             wrapMode: Text.WrapAtWordBoundaryOrAnywhere<br>
                                             width: parent.width<br>
-                                            font.pixelSize: 13<br>
                                             onLinkActivated: Qt.openUrlExternally(link)<br>
+                                            font{<br>
+                                                family: "Cantarell"<br>
+                                                pixelSize: 13<br>
+                                                italic: true<br>
+                                            }<br>
                                         }<br>
                                     }<br>
                                 }<br>
                             }<br>
                         }<br>
<br>
-                        Rectangle {<br>
+                        Item {<br>
                             id: nextObjRect<br>
                             objectName: "nextObj"<br>
-                            x: 271<br>
-                            y: 377<br>
-                            width: nextObjText.width + nextObjIcon.width + 5<br>
+                            width: nextObjText.width + nextObjIcon.width + 10<br>
                             height: 28<br>
-                            color: "#00000000"<br>
-                            radius: 5<br>
-                            anchors.right: parent.right<br>
-                            anchors.rightMargin: 10<br>
+                            anchors {<br>
+                                right: parent.right<br>
+                                rightMargin: 10<br>
+                                bottom: parent.bottom<br>
+                                bottomMargin: 10<br>
+                            }<br>
<br>
-                            signal nextObjClicked()<br>
+                            signal nextObjClicked<br>
<br>
                             Rectangle {<br>
                                 id: nextObjForeground<br>
                                 radius: 5<br>
-                                anchors.fill: nextObjRect<br>
+                                anchors.fill: parent<br>
                                 opacity: 0<br>
                             }<br>
<br>
                             MouseArea {<br>
                                 id: nextObjMouseArea<br>
-                                x: 13<br>
-                                y: 62<br>
+<br>
                                 anchors.fill: nextObjRect<br>
                                 hoverEnabled: true<br>
                                 onEntered: {<br>
@@ -599,58 +585,58 @@ Rectangle {<br>
                             Text {<br>
                                 id: nextObjText<br>
                                 objectName: "nextTextObj"<br>
-                                y: 17<br>
+<br>
                                 height: 22<br>
                                 color: "white"<br>
                                 text: xi18n("Next")<br>
-                                anchors.right: nextObjIcon.left<br>
-                                anchors.rightMargin: 5<br>
-                                anchors.verticalCenter: parent.verticalCenter<br>
+                                anchors{<br>
+                                    right: nextObjIcon.left<br>
+                                    rightMargin: 5<br>
+                                    verticalCenter: parent.verticalCenter<br>
+                                }<br>
                                 visible: true<br>
                                 verticalAlignment: Text.AlignVCenter<br>
                                 horizontalAlignment: Text.AlignRight<br>
-                                font.bold: true<br>
-                                font.pixelSize: 11<br>
-<br>
-                                x: 7<br>
+                                font{<br>
+                                    bold: true<br>
+                                    pixelSize:11<br>
+                                }<br>
                             }<br>
<br>
                             Image {<br>
                                 id: nextObjIcon<br>
-                                x: 46<br>
-                                y: 2<br>
-                                anchors.right: parent.right<br>
-                                anchors.rightMargin: 0<br>
-                                anchors.verticalCenterOffset: 0<br>
-                                anchors.verticalCenter: parent.verticalCenter<br>
-                                sourceSize.height: 24<br>
-                                sourceSize.width: 24<br>
+<br>
+                                anchors{<br>
+                                    right: parent.right<br>
+                                    verticalCenter: parent.verticalCenter<br>
+                                }<br>
+                                sourceSize {<br>
+                                    height: 24<br>
+                                    width: 24<br>
+                                }<br>
                                 source: "next.png"<br>
                             }<br>
                         }<br>
<br>
-                        Rectangle {<br>
+                        Item {<br>
                             id: prevObjRect<br>
                             objectName: "prevObj"<br>
-                            y: 377<br>
-                            width: prevObjText.width + prevObjIcon.width + 5<br>
+<br>
+                            width: prevObjText.width + prevObjIcon.width + 10<br>
                             height: 28<br>
-                            color: "#00000000"<br>
-                            radius: 5<br>
-                            anchors.left: parent.left<br>
-                            anchors.leftMargin: 8<br>
+                            anchors {<br>
+                                left: parent.left<br>
+                                leftMargin: 10<br>
+                                bottom: parent.bottom<br>
+                                bottomMargin: 10<br>
+                            }<br>
<br>
-                            signal prevObjClicked()<br>
-                            x: 8<br>
+                            signal prevObjClicked<br>
<br>
                             Rectangle {<br>
                                 id: prevObjForeground<br>
                                 radius: 5<br>
-                                anchors.top: parent.top<br>
-                                anchors.right: parent.right<br>
-                                anchors.bottom: parent.bottom<br>
-                                anchors.left: parent.left<br>
-                                anchors.topMargin: 0<br>
+                                anchors.fill: parent<br>
                                 opacity: 0<br>
                             }<br>
<br>
@@ -672,28 +658,31 @@ Rectangle {<br>
                             Text {<br>
                                 id: prevObjText<br>
                                 objectName: "prevTextObj"<br>
-                                y: 7<br>
+<br>
                                 height: 22<br>
                                 color: "#ffffff"<br>
                                 text: xi18n("Previous")<br>
-                                anchors.left: prevObjIcon.right<br>
-                                anchors.leftMargin: 5<br>
-                                anchors.verticalCenterOffset: 0<br>
-                                font.pixelSize: 11<br>
+                                anchors{<br>
+                                    left: prevObjIcon.right<br>
+                                    leftMargin: 5<br>
+                                    verticalCenter: parent.verticalCenter<br>
+                                }<br>
                                 visible: true<br>
-                                anchors.verticalCenter: parent.verticalCenter<br>
-                                font.bold: true<br>
                                 horizontalAlignment: Text.AlignLeft<br>
                                 verticalAlignment: Text.AlignVCenter<br>
+                                font{<br>
+                                    pixelSize: 11<br>
+                                    bold: true<br>
+                                }<br>
                             }<br>
<br>
                             Image {<br>
                                 id: prevObjIcon<br>
-                                x: 0<br>
-                                y: 2<br>
                                 anchors.verticalCenter: parent.verticalCenter<br>
-                                sourceSize.height: 24<br>
-                                sourceSize.width: 24<br>
+                                sourceSize{<br>
+                                    height: 24<br>
+                                    width: 24<br>
+                                }<br>
                                 source: "previous.png"<br>
                             }<br>
                         }<br>
@@ -706,82 +695,55 @@ Rectangle {<br>
                             height: 93<br>
                             spacing: 14<br>
<br>
-                            Text {<br>
+                            DetailsItem {<br>
                                 id: sbText<br>
                                 objectName: "sbTextObj"<br>
-                                width: 164<br>
-                                height: 21<br>
-                                color: "#ffffff"<br>
                                 text: xi18n("Surface Brightness:")<br>
-                                anchors.left: parent.left<br>
-                                anchors.leftMargin: 8<br>
-                                font.pixelSize: 13<br>
-                                font.family: "Cantarell"<br>
-                                horizontalAlignment: Text.AlignLeft<br>
-                                verticalAlignment: Text.AlignVCenter<br>
                             }<br>
<br>
-                            Text {<br>
+                            DetailsItem {<br>
                                 id: magText<br>
                                 objectName: "magTextObj"<br>
-                                width: 164<br>
-                                height: 21<br>
-                                color: "#ffffff"<br>
                                 text: xi18n("Magnitude: ")<br>
-                                anchors.left: parent.left<br>
-                                anchors.leftMargin: 8<br>
-                                font.family: "Cantarell"<br>
-                                verticalAlignment: Text.AlignVCenter<br>
-                                horizontalAlignment: Text.AlignLeft<br>
-                                font.pixelSize: 13<br>
                             }<br>
<br>
-                            Text {<br>
+                            DetailsItem {<br>
                                 id: sizeText<br>
                                 objectName: "sizeTextObj"<br>
-                                width: 164<br>
-                                height: 21<br>
-                                color: "#ffffff"<br>
                                 text: xi18n("Size: ")<br>
-                                anchors.left: parent.left<br>
-                                anchors.leftMargin: 8<br>
-                                font.pixelSize: 13<br>
-                                font.family: "Cantarell"<br>
-                                horizontalAlignment: Text.AlignLeft<br>
-                                verticalAlignment: Text.AlignVCenter<br>
                             }<br>
                         }<br>
<br>
                         Column {<br>
                             id: detailsViewButtonsCol<br>
-                            x: 208<br>
                             y: 134<br>
-                            width: 132<br>
-                            height: 52<br>
-                            anchors.right: parent.right<br>
-                            anchors.rightMargin: 0<br>
+                            //width: 132<br>
+                            //height: 52<br>
+                            anchors{<br>
+                                right: parent.right<br>
+                                rightMargin: 10<br>
+                            }<br>
                             spacing: 14<br>
<br>
                             Text {<br>
                                 id: detailsButton<br>
                                 objectName: "detailsButtonObj"<br>
-                                width: 119<br>
-                                height: 16<br>
-                                font.underline: true<br>
-                                anchors.rightMargin: 10<br>
-                                anchors.right: parent.right<br>
+<br>
                                 verticalAlignment: Text.AlignVCenter<br>
                                 color: "white"<br>
                                 text: xi18n("More object details")<br>
-                                font.family: "Cantarell"<br>
-                                font.pixelSize: 14<br>
+                                font {<br>
+                                    underline: true<br>
+                                    family: "Cantarell"<br>
+                                    pixelSize: 14<br>
+                                }<br>
<br>
-                                signal detailsButtonClicked()<br>
-                                x: 0<br>
+                                signal detailsButtonClicked<br>
<br>
                                 MouseArea {<br>
                                     id: detailsMouseArea<br>
                                     hoverEnabled: true<br>
+                                    cursorShape: Qt.PointingHandCursor<br>
                                     anchors.fill: parent<br>
                                     onEntered: detailsButton.color = "yellow"<br>
                                     onExited: detailsButton.color = "white"<br>
@@ -792,22 +754,22 @@ Rectangle {<br>
                             Text {<br>
                                 id: slewButton<br>
                                 objectName: "slewButtonObj"<br>
-                                width: 119<br>
-                                height: 16<br>
+<br>
+                                verticalAlignment: Text.AlignVCenter<br>
                                 color: "white"<br>
                                 text: xi18n("Slew map to object")<br>
-                                font.family: "Cantarell"<br>
-                                anchors.right: parent.right<br>
-                                anchors.rightMargin: 10<br>
-                                font.underline: true<br>
-                                verticalAlignment: Text.AlignVCenter<br>
-                                font.pixelSize: 14<br>
+                                font {<br>
+                                    underline: true<br>
+                                    family: "Cantarell"<br>
+                                    pixelSize: 14<br>
+                                }<br>
<br>
-                                signal slewButtonClicked()<br>
+                                signal slewButtonClicked<br>
<br>
                                 MouseArea {<br>
                                     id: slewObjMouseArea<br>
                                     hoverEnabled: true<br>
+                                    cursorShape: Qt.PointingHandCursor<br>
                                     anchors.fill: parent<br>
                                     onEntered: slewButton.color = "yellow"<br>
                                     onExited: slewButton.color = "white"<br>
@@ -852,18 +814,23 @@ Rectangle {<br>
<br>
                 transitions: [<br>
                     Transition {<br>
-                        NumberAnimation { target: listToDetailsRotation; property: "angle"; duration: 400 }<br>
+                        NumberAnimation {<br>
+                            target: listToDetailsRotation<br>
+                            property: "angle"<br>
+                            duration: 400<br>
+                        }<br>
                     }<br>
                 ]<br>
<br>
                 transform: Rotation {<br>
                     id: listToDetailsRotation<br>
-                    origin.x: container.width / 2;<br>
-                    axis.y: 1; axis.z: 0<br>
+                    origin.x: container.width / 2<br>
+                    axis.y: 1<br>
+                    axis.z: 0<br>
                 }<br>
             } //end of skyObjView<br>
-        }//end of viewsContainer<br>
-    }//end of base<br>
+        } //end of viewsContainer<br>
+    } //end of base<br>
<br>
     Rectangle {<br>
         id: backButton<br>
@@ -886,12 +853,16 @@ Rectangle {<br>
             y: 12<br>
             color: "#f7e808"<br>
             text: xi18n("Back")<br>
-            anchors.left: leftArrow.right<br>
-            anchors.leftMargin: 7<br>
-            anchors.verticalCenterOffset: 0<br>
-            anchors.verticalCenter: leftArrow.verticalCenter<br>
-            font.family: "Cantarell"<br>
-            font.pointSize: 13<br>
+            anchors {<br>
+                left: leftArrow.right<br>
+                leftMargin: 7<br>
+                verticalCenterOffset: 0<br>
+                verticalCenter: leftArrow.verticalCenter<br>
+            }<br>
+            font{<br>
+                family: "Cantarell"<br>
+                pointSize: 13<br>
+            }<br>
             verticalAlignment: Text.AlignVCenter<br>
             horizontalAlignment: Text.AlignHCenter<br>
         }<br>
@@ -899,32 +870,32 @@ Rectangle {<br>
         Image {<br>
             id: leftArrow<br>
             y: 9<br>
-            anchors.left: parent.left<br>
-            anchors.leftMargin: 4<br>
-            anchors.verticalCenterOffset: 0<br>
-            anchors.verticalCenter: parent.verticalCenter<br>
+            anchors{<br>
+                left: parent.left<br>
+                leftMargin: 4<br>
+                verticalCenterOffset: 0<br>
+                verticalCenter: parent.verticalCenter<br>
+            }<br>
             source: "leftArrow.png"<br>
         }<br>
<br>
         MouseArea {<br>
             id: backButtonMouseArea<br>
-            x: 45<br>
-            y: 0<br>
             anchors.fill: backButton<br>
             hoverEnabled: true<br>
-            onEntered: goBackForeground.opacity = 0.2<br>
+            onEntered: goBackForeground.opacity = buttonOpacity<br>
             onExited: goBackForeground.opacity = 0.0<br>
             onClicked: {<br>
-                if ( container.state == "soTypeSelected" ) {<br>
-                    if ( !skyObjView.flipped ) {<br>
+                if (container.state == "soTypeSelected") {<br>
+                    if (!skyObjView.flipped) {<br>
                         container.state = "base"<br>
-                    } else if ( skyObjView.flipped ) {<br>
+                    } else if (skyObjView.flipped) {<br>
                         skyObjView.flipped = false<br>
                     }<br>
-                } else if ( container.state == "dsoTypeSelected" ) {<br>
-                    if ( !skyObjView.flipped ) {<br>
+                } else if (container.state == "dsoTypeSelected") {<br>
+                    if (!skyObjView.flipped) {<br>
                         container.state = "dsoAreaClicked"<br>
-                    } else if ( skyObjView.flipped ) {<br>
+                    } else if (skyObjView.flipped) {<br>
                         skyObjView.flipped = false<br>
                     }<br>
                 }<br>
@@ -939,21 +910,25 @@ Rectangle {<br>
         y: 529<br>
         width: 28<br>
         height: 28<br>
-        anchors.verticalCenterOffset: 0<br>
-        anchors.verticalCenter: backButton.verticalCenter<br>
-        sourceSize.height: 40<br>
-        sourceSize.width: 40<br>
+        anchors{<br>
+            verticalCenterOffset: 0<br>
+            verticalCenter: backButton.verticalCenter<br>
+        }<br>
+        sourceSize{<br>
+            height: 40<br>
+            width: 40<br>
+        }<br>
         smooth: true<br>
         fillMode: Image.Stretch<br>
         source: "settingsIcon.png"<br>
<br>
-        signal settingsIconClicked()<br>
+        signal settingsIconClicked<br>
<br>
         MouseArea {<br>
             id: settingsMouseArea<br>
             anchors.fill: parent<br>
             hoverEnabled: true<br>
-            onEntered: settingsForeground.opacity = 0.2<br>
+            onEntered: settingsForeground.opacity = buttonOpacity<br>
             onExited: settingsForeground.opacity = 0.0<br>
             onClicked: settingsIcon.settingsIconClicked()<br>
         }<br>
@@ -973,21 +948,25 @@ Rectangle {<br>
         y: 529<br>
         width: 28<br>
         height: 28<br>
-        anchors.verticalCenterOffset: 0<br>
-        anchors.verticalCenter: backButton.verticalCenter<br>
-        sourceSize.height: 40<br>
-        sourceSize.width: 40<br>
+        anchors{<br>
+            verticalCenterOffset: 0<br>
+            verticalCenter: backButton.verticalCenter<br>
+        }<br>
+        sourceSize{<br>
+            height: 40<br>
+            width: 40<br>
+        }<br>
         smooth: true<br>
         fillMode: Image.Stretch<br>
         source: "reloadIcon.png"<br>
<br>
-        signal reloadIconClicked()<br>
+        signal reloadIconClicked<br>
<br>
         MouseArea {<br>
             id: reloadMouseArea<br>
             anchors.fill: parent<br>
             hoverEnabled: true<br>
-            onEntered: reloadForeground.opacity = 0.2<br>
+            onEntered: reloadForeground.opacity = buttonOpacity<br>
             onExited: reloadForeground.opacity = 0.0<br>
             onClicked: reloadIcon.reloadIconClicked()<br>
         }<br>
@@ -1006,17 +985,17 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: galText<br>
-                color: "#6b6660"<br>
+                color: disabledColor<br>
             }<br>
<br>
             PropertyChanges {<br>
                 target: nebText<br>
-                color: "#6b6660"<br>
+                color: disabledColor<br>
             }<br>
<br>
             PropertyChanges {<br>
                 target: clustText<br>
-                color: "#6b6660"<br>
+                color: disabledColor<br>
             }<br>
         },<br>
         State {<br>
@@ -1024,8 +1003,7 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: planetText<br>
-                font.pixelSize: 21<br>
-                font.bold: true<br>
+                state: "selected"<br>
             }<br>
         },<br>
         State {<br>
@@ -1033,8 +1011,7 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: starText<br>
-                font.bold: true<br>
-                font.pixelSize: 21<br>
+                state: "selected"<br>
             }<br>
         },<br>
         State {<br>
@@ -1042,8 +1019,7 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: conText<br>
-                font.bold: true<br>
-                font.pixelSize: 21<br>
+                state: "selected"<br>
             }<br>
         },<br>
         State {<br>
@@ -1051,46 +1027,45 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: dsoText<br>
-                font.bold: true<br>
-                font.pixelSize: 21<br>
+                state:"selected"<br>
             }<br>
         },<br>
         State {<br>
             name: "dsoAreaClicked"<br>
+<br>
             PropertyChanges {<br>
                 target: dsoText<br>
-                font.pixelSize: "21"<br>
-                font.bold: true<br>
+                state:"selected"<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: galRect<br>
+                target: galItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: nebRect<br>
+                target: nebItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: clustRect<br>
+                target: clustItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: planetRect<br>
-                opacity: 0.350<br>
+                target: planetItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: conRect<br>
-                opacity: 0.350<br>
+                target: conItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: starRect<br>
-                opacity: 0.350<br>
+                target: starItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
@@ -1123,55 +1098,54 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: galText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
<br>
             PropertyChanges {<br>
                 target: clustText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
<br>
             PropertyChanges {<br>
                 target: nebText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
         },<br>
         State {<br>
             name: "galAreaEntered"<br>
             PropertyChanges {<br>
                 target: dsoText<br>
-                font.pixelSize: "21"<br>
-                font.bold: false<br>
+                state: "selectedNoBold"<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: galRect<br>
+                target: galItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: nebRect<br>
+                target: nebItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: clustRect<br>
+                target: clustItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: planetRect<br>
-                opacity: 0.350<br>
+                target: planetItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: conRect<br>
-                opacity: 0.350<br>
+                target: conItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: starRect<br>
-                opacity: 0.350<br>
+                target: starItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
@@ -1181,9 +1155,8 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: galText<br>
-                color: "#e4800d"<br>
-                font.bold: true<br>
-                font.pixelSize: 21<br>
+                state: "selected"<br>
+                color: activeColor<br>
             }<br>
<br>
             PropertyChanges {<br>
@@ -1211,50 +1184,49 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: nebText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
<br>
             PropertyChanges {<br>
                 target: clustText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
         },<br>
         State {<br>
             name: "nebAreaEntered"<br>
             PropertyChanges {<br>
                 target: dsoText<br>
-                font.pixelSize: "21"<br>
-                font.bold: false<br>
+                state: "selectedNoBold"<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: galRect<br>
+                target: galItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: nebRect<br>
+                target: nebItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: clustRect<br>
+                target: clustItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: planetRect<br>
-                opacity: 0.350<br>
+                target: planetItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: conRect<br>
-                opacity: 0.350<br>
+                target: conItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: starRect<br>
-                opacity: 0.350<br>
+                target: starItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
@@ -1264,9 +1236,8 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: nebText<br>
-                color: "#e4800d"<br>
-                font.bold: true<br>
-                font.pixelSize: 21<br>
+                state: "selected"<br>
+                color: activeColor<br>
             }<br>
<br>
             PropertyChanges {<br>
@@ -1294,50 +1265,49 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: galText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
<br>
             PropertyChanges {<br>
                 target: clustText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
         },<br>
         State {<br>
             name: "clustAreaEntered"<br>
             PropertyChanges {<br>
                 target: dsoText<br>
-                font.pixelSize: "21"<br>
-                font.bold: false<br>
+                state: "selectedNoBold"<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: galRect<br>
+                target: galItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: nebRect<br>
+                target: nebItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: clustRect<br>
+                target: clustItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: planetRect<br>
-                opacity: 0.350<br>
+                target: planetItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: conRect<br>
-                opacity: 0.350<br>
+                target: conItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: starRect<br>
-                opacity: 0.350<br>
+                target: starItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
@@ -1347,9 +1317,8 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: clustText<br>
-                color: "#e4800d"<br>
-                font.bold: true<br>
-                font.pixelSize: 21<br>
+                state: "selected"<br>
+                color: activeColor<br>
             }<br>
<br>
             PropertyChanges {<br>
@@ -1377,12 +1346,12 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: nebText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
<br>
             PropertyChanges {<br>
                 target: galText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
         },<br>
         State {<br>
@@ -1390,10 +1359,12 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: viewsRow<br>
-                x: -(2*categoryView.width)<br>
+                x: -(2 * categoryView.width)<br>
                 y: 0<br>
-                anchors.topMargin: 0<br>
-                anchors.bottomMargin: 0<br>
+                anchors{<br>
+                    topMargin: 0<br>
+                    bottomMargin: 0<br>
+                }<br>
             }<br>
<br>
             PropertyChanges {<br>
@@ -1406,10 +1377,12 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: viewsRow<br>
-                x: -(2*categoryView.width)<br>
+                x: -(2 * categoryView.width)<br>
                 y: 0<br>
-                anchors.topMargin: 0<br>
-                anchors.bottomMargin: 0<br>
+                anchors{<br>
+                    topMargin: 0<br>
+                    bottomMargin: 0<br>
+                }<br>
             }<br>
<br>
             PropertyChanges {<br>
@@ -1419,38 +1392,37 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: dsoText<br>
-                font.pixelSize: "21"<br>
-                font.bold: true<br>
+                state:"selectedNoBold"<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: galRect<br>
+                target: galItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: nebRect<br>
+                target: nebItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: clustRect<br>
+                target: clustItem<br>
                 opacity: 1<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: planetRect<br>
-                opacity: 0.350<br>
+                target: planetItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: conRect<br>
-                opacity: 0.350<br>
+                target: conItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
-                target: starRect<br>
-                opacity: 0.350<br>
+                target: starItem<br>
+                opacity: categoryTitleOpacity<br>
             }<br>
<br>
             PropertyChanges {<br>
@@ -1483,17 +1455,17 @@ Rectangle {<br>
<br>
             PropertyChanges {<br>
                 target: galText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
<br>
             PropertyChanges {<br>
                 target: clustText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
<br>
             PropertyChanges {<br>
                 target: nebText<br>
-                color: "#e4800d"<br>
+                color: activeColor<br>
             }<br>
         }<br>
     ]<br>
@@ -1502,93 +1474,165 @@ Rectangle {<br>
         Transition {<br>
             from: "*"<br>
             to: "planetAreaEntered"<br>
-            NumberAnimation { target: planetText; property: "font.pixelSize"; to: 21; duration: 150 }<br>
-            NumberAnimation { target: dsoText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: conText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: galText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: nebText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: dsoContainer; property: "y"; duration: 500 }<br>
-            NumberAnimation { target: galRect; property: "opacity"; duration: 500 }<br>
-            NumberAnimation { target: nebRect; property: "opacity"; duration: 500 }<br>
-            NumberAnimation { target: clustRect; property: "opacity"; duration: 500 }<br>
+<br>
+            NumberAnimation {<br>
+                target: dsoContainer<br>
+                property: "y"<br>
+                duration: 500<br>
+            }<br>
+            NumberAnimation {<br>
+                target: galItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
+            NumberAnimation {<br>
+                target: nebItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
+            NumberAnimation {<br>
+                target: clustItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
         },<br>
         Transition {<br>
             from: "*"<br>
             to: "starAreaEntered"<br>
-            NumberAnimation { target: starText; property: "font.pixelSize"; to: 21; duration: 150 }<br>
-            NumberAnimation { target: dsoText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: conText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: galText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: nebText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: dsoContainer; property: "y"; duration: 500 }<br>
-            NumberAnimation { target: galRect; property: "opacity"; duration: 500 }<br>
-            NumberAnimation { target: nebRect; property: "opacity"; duration: 500 }<br>
-            NumberAnimation { target: clustRect; property: "opacity"; duration: 500 }<br>
+<br>
+            NumberAnimation {<br>
+                target: dsoContainer<br>
+                property: "y"<br>
+                duration: 500<br>
+            }<br>
+            NumberAnimation {<br>
+                target: galItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
+            NumberAnimation {<br>
+                target: nebItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
+            NumberAnimation {<br>
+                target: clustItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
         },<br>
         Transition {<br>
             from: "*"<br>
             to: "conAreaEntered"<br>
-            NumberAnimation { target: conText; property: "font.pixelSize"; to: 21; duration: 150 }<br>
-            NumberAnimation { target: dsoText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: conText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: galText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: nebText; property: "font.pixelSize"; duration: 150 }<br>
-            NumberAnimation { target: dsoContainer; property: "y"; duration: 500 }<br>
-            NumberAnimation { target: galRect; property: "opacity"; duration: 500 }<br>
-            NumberAnimation { target: nebRect; property: "opacity"; duration: 500 }<br>
-            NumberAnimation { target: clustRect; property: "opacity"; duration: 500 }<br>
-        },<br>
-        Transition {<br>
-            from: "*"<br>
-            to: "dsoAreaEntered"<br>
-            NumberAnimation { target: dsoText; property: "font.pixelSize"; to: 21; duration: 150 }<br>
-        },<br>
-        Transition {<br>
-            from: "*"<br>
-            to: "galAreaEntered"<br>
-            NumberAnimation { target: galText; property: "font.pixelSize"; to: 21; duration: 150 }<br>
-        },<br>
-        Transition {<br>
-            from: "*"<br>
-            to: "nebAreaEntered"<br>
-            NumberAnimation { target: nebText; property: "font.pixelSize"; to: 21; duration: 150 }<br>
-        },<br>
-        Transition {<br>
-            from: "*"<br>
-            to: "clustAreaEntered"<br>
-            NumberAnimation { target: clustText; property: "font.pixelSize"; to: 21; duration: 150 }<br>
+<br>
+            NumberAnimation {<br>
+                target: dsoContainer<br>
+                property: "y"<br>
+                duration: 500<br>
+            }<br>
+            NumberAnimation {<br>
+                target: galItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
+            NumberAnimation {<br>
+                target: nebItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
+            NumberAnimation {<br>
+                target: clustItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
         },<br>
         Transition {<br>
             from: "*"<br>
             to: "dsoAreaClicked"<br>
-            NumberAnimation { target: dsoContainer; property: "y"; duration: 200 }<br>
-            NumberAnimation { target: galRect; property: "opacity"; duration: 500 }<br>
-            NumberAnimation { target: nebRect; property: "opacity"; duration: 500 }<br>
-            NumberAnimation { target: clustRect; property: "opacity"; duration: 500 }<br>
+            NumberAnimation {<br>
+                target: dsoContainer<br>
+                property: "y"<br>
+                duration: 200<br>
+            }<br>
+            NumberAnimation {<br>
+                target: galItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
+            NumberAnimation {<br>
+                target: nebItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
+            NumberAnimation {<br>
+                target: clustItem<br>
+                property: "opacity"<br>
+                duration: 500<br>
+            }<br>
         },<br>
         Transition {<br>
             from: "*"<br>
             to: "soTypeSelected"<br>
-            NumberAnimation { target: viewsRow; property: "x"; duration: 250; easing.type: Easing.InOutQuad }<br>
-            NumberAnimation { target: backButton; property: "x"; duration: 250; easing.type: Easing.InOutQuad }<br>
+            NumberAnimation {<br>
+                target: viewsRow<br>
+                property: "x"<br>
+                duration: 250<br>
+                easing.type: Easing.InOutQuad<br>
+            }<br>
+            NumberAnimation {<br>
+                target: backButton<br>
+                property: "x"<br>
+                duration: 250<br>
+                easing.type: Easing.InOutQuad<br>
+            }<br>
         },<br>
         Transition {<br>
             from: "*"<br>
             to: "dsoTypeSelected"<br>
-            NumberAnimation { target: viewsRow; property: "x"; duration: 250; easing.type: Easing.InOutQuad }<br>
-            NumberAnimation { target: backButton; property: "x"; duration: 250; easing.type: Easing.InOutQuad }<br>
+            NumberAnimation {<br>
+                target: viewsRow<br>
+                property: "x"<br>
+                duration: 250<br>
+                easing.type: Easing.InOutQuad<br>
+            }<br>
+            NumberAnimation {<br>
+                target: backButton<br>
+                property: "x"<br>
+                duration: 250<br>
+                easing.type: Easing.InOutQuad<br>
+            }<br>
         },<br>
         Transition {<br>
             from: "soTypeSelected"<br>
             to: "base"<br>
-            NumberAnimation { target: viewsRow; property: "x"; duration: 250; easing.type: Easing.InOutQuad }<br>
-            NumberAnimation { target: backButton; property: "x"; duration: 250; easing.type: Easing.InOutQuad }<br>
+            NumberAnimation {<br>
+                target: viewsRow<br>
+                property: "x"<br>
+                duration: 250<br>
+                easing.type: Easing.InOutQuad<br>
+            }<br>
+            NumberAnimation {<br>
+                target: backButton<br>
+                property: "x"<br>
+                duration: 250<br>
+                easing.type: Easing.InOutQuad<br>
+            }<br>
         },<br>
         Transition {<br>
             from: "dsoTypeSelected"<br>
             to: "dsoAreaClicked"<br>
-            NumberAnimation { target: viewsRow; property: "x"; duration: 250; easing.type: Easing.InOutQuad }<br>
-            NumberAnimation { target: backButton; property: "x"; duration: 250; easing.type: Easing.InOutQuad }<br>
+            NumberAnimation {<br>
+                target: viewsRow<br>
+                property: "x"<br>
+                duration: 250<br>
+                easing.type: Easing.InOutQuad<br>
+            }<br>
+            NumberAnimation {<br>
+                target: backButton<br>
+                property: "x"<br>
+                duration: 250<br>
+                easing.type: Easing.InOutQuad<br>
+            }<br>
         }<br>
     ]<br>
 }<br>
diff --git a/kstars/tools/whatsinteresting/skyobjitem.cpp b/kstars/tools/whatsinteresting/skyobjitem.cpp<br>
index de03829..9848f1d 100644<br>
--- a/kstars/tools/whatsinteresting/skyobjitem.cpp<br>
+++ b/kstars/tools/whatsinteresting/skyobjitem.cpp<br>
@@ -79,6 +79,8 @@ QVariant SkyObjItem::data(int role)<br>
     }<br>
 }<br>
<br>
+///Moved to skyobjlistmodel.cpp<br>
+/*<br>
 QHash<int, QByteArray> SkyObjItem::roleNames() const<br>
 {<br>
     QHash<int, QByteArray> roles;<br>
@@ -87,6 +89,7 @@ QHash<int, QByteArray> SkyObjItem::roleNames() const<br>
     roles[CategoryNameRole] = "typeName";<br>
     return roles;<br>
 }<br>
+*/<br>
<br>
 void SkyObjItem::setPosition(SkyObject* so)<br>
 {<br>
diff --git a/kstars/tools/whatsinteresting/skyobjitem.h b/kstars/tools/whatsinteresting/skyobjitem.h<br>
index ba163c4..4b6e393 100644<br>
--- a/kstars/tools/whatsinteresting/skyobjitem.h<br>
+++ b/kstars/tools/whatsinteresting/skyobjitem.h<br>
@@ -61,12 +61,6 @@ public:<br>
     QVariant data(int role);<br>
<br>
     /**<br>
-     * \brief Create and return a QHash<int, QByteArray> of rolenames for the SkyObjItem.<br>
-     * \return QHash<int, QByteArray> of rolenames for the SkyObjItem.<br>
-     */<br>
-    QHash<int, QByteArray> roleNames() const;<br>
-<br>
-    /**<br>
      * \brief Get name of sky-object associated with the SkyObjItem.<br>
      * \return Name of sky-object associated with the SkyObjItem as a QString<br>
      */<br>
diff --git a/kstars/tools/whatsinteresting/skyobjlistmodel.cpp b/kstars/tools/whatsinteresting/skyobjlistmodel.cpp<br>
index a3c6519..cb1743b 100644<br>
--- a/kstars/tools/whatsinteresting/skyobjlistmodel.cpp<br>
+++ b/kstars/tools/whatsinteresting/skyobjlistmodel.cpp<br>
@@ -20,9 +20,19 @@<br>
 SkyObjListModel::SkyObjListModel(SkyObjItem *soitem, QObject *parent): QAbstractListModel(parent)<br>
 {<br>
     //FIXME Needs porting to KF5<br>
+    //Fixed in roleNames(). setRoleNames is not a member of QAbstractListModel anymore<br>
     //setRoleNames(soitem->roleNames());<br>
 }<br>
<br>
+QHash<int, QByteArray> SkyObjListModel::roleNames() const<br>
+{<br>
+    QHash<int, QByteArray> roles;<br>
+    roles[SkyObjItem::DispNameRole] = "dispName";<br>
+    roles[SkyObjItem::CategoryRole] = "type";<br>
+    roles[SkyObjItem::CategoryNameRole] = "typeName";<br>
+    return roles;<br>
+}<br>
+<br>
 void SkyObjListModel::addSkyObject(SkyObjItem *soitem)<br>
 {<br>
     beginInsertRows(QModelIndex(), rowCount(), rowCount());<br>
diff --git a/kstars/tools/whatsinteresting/skyobjlistmodel.h b/kstars/tools/whatsinteresting/skyobjlistmodel.h<br>
index 17cfe4c..7bd830e 100644<br>
--- a/kstars/tools/whatsinteresting/skyobjlistmodel.h<br>
+++ b/kstars/tools/whatsinteresting/skyobjlistmodel.h<br>
@@ -43,6 +43,12 @@ public:<br>
     void addSkyObject(SkyObjItem *sobj);<br>
<br>
     /**<br>
+     * \brief Create and return a QHash<int, QByteArray> of rolenames for the SkyObjItem.<br>
+     * \return QHash<int, QByteArray> of rolenames for the SkyObjItem.<br>
+     */<br>
+    QHash<int, QByteArray> roleNames() const;<br>
+<br>
+    /**<br>
      * \brief Overridden method from QAbstractItemModel.<br>
      * \return The number of items in the sky-object list model.<br>
      */<br>
diff --git a/kstars/tools/whatsinteresting/wiview.cpp b/kstars/tools/whatsinteresting/wiview.cpp<br>
index b05915e..fe33f9b 100644<br>
--- a/kstars/tools/whatsinteresting/wiview.cpp<br>
+++ b/kstars/tools/whatsinteresting/wiview.cpp<br>
@@ -23,6 +23,8 @@<br>
 #include "wiview.h"<br>
 #include "skymap.h"<br>
 #include "dialogs/detaildialog.h"<br>
+#include <klocalizedcontext.h><br>
+<br>
<br>
 WIView::WIView(QWidget *parent, ObsConditions *obs) : QWidget(parent), m_Obs(obs), m_CurCategorySelected(-1)<br>
 {<br>
@@ -38,7 +40,10 @@ WIView::WIView(QWidget *parent, ObsConditions *obs) : QWidget(parent), m_Obs(obs<br>
<br>
     m_Ctxt = m_BaseView->rootContext();<br>
<br>
-    m_BaseView->setSource(QStandardPaths::locate(QStandardPaths::DataLocation, "tools/whatsinteresting/qml/wiview.qml"));<br>
+    ///Use instead of KDeclarative<br>
+    m_Ctxt->setContextObject(new KLocalizedContext(m_BaseView));<br>
+<br>
+    m_BaseView->setSource(QStandardPaths::locate(QStandardPaths::AppDataLocation, "tools/whatsinteresting/qml/wiview.qml"));<br>
<br>
     m_BaseObj = m_BaseView->rootObject();<br>
<br>
_______________________________________________<br>
Kstars-devel mailing list<br>
<a href="mailto:Kstars-devel@kde.org" target="_blank">Kstars-devel@kde.org</a><br>
<a href="https://mail.kde.org/mailman/listinfo/kstars-devel" rel="noreferrer" target="_blank">https://mail.kde.org/mailman/listinfo/kstars-devel</a><br>
</blockquote></div><br></div>
<br>_______________________________________________<br>
Kstars-devel mailing list<br>
<a href="mailto:Kstars-devel@kde.org">Kstars-devel@kde.org</a><br>
<a href="https://mail.kde.org/mailman/listinfo/kstars-devel" rel="noreferrer" target="_blank">https://mail.kde.org/mailman/listinfo/kstars-devel</a><br>
<br></blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="gmail_signature"><div dir="ltr"><div>Best Regards,<br>Jasem Mutlaq<br></div><div><br></div></div></div>
</div>