Merge pull request #60 from eekkelund/master

Changes to existing Buttonrow & Slider, great fixes for maliit and requested Page orientation fix

examples/touch/content/ButtonRowPage.qml

@@ -43,8 +43,10 @@ Page {
     Column {
         spacing: 40
         anchors.centerIn: parent
+        width: parent.width
         ButtonRow {
             id: row
+            anchors.horizontalCenter: parent.horizontalCenter
             model: ListModel {
                 id: buttonModel
                 ListElement {
@@ -73,11 +75,14 @@ Page {
 
         Label {
             id: selector
+            anchors.horizontalCenter: parent.horizontalCenter
             text: "Nothing selected"
         }
         ButtonRow {
             id: row2
             enabled: false
+            anchors.horizontalCenter: parent.horizontalCenter
+            fixedWidth: parent.width * .8
             model: ListModel {
                 ListElement {
                     name: "swim"

examples/touch/content/SliderPage.qml

@@ -55,6 +55,16 @@ Page {
         Slider {
             anchors.margins: 20
             value: 0
+            useSpecSlider: false
+        }
+        Slider {
+            anchors.margins: 20
+            value: 50
+            showValue: true
+            minimumValue: 1
+            maximumValue: 100
+            stepSize: 1
+            alwaysUp: true
         }
         Slider {
             anchors.margins: 20

examples/touch/content/TextInputPage.qml

@@ -46,6 +46,7 @@ import QtQuick.Controls.Styles.Nemo 1.0
 Page {
     id: root
 
+    allowedOrientations:Qt.PortraitOrientation | Qt.LandscapeOrientation
     property real progress: 0
     SequentialAnimation on progress {
         loops: Animation.Infinite

examples/touch/glacier-components.qml

@@ -51,6 +51,7 @@ ApplicationWindow {
     id: appWindow
 
     contentOrientation: Screen.orientation
+    allowedOrientations:  Qt.PortraitOrientation | Qt.LandscapeOrientation | Qt.InvertedLandscapeOrientation | Qt.InvertedPortraitOrientation
 
     // Implements back key navigation
     Keys.onReleased: {

examples/touch/src/main.cpp

@@ -41,15 +41,25 @@
 #include <QtGui/QGuiApplication>
 #include <QQmlApplicationEngine>
 #include <QtQuick/QQuickView>
+#include <QScreen>
 
 #include <glacierapp.h>
 
 int main(int argc, char *argv[])
 {
     setenv("QT_QUICK_CONTROLS_STYLE", "Nemo", 1);
+
     QGuiApplication *app = GlacierApp::app(argc, argv);
     app->setOrganizationName("NemoMobile");
 
+    QScreen* sc = app->primaryScreen();
+    if(sc){
+        sc->setOrientationUpdateMask(Qt::LandscapeOrientation
+                             | Qt::PortraitOrientation
+                             | Qt::InvertedLandscapeOrientation
+                             | Qt::InvertedPortraitOrientation);
+    }
+
     QQuickWindow *window = GlacierApp::showWindow();
     window->setTitle(QObject::tr("Glacier components"));
 

src/controls/controls.pro

@@ -26,7 +26,8 @@ QML_FILES += \
     qml/IconButton.qml \
     qml/DatePicker.qml \
     qml/ScrollDecorator.qml \
-    qml/dialogs/QueryDialog.qml
+    qml/dialogs/QueryDialog.qml \
+    qml/TextField.qml
 
 OTHER_FILES += qmldir \
     $$QML_FILES
@@ -41,7 +42,9 @@ HEADERS += \
     themedaemon/mlocalthemedaemonclient.h \
     themedaemon/mabstractthemedaemonclient.h \
     sizing.h \
-    theme.h
+    theme.h \
+    editfilter.h \
+    nemofocussingleton.h
 
 SOURCES += \
     qquicknemocontrolsextensionplugin.cpp \
@@ -53,7 +56,9 @@ SOURCES += \
     themedaemon/mlocalthemedaemonclient.cpp \
     themedaemon/mabstractthemedaemonclient.cpp \
     sizing.cpp \
-    theme.cpp
+    theme.cpp \
+    editfilter.cpp \
+    nemofocussingleton.cpp
 
 target.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
 

src/controls/editfilter.cpp

+/*
+ * Copyright (C) 2017 Eetu Kahelin
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Library General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this library; see the file COPYING.LIB.  If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ */
+
+#include "editfilter.h"
+
+EditFilter::EditFilter(QObject *parent) : QObject(parent)
+{
+
+}
+
+bool EditFilter::eventFilter(QObject *obj, QEvent *event)
+{
+    if (event->type() == QEvent::MouseButtonPress || event->type() == QEvent::TouchBegin) {
+        NemoFocusSingleton *nemoFocus = NemoFocusSingleton::instance();
+        if(nemoFocus->edit() != NULL) {
+            nemoFocus->edit()->setProperty("focus",QVariant(false));
+            return false;
+        }
+    } else {
+        return QObject::eventFilter(obj, event);
+    }
+}

src/controls/editfilter.h

+/*
+ * Copyright (C) 2017 Eetu Kahelin
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Library General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this library; see the file COPYING.LIB.  If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ */
+#ifndef EDITFILTER_H
+#define EDITFILTER_H
+
+#include <QObject>
+#include <QEvent>
+#include <QString>
+#include <QVariant>
+#include "nemofocussingleton.h"
+
+class EditFilter : public QObject
+{
+    Q_OBJECT
+public:
+     explicit EditFilter(QObject *parent = 0);
+protected:
+    bool eventFilter(QObject *obj, QEvent *event);
+};
+#endif // EDITFILTER_H

src/controls/nemofocussingleton.cpp

+/*
+ * Copyright (C) 2017 Eetu Kahelin
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Library General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this library; see the file COPYING.LIB.  If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ */
+
+#include "nemofocussingleton.h"
+
+void NemoFocusSingleton::nemoregister(QObject *edit)
+{
+    m_edit = edit;
+}
+NemoFocusSingleton *NemoFocusSingleton::instance() {
+    static NemoFocusSingleton * _instance = 0;
+    if ( _instance == 0 ) {
+        _instance = new NemoFocusSingleton();
+    }
+    return _instance;
+}
+
+QObject *NemoFocusSingleton::edit() const
+{
+    return m_edit;
+}

src/controls/nemofocussingleton.h

+/*
+ * Copyright (C) 2017 Eetu Kahelin
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Library General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this library; see the file COPYING.LIB.  If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ */
+
+#ifndef NEMOFOCUSSINGLETON_H
+#define NEMOFOCUSSINGLETON_H
+
+#include <QObject>
+
+class NemoFocusSingleton: public QObject
+{
+    Q_OBJECT
+     Q_DISABLE_COPY(NemoFocusSingleton)
+
+public:
+    Q_INVOKABLE void nemoregister(QObject *edit) ;
+    QObject *edit() const;
+
+    static NemoFocusSingleton* instance();
+
+private:
+    QObject *m_edit = nullptr;
+    NemoFocusSingleton(QObject* parent = nullptr) {}
+};
+
+#endif // NEMOFOCUSSINGLETON_H

src/controls/nemowindow.cpp

@@ -26,6 +26,8 @@ NemoWindow::NemoWindow(QWindow *parent) :
     m_defaultAllowedOrientations(Qt::PortraitOrientation | Qt::LandscapeOrientation)
 {
     m_allowedOrientations = m_defaultAllowedOrientations;
+    m_filter = new EditFilter();
+    this->installEventFilter(m_filter);
 }
 
 Qt::ScreenOrientations NemoWindow::allowedOrientations() const

src/controls/nemowindow.h

@@ -22,6 +22,8 @@
 
 #include <QQuickWindow>
 #include <QtCore/qnamespace.h>
+#include "editfilter.h"
+
 class NemoWindow : public QQuickWindow
 {
     Q_OBJECT
@@ -48,6 +50,9 @@ private:
     Qt::ScreenOrientations m_allowedOrientations;
 
     Qt::ScreenOrientations m_defaultAllowedOrientations;
+
+    EditFilter *m_filter;
+
 };
 
 #endif // NEMOWINDOW_H

src/controls/qml/ApplicationWindow.qml

@@ -19,7 +19,7 @@
  * Boston, MA 02110-1301, USA.
  */
 
-import QtQuick.Window 2.0
+import QtQuick.Window 2.2
 import QtQuick 2.6
 import QtQuick.Controls 1.0
 import QtQuick.Layouts 1.0
@@ -47,6 +47,12 @@ NemoWindow {
     readonly property var _bgColor: Theme.backgroundColor
     color: _bgColor
 
+    //Handles orientation of keyboard, MInputMethodQuick.appOrientation.
+    contentOrientation: orientation
+    onOrientationChanged: {
+        contentOrientation=orientation
+    }
+
     //README: allowedOrientations' default value is set in NemoWindow's c++ implementation
     //The app developer can overwrite it from QML
 

src/controls/qml/ButtonRow.qml

@@ -35,12 +35,21 @@ import QtQuick.Controls.Styles.Nemo 1.0
 
 Rectangle {
     id: main
-    width: childrenRect.width
+    implicitWidth: fixedWidth ? fixedWidth  : childrenRectWidth()
     color: Theme.fillDarkColor
     height: Theme.itemHeightSmall
     property ListModel model: ListModel {}
     property bool enabled: true
     property int currentIndex: -1
+    property int fixedWidth
+
+    function childrenRectWidth() {
+        var childWidth = 0
+        for(var i=0; i < rectangles.count; i++) {
+            childWidth = childWidth + rectangles.itemAt(i).width
+        }
+        return childWidth
+    }
 
     Image {
         anchors.fill: parent
@@ -48,24 +57,51 @@ Rectangle {
         source: "images/disabled-overlay.png"
         fillMode: Image.Tile
     }
-
     Rectangle{
         id: selecter
-        x: rowElement.children[main.currentIndex].x || 0
+        //x: main.currentIndex > -1 ? rowElement.children[main.currentIndex].x  : 0
         anchors.verticalCenter: rowElement.verticalCenter
 
-        width: rowElement.children[main.currentIndex].width || 0
         height: Theme.itemHeightMedium
         color: Theme.accentColor
-
+        clip: true
         visible: main.currentIndex > -1
 
         Behavior on x {
-            NumberAnimation { duration: 200 }
+            NumberAnimation { duration: 200; easing.type: Easing.OutCubic}
         }
         Behavior on width {
-            NumberAnimation { duration: 200 }
+            NumberAnimation { duration: 200; easing.type: Easing.OutCubic}
+        }
+    }
+    MouseArea {
+        id:dragArea
+        anchors.fill:parent
+        enabled: main.enabled
+        drag.target: main.enabled ? selecter.visible ? selecter : null : null
+        drag.axis: Drag.XAxis
+        drag.minimumX: x
+        drag.maximumX: main.width - selecter.width
+        property int inBoundsX
+        hoverEnabled: true
+        onReleased: {
+            if(inBoundsX > -1) {
+                if(mouseX < drag.minimumX)
+                    rowElement.childAt(inBoundsX,y).changeIndex()
+                else if (mouseX > drag.maximumX+selecter.width)
+                    rowElement.childAt(inBoundsX+selecter.width, y).changeIndex()
+                else rowElement.childAt(mouseX,y).changeIndex()
+                selecter.x = rowElement.children[main.currentIndex].x
+                selecter.width = main.currentIndex > -1 ? rowElement.children[main.currentIndex].width : 0
+            }
+        }
+        onClicked: {
+            inBoundsX = -1
+            rowElement.childAt(mouseX,y).changeIndex()
+            selecter.x = rowElement.children[main.currentIndex].x
+            selecter.width= main.currentIndex > -1 ? rowElement.children[main.currentIndex].width : 0
         }
+        onPositionChanged: if(mouseX>=drag.minimumX && mouseX <= drag.maximumX) inBoundsX = mouseX
     }
 
     Row {
@@ -76,19 +112,9 @@ Rectangle {
             delegate: Rectangle {
                 id: rowItem
                 height: Theme.itemHeightSmall
-                width: text.width+(text.width/name.length*2)
-
+                width: main.fixedWidth ? (main.fixedWidth/main.model.count) : (text.width+(text.width/name.length*2))
                 color: "transparent"
-                MouseArea {
-                    width: parent.width
-                    height: parent.height
-
-                    enabled: main.enabled
-
-                    onClicked: {
-                        main.currentIndex = index
-                    }
-                }
+                function changeIndex() { main.currentIndex = index}
                 Label {
                     id: text
                     text: name

src/controls/qml/GlacierRoller.qml

@@ -78,6 +78,16 @@ Item {
         snapMode: PathView.SnapToItem
     }
 
+    InverseMouseArea {
+        width: parent.width
+        height: view.height
+        anchors.centerIn: view
+        enabled: activated
+        parent:glacierRoller
+        onPressed: {
+            if(activated) activated = false
+        }
+    }
 
     Component.onCompleted: {
         if(activated)
@@ -117,14 +127,14 @@ Item {
         id: activateAnimations
         NumberAnimation{target: bottomLine; property: "opacity"; to: 1; duration: 150}
         NumberAnimation{target: topLine; property: "opacity"; to: 1; duration: 150}
-        NumberAnimation{target: view; property: "height"; to: itemHeight*activateSize; duration: 150}
+        NumberAnimation{target: view; property: "height"; to: itemHeight*activateSize; duration: 150; easing.type: Easing.InCubic}
     }
 
     ParallelAnimation {
         id: deActivateAnimations
         NumberAnimation{target: bottomLine; property: "opacity"; to: 0; duration: 150}
         NumberAnimation{target: topLine; property: "opacity"; to: 0; duration: 150}
-        NumberAnimation{target: view; property: "height"; to: itemHeight; duration: 150}
+        NumberAnimation{target: view; property: "height"; to: itemHeight; duration: 150; easing.type: Easing.OutCubic}
         onStopped: {
             view.showRow = true
         }

src/controls/qml/Page.qml

@@ -65,6 +65,8 @@ NemoPage {
     readonly property bool isPortrait: (orientation === Qt.PortraitOrientation || orientation === Qt.InvertedPortraitOrientation)
     readonly property bool isLandscape: (orientation === Qt.LandscapeOrientation || orientation === Qt.InvertedLandscapeOrientation)
 
+    allowedOrientations: Qt.PortraitOrientation | Qt.LandscapeOrientation | Qt.InvertedPortraitOrientation | Qt.InvertedLandscapeOrientation
+
     property bool __isNemoPage
 
     Rectangle {
@@ -73,7 +75,7 @@ NemoPage {
         color: Theme.backgroundColor
     }
 
-    Item {
+    MouseArea {
         id: content
         anchors.fill: parent
     }

src/controls/qml/Slider.qml

@@ -8,6 +8,8 @@ Slider {
     id: slider
     property bool showValue: false
     property int valueFontSize: Theme.fontSizeTiny
+    property bool useSpecSlider: true
+    property bool alwaysUp: false
 
     style: SliderStyle{}
 }

src/controls/qml/TextField.qml

+/****************************************************************************************
+**
+** Copyright (c) 2017, Eetu Kahelin
+** All rights reserved.
+**
+** You may use this file under the terms of BSD license as follows:
+**
+** Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are met:
+**     * Redistributions of source code must retain the above copyright
+**       notice, this list of conditions and the following disclaimer.
+**     * Redistributions in binary form must reproduce the above copyright
+**       notice, this list of conditions and the following disclaimer in the
+**       documentation and/or other materials provided with the distribution.
+**     * Neither the name of the author nor the
+**       names of its contributors may be used to endorse or promote products
+**       derived from this software without specific prior written permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+** ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+** WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+** DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDERS OR CONTRIBUTORS BE LIABLE FOR
+** ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+** (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+** LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+** ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+**
+****************************************************************************************/
+
+import QtQuick 2.6
+import QtQuick.Controls 1.0
+import QtQuick.Controls.Nemo 1.0
+import QtQuick.Controls.Styles.Nemo 1.0
+
+TextField {
+    onActiveFocusChanged: {
+        if(activeFocus) NemoFocus.nemoregister(this)
+        else NemoFocus.nemoregister(null)
+    }
+    style: TextFieldStyle { }
+}

src/controls/qml/qmldir

@@ -27,6 +27,7 @@ InverseMouseArea 1.0 InverseMouseArea.qml
 IconButton 1.0 IconButton.qml
 DatePicker 1.0 DatePicker.qml
 ScrollDecorator 1.0 ScrollDecorator.qml
+TextField 1.0 TextField.qml
 
 # MIRRORED CONTROLS: 
 # These are the controls that we take directly from official QQC.
@@ -56,6 +57,5 @@ TabView 1.0 ../TabView.qml
 TableView 1.0 ../TableView.qml
 TableViewColumn 1.0 ../TableViewColumn.qml
 TextArea 1.0 ../TextArea.qml
-TextField 1.0 ../TextField.qml
 ToolBar 1.0 ../ToolBar.qml
 ToolButton 1.0 ../ToolButton.qml

src/controls/qquicknemocontrolsextensionplugin.cpp

 /*
  * Copyright (C) 2013 Tomasz Olszak <olszak.tomasz@gmail.com>
  * Copyright (C) 2013 Andrea Bernabei <and.bernabei@gmail.com>
+ * Copyright (C) 2017 Eetu Kahelin
  *
  * This library is free software; you can redistribute it and/or
  * modify it under the terms of the GNU Library General Public
@@ -27,6 +28,7 @@
 #include "nemoimageprovider.h"
 #include "sizing.h"
 #include "theme.h"
+#include "nemofocussingleton.h"
 
 QQuickNemoControlsExtensionPlugin::QQuickNemoControlsExtensionPlugin(QObject *parent) :
     QQmlExtensionPlugin(parent)
@@ -38,10 +40,18 @@ static QObject *nemo_hacks_singletontype_provider(QQmlEngine *engine, QJSEngine
     QObject *ret = new Hacks(engine);
     return ret;
 }
+QObject *getNemoFocus(QQmlEngine *engine, QJSEngine *scriptEngine)
+{
+    Q_UNUSED(engine)
+    Q_UNUSED(scriptEngine)
+
+    return NemoFocusSingleton::instance();
+}
 
 void QQuickNemoControlsExtensionPlugin::registerTypes(const char *uri)
 {
     Q_ASSERT(uri == QLatin1String("QtQuick.Controls.Nemo"));
+    qmlRegisterSingletonType<QObject>(uri, 1, 0, "NemoFocus", getNemoFocus);
     qmlRegisterSingletonType<QObject>(uri, 1, 0, "NemoHacks", nemo_hacks_singletontype_provider);
     qmlRegisterType<NemoWindow>(uri, 1, 0, "NemoWindow");
     qmlRegisterType<NemoPage>(uri, 1, 0, "NemoPage");

src/styles/qml/SliderStyle.qml

@@ -23,17 +23,26 @@ import QtQuick.Controls.Styles 1.0
 import QtQuick.Controls.Nemo 1.0
 
 SliderStyle{
+    readonly property double handleValue: control.value / control.maximumValue
+    readonly property double _multiple: (handleValue  > 0.8) ? (control.maximumValue/control.value-1) / 0.25  : 1
+    readonly property double _multiple2: (handleValue  > 0.8) ? (handleValue - 0.8) / 0.2  : 1
+    property bool useSpecSlider: control.useSpecSlider
+    property bool alwaysUp: control.alwaysUp
     handle: Rectangle {
         id: handle
-        anchors.centerIn: parent
+        anchors.verticalCenter:useSpecSlider ? undefined : parent.verticalCenter
+        y: useSpecSlider ? (control.pressed ? alwaysUp ? parent.y - Theme.itemHeightLarge : ((handleValue  > 0.8) ? parent.y - (Theme.itemHeightLarge*_multiple2) : parent.y ) :  parent.y) : undefined
+        x: useSpecSlider ? (control.pressed ? alwaysUp ? Theme.itemHeightExtraSmall / 2 : (handleValue > 0.8) ? (_multiple*Theme.itemHeightHuge)  : Theme.itemHeightHuge : 0) : undefined
         color: Theme.backgroundColor
-        border.color: Theme.accentColor
-        border.width: 2
+        border.color: Theme.textColor
+        border.width: size.ratio(2)
         implicitWidth: Theme.itemHeightExtraSmall
         implicitHeight: Theme.itemHeightExtraSmall
         radius: implicitHeight / 2
         visible: control.enabled
 
+        scale: control.pressed ? 1.2 : 1
+
         Text{
             id: valueLabel
             anchors.centerIn: parent
@@ -58,6 +67,16 @@ SliderStyle{
             color: Theme.accentColor
         }
 
+        Rectangle{
+            id: strecthLine
+            x: dataLine.width
+            width: left.x-x + (handleValue < 0.85 ? Theme.itemSpacingLarge : 0)
+            visible: useSpecSlider ? alwaysUp ? false : (control.pressed && handleValue > 0.80) : false
+            height: parent.height
+            color: Theme.accentColor
+            opacity:0.3
+        }
+
         Image {
             id: disabledImg
             anchors.fill: parent
@@ -68,14 +87,15 @@ SliderStyle{
 
         Image{
             id: left
+            x: (useSpecSlider && control.pressed ? alwaysUp ? dataLine.width+width : (handleValue  > 0.80) ? dataLine.width +Theme.itemHeightExtraSmall/2 +_multiple*Theme.itemHeightHuge : dataLine.width + Theme.itemHeightHuge : dataLine.width) - width
             anchors{
-                right: dataLine.right
-                verticalCenter: dataLine.verticalCenter
+                bottom: useSpecSlider ? ((control.pressed && (handleValue > 0.80 || alwaysUp)) ? dataLine.bottom : undefined) : undefined
+                verticalCenter: useSpecSlider ? ((control.pressed && (handleValue > 0.80 || alwaysUp)) ? undefined :  dataLine.verticalCenter) : dataLine.verticalCenter
             }
-            source: "images/slider-handle-left.svg"
-            height:Theme.itemHeightExtraSmall
+            source: useSpecSlider && control.pressed ? (handleValue  > 0.80)  || alwaysUp ? "images/slider-trumpet-up.png" : "images/slider-trumpet-stretch.png" : "images/slider-trumpet.png"
+            height:  control.pressed && useSpecSlider ? alwaysUp ? Theme.itemHeightLarge : (handleValue > 0.80) ? (Theme.itemHeightLarge*_multiple2) : Theme.itemHeightExtraSmall : Theme.itemHeightExtraSmall
             visible: control.enabled
-            width: (styleData.handlePosition >  Theme.itemHeightHuge) ?  Theme.itemHeightHuge : styleData.handlePosition
+            width:  control.pressed && useSpecSlider ? ((handleValue > 0.80) || alwaysUp ? Theme.itemHeightExtraSmall  : Theme.itemHeightHuge)  : (styleData.handlePosition >  Theme.itemHeightHuge) ?  Theme.itemHeightHuge : styleData.handlePosition
             sourceSize.width: width
             sourceSize.height: height
         }

src/styles/styles.pro

@@ -53,7 +53,10 @@ QML_FILES += \
     images/disabled-overlay.png \
     images/switch-ball.png \
     images/slider-ball.png \
-    images/slider-handle-left.svg
+    images/slider-handle-left.svg \
+    images/slider-trumpet-stretch.png \
+    images/slider-trumpet-up.png \
+    images/slider-trumpet.png
 
 OTHER_FILES += qmldir \
     themes/Theme1.js \