Skip to content

Q
qtquickcontrols-nemo
Commit 92d280ff authored by Sergey Chupligin's avatar Sergey Chupligin
Browse files
Options

[Slider] Update style

parent 60edd24f
Show whitespace changes
Inline Side-by-side
Showing with 139 additions and 57 deletions
examples/touch/content/SliderPage.qml
View file @ 92d280ff
...@@ -54,14 +54,18 @@ Page { ...@@ -54,14 +54,18 @@ Page {
Slider { Slider {
anchors.margins: 20 anchors.margins: 20
//style: touchStyle
value: 0 value: 0
} }
Slider { Slider {
anchors.margins: 20 anchors.margins: 20
//style: touchStyle showValue: true
value: 0.5 value: 0.5
} }
Slider {
anchors.margins: 20
enabled: false
value: 0.75
}
Slider { Slider {
anchors.margins: 20 anchors.margins: 20
style: touchStyle style: touchStyle
......
src/controls/Slider.qml 0 → 100644
View file @ 92d280ff
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles.Nemo 1.0
Slider {
id: slider
property bool showValue: false
style: SliderStyle{}
}
src/controls/controls.pro
View file @ 92d280ff
...@@ -16,7 +16,8 @@ QML_FILES += \ ...@@ -16,7 +16,8 @@ QML_FILES += \
ButtonRow.qml \ ButtonRow.qml \
QueryDialog.qml \ QueryDialog.qml \
Header.qml \ Header.qml \
HeaderToolsLayout.qml HeaderToolsLayout.qml \
Slider.qml
OTHER_FILES += qmldir \ OTHER_FILES += qmldir \
$$QML_FILES $$QML_FILES
...@@ -48,4 +49,5 @@ qmlfiles.files += $$_PRO_FILE_PWD_/qmldir ...@@ -48,4 +49,5 @@ qmlfiles.files += $$_PRO_FILE_PWD_/qmldir
qmlfiles.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH qmlfiles.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
images.files = $$_PRO_FILE_PWD_/images images.files = $$_PRO_FILE_PWD_/images
images.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH images.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
INSTALLS += target qmlfiles images INSTALLS += target qmlfiles images
src/controls/qmldir
View file @ 92d280ff
...@@ -18,6 +18,7 @@ ButtonRow 1.0 ButtonRow.qml ...@@ -18,6 +18,7 @@ ButtonRow 1.0 ButtonRow.qml
QueryDialog 1.0 QueryDialog.qml QueryDialog 1.0 QueryDialog.qml
Header 1.0 Header.qml Header 1.0 Header.qml
HeaderToolsLayout 1.0 HeaderToolsLayout.qml HeaderToolsLayout 1.0 HeaderToolsLayout.qml
Slider 1.0 Slider.qml
# MIRRORED CONTROLS: # MIRRORED CONTROLS:
# These are the controls that we take directly from official QQC. # These are the controls that we take directly from official QQC.
...@@ -37,7 +38,6 @@ StackView 1.0 ../StackView.qml ...@@ -37,7 +38,6 @@ StackView 1.0 ../StackView.qml
ProgressBar 1.0 ../ProgressBar.qml ProgressBar 1.0 ../ProgressBar.qml
RadioButton 1.0 ../RadioButton.qml RadioButton 1.0 ../RadioButton.qml
ScrollView 1.0 ../ScrollView.qml ScrollView 1.0 ../ScrollView.qml
Slider 1.0 ../Slider.qml
SpinBox 1.0 ../SpinBox.qml SpinBox 1.0 ../SpinBox.qml
SplitView 1.0 ../SplitView.qml SplitView 1.0 ../SplitView.qml
StackViewDelegate 1.0 ../StackViewDelegate.qml StackViewDelegate 1.0 ../StackViewDelegate.qml
......
src/styles/SliderStyle.qml
View file @ 92d280ff
/* /*
* Copyright (C) 2013 Andrea Bernabei <and.bernabei@gmail.com> * Copyright (C) 2013 Andrea Bernabei <and.bernabei@gmail.com>
* Copyright (C) 2017 Chupligin Sergey <mail@neochapay.ru>
* *
* This library is free software; you can redistribute it and/or * This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Library General Public * modify it under the terms of the GNU Library General Public
...@@ -21,63 +22,61 @@ import QtQuick 2.1 ...@@ -21,63 +22,61 @@ import QtQuick 2.1
import QtQuick.Controls.Styles 1.0 import QtQuick.Controls.Styles 1.0
import QtQuick.Controls.Styles.Nemo 1.0 import QtQuick.Controls.Styles.Nemo 1.0
SliderStyle { SliderStyle{
GrooveStyle { handle: Rectangle {
id: grooveStyle id: handle
} anchors.centerIn: parent
color: "black"
Image { border.color: "#0091e5"
id: ball border.width: 2
source: "images/slider-ball.png" implicitWidth: 34
z: 1 implicitHeight: 34
radius: 16
visible: control.enabled visible: control.enabled
}
handle: Canvas { Text{
Connections { id: valueLabel
target: control anchors.centerIn: parent
onValueChanged: { text: parseInt(control.value*100)
if (Math.abs(((control.value*1000) - lastValue)) > 10) { visible: control.showValue
requestPaint() color: "white"
lastValue = control.value*1000
} }
} }
groove: Rectangle{
id: grove
implicitHeight: 16
implicitWidth: 440
color: "#313131"
z: 1
Rectangle{
id: dataLine
height: parent.height
width: styleData.handlePosition
color: "#0091e5"
} }
id: canvas
width: 125
height: 50
property color strokeStyle: Theme.groove.foreground
property color fillStyle: Theme.groove.foreground
property bool fill: true
property bool stroke: true
property real alpha: 1.0
property real lastValue: 0
antialiasing: true
onPaint: { Image {
canvas.loadImage("images/slider-ball.png"); id: disabledImg
anchors.fill: parent
visible: !control.enabled
source: "images/disabled-overlay.png"
fillMode: Image.Tile
}
var ctx = canvas.getContext('2d'); Image{
ctx.save(); id: left
ctx.translate(0,8); anchors{
ctx.fillStyle = canvas.fillStyle; right: dataLine.right
ctx.beginPath(); verticalCenter: dataLine.verticalCenter
ctx.lineWidth = 1; }
ctx.moveTo(0,38); source: "images/slider-handle-left.svg"
ctx.bezierCurveTo(0, 8, 0, 8, 0, 8); height: 34
ctx.bezierCurveTo(55, 8, 55, 8, 55, 8); visible: control.enabled
ctx.bezierCurveTo(85, 0, 85, 0, 85, 0); width: (styleData.handlePosition > 80) ? 80 : styleData.handlePosition
ctx.bezierCurveTo(85, 32, 85, 32, 85, 32); sourceSize.width: width
ctx.bezierCurveTo(55, 25, 55, 25, 55, 25); sourceSize.height: height
ctx.bezierCurveTo(0, 24, 0, 24, 0, 24);
ctx.closePath();
ctx.fill();
ctx.drawImage("images/slider-ball.png", 75, -3, 45,45);
ctx.fillStyle="white";
ctx.font="Bold 24px";
ctx.fillText(parseInt(control.value*100), 84, 27);
ctx.restore();
} }
} }
groove: grooveStyle;
} }
src/styles/images/slider-handle-left.svg 0 → 100644
View file @ 92d280ff
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="svg6201"
viewBox="0 0 80.000001 32.000001"
height="32"
width="80"
inkscape:version="0.91 r13725"
sodipodi:docname="slider-handle-left.svg">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1051"
id="namedview7"
showgrid="false"
inkscape:zoom="1.2685914"
inkscape:cx="-37.765717"
inkscape:cy="-210.20414"
inkscape:window-x="0"
inkscape:window-y="312"
inkscape:window-maximized="1"
inkscape:current-layer="svg6201"
units="px" />
<defs
id="defs6203" />
<metadata
id="metadata6206">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
style="fill:#0091e5;fill-opacity:1"
transform="translate(-948.66514,-193.50502)">
<path
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#0091e5;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
d="m 948.92042,201.50506 c 0,0 45.85971,1.70082 79.55728,-8 l 0,32 c -34.41912,-10.50044 -79.81256,-8 -79.81256,-8 z"
id="rect6032"
inkscape:connector-curvature="0" />
</g>
</svg>
src/styles/styles.pro
View file @ 92d280ff
...@@ -51,7 +51,8 @@ QML_FILES += \ ...@@ -51,7 +51,8 @@ QML_FILES += \
images/arrow-right@2x.png \ images/arrow-right@2x.png \
images/disabled-overlay.png \ images/disabled-overlay.png \
images/switch-ball.png \ images/switch-ball.png \
images/slider-ball.png images/slider-ball.png \
images/slider-handle-left.svg
OTHER_FILES += qmldir \ OTHER_FILES += qmldir \
themes/Theme1.js \ themes/Theme1.js \
...@@ -69,7 +70,9 @@ qmlfiles.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH ...@@ -69,7 +70,9 @@ qmlfiles.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
themes.files = $$_PRO_FILE_PWD_/themes/*.json themes.files = $$_PRO_FILE_PWD_/themes/*.json
themes.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH/themes themes.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH/themes
images.files = $$_PRO_FILE_PWD_/images images.files = $$_PRO_FILE_PWD_/images/*.svg\
$$_PRO_FILE_PWD_/images/*.png
images.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH images.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
HEADERS += \ HEADERS += \
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment