Drop SegmentedImages and rewrite ColorIcon
This commit is contained in:
Michael Zanetti
parent
f43e522368
commit
89bf228406
@ -43,10 +43,6 @@
|
||||
<file>ui/components/SwipeDelegateGroup.qml</file>
|
||||
<file>ui/components/PasswordTextField.qml</file>
|
||||
<file>ui/components/BrightnessSlider.qml</file>
|
||||
<file>ui/components/SegmentedImage.qml</file>
|
||||
<file>ui/components/SegmentRenderer.qml</file>
|
||||
<file>ui/components/SegmentBoundingBoxes.qml</file>
|
||||
<file>ui/components/FingerprintVisual.qml</file>
|
||||
<file>ui/components/ListSectionHeader.qml</file>
|
||||
<file>ui/components/ListFilterInput.qml</file>
|
||||
<file>ui/components/Led.qml</file>
|
||||
|
||||
@ -1,126 +1,67 @@
|
||||
/*
|
||||
* Copyright (C) 2013 Canonical, Ltd.
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; version 3.
|
||||
*
|
||||
* This program 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 General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
*
|
||||
* Copyright 2013 - 2020, nymea GmbH
|
||||
* Contact: contact@nymea.io
|
||||
*
|
||||
* This file is part of nymea.
|
||||
* This project including source code and documentation is protected by
|
||||
* copyright law, and remains the property of nymea GmbH. All rights, including
|
||||
* reproduction, publication, editing and translation, are reserved. The use of
|
||||
* this project is subject to the terms of a license agreement to be concluded
|
||||
* with nymea GmbH in accordance with the terms of use of nymea GmbH, available
|
||||
* under https://nymea.io/license
|
||||
*
|
||||
* GNU General Public License Usage
|
||||
* Alternatively, this project may be redistributed and/or modified under the
|
||||
* terms of the GNU General Public License as published by the Free Software
|
||||
* Foundation, GNU version 3. This project 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 General
|
||||
* Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this project. If not, see <https://www.gnu.org/licenses/>.
|
||||
*
|
||||
* For any further details and any questions please contact us under
|
||||
* contact@nymea.io or see our FAQ/Licensing Information on
|
||||
* https://nymea.io/license/faq
|
||||
*
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
|
||||
import QtQuick 2.4
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
/*!
|
||||
\qmltype Icon
|
||||
\inqmlmodule Ubuntu.Components 0.1
|
||||
\ingroup ubuntu
|
||||
\brief The Icon component displays an icon from the icon theme.
|
||||
|
||||
The icon theme contains a set of standard icons referred to by their name.
|
||||
Using icons whenever possible enhances consistency accross applications.
|
||||
Each icon has a name and can have different visual representations depending
|
||||
on the size requested.
|
||||
|
||||
Icons can also be colorized. Setting the \l color property will make all pixels
|
||||
with the \l keyColor (by default #808080) colored.
|
||||
|
||||
Example:
|
||||
\qml
|
||||
Icon {
|
||||
width: 64
|
||||
height: 64
|
||||
name: "search"
|
||||
}
|
||||
\endqml
|
||||
|
||||
Example of colorization:
|
||||
\qml
|
||||
Icon {
|
||||
width: 64
|
||||
height: 64
|
||||
name: "search"
|
||||
color: UbuntuColors.warmGrey
|
||||
}
|
||||
\endqml
|
||||
|
||||
Icon themes are created following the
|
||||
\l{http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html}{Freedesktop Icon Theme Specification}.
|
||||
*/
|
||||
Item {
|
||||
id: icon
|
||||
|
||||
/*!
|
||||
The name of the icon to display.
|
||||
\qmlproperty string name
|
||||
*/
|
||||
property string name
|
||||
|
||||
/*!
|
||||
The color that all pixels that originally are of color \l keyColor should take.
|
||||
\qmlproperty color color
|
||||
*/
|
||||
property alias color: colorizedImage.keyColorOut
|
||||
|
||||
/*!
|
||||
The color of the pixels that should be colorized.
|
||||
By default it is set to #808080.
|
||||
\qmlproperty color keyColor
|
||||
*/
|
||||
property alias keyColor: colorizedImage.keyColorIn
|
||||
|
||||
property alias color: colorizedImage.color
|
||||
property int margins: 0
|
||||
|
||||
//TODO: Should be in the style
|
||||
readonly property color keyColor: "#808080"
|
||||
|
||||
property alias status: image.status
|
||||
|
||||
Image {
|
||||
id: image
|
||||
|
||||
/* Necessary so that icons are not loaded before a size is set. */
|
||||
property bool ready: false
|
||||
Component.onCompleted: ready = true
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: parent ? parent.margins : 0
|
||||
source: ready && width > 0 && height > 0 && icon.name ? icon.name : ""
|
||||
source: width > 0 && height > 0 && icon.name ? icon.name : ""
|
||||
sourceSize {
|
||||
width: width
|
||||
height: height
|
||||
}
|
||||
cache: true
|
||||
visible: !colorizedImage.active
|
||||
}
|
||||
|
||||
ShaderEffect {
|
||||
ColorOverlay {
|
||||
id: colorizedImage
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: parent ? parent.margins : 0
|
||||
visible: active && image.status == Image.Ready
|
||||
|
||||
// Whether or not a color has been set.
|
||||
property bool active: keyColorOut != Qt.rgba(0.0, 0.0, 0.0, 0.0)
|
||||
|
||||
property Image source: image
|
||||
property color keyColorOut: Qt.rgba(0.0, 0.0, 0.0, 0.0)
|
||||
property color keyColorIn: "#808080"
|
||||
property real threshold: 0.1
|
||||
|
||||
fragmentShader: "
|
||||
varying highp vec2 qt_TexCoord0;
|
||||
uniform sampler2D source;
|
||||
uniform highp vec4 keyColorOut;
|
||||
uniform highp vec4 keyColorIn;
|
||||
uniform lowp float threshold;
|
||||
uniform lowp float qt_Opacity;
|
||||
void main() {
|
||||
lowp vec4 sourceColor = texture2D(source, qt_TexCoord0);
|
||||
gl_FragColor = mix(vec4(keyColorOut.rgb, 1.0) * sourceColor.a, sourceColor, step(threshold, distance(sourceColor.rgb / sourceColor.a, keyColorIn.rgb))) * qt_Opacity;
|
||||
}"
|
||||
visible: image.status == Image.Ready
|
||||
source: image
|
||||
}
|
||||
}
|
||||
|
||||
@ -164,10 +164,11 @@ DevicePageBase {
|
||||
Layout.preferredWidth: 100
|
||||
Layout.preferredHeight: width
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
FingerprintVisual {
|
||||
id: fingerprintVisual
|
||||
ColorIcon {
|
||||
name: "../images/fingerprint.svg"
|
||||
anchors.centerIn: parent
|
||||
scale: parent.height / implicitHeight
|
||||
height: Math.min(parent.width, parent.height)
|
||||
width: height
|
||||
}
|
||||
}
|
||||
|
||||
@ -199,11 +200,10 @@ DevicePageBase {
|
||||
Connections {
|
||||
target: engine.deviceManager
|
||||
onExecuteActionReply: {
|
||||
addUserPage.error = params["deviceError"] !== "DeviceErrorNoError"
|
||||
print("Execute action reply:", params["deviceError"]);
|
||||
print("Execute action reply:", JSON.stringify(params));
|
||||
addUserPage.error = params["params"]["deviceError"] !== "DeviceErrorNoError"
|
||||
var masks =[]
|
||||
masks.push({x: 0, y: 0, width: 1, height: 1});
|
||||
fingerprintVisual.masks = masks
|
||||
addUserPage.done = true
|
||||
}
|
||||
}
|
||||
@ -299,13 +299,15 @@ DevicePageBase {
|
||||
Layout.preferredHeight: 100
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
|
||||
FingerprintVisual {
|
||||
id: fingerprintVisual
|
||||
scale: parent.height / implicitHeight
|
||||
ColorIcon {
|
||||
name: "../images/fingerprint.svg"
|
||||
height: Math.min(parent.width, parent.height)
|
||||
width: height
|
||||
anchors.centerIn: parent
|
||||
fillColor: addUserPage.error ? "red" : app.accentColor
|
||||
color: addUserPage.done ?
|
||||
(addUserPage.error ? "red" : app.accentColor)
|
||||
: keyColor
|
||||
}
|
||||
|
||||
}
|
||||
Label {
|
||||
text: addUserPage.error ? qsTr("Fingerprint could not be read.\nPlease try again.") :
|
||||
|
||||
Reference in New Issue
Block a user