forked from Sepanta/console-emulator
Alireza
3 years ago
15 changed files with 418 additions and 37 deletions
@ -0,0 +1,219 @@ |
|||
import QtQuick 2.0 |
|||
import QtQuick.Controls 2.13 |
|||
import QtGraphicalEffects 1.13 |
|||
|
|||
import "qrc:/theme" |
|||
import "qrc:/const" |
|||
|
|||
Item { |
|||
id: main |
|||
property var color: Theme.current.green |
|||
property var colorDeep: Theme.current.greenDeep |
|||
property var sliderSize: Const.sliderHeight |
|||
property var backgroundLenght: Const.sliderWidth |
|||
property bool flip: false |
|||
property var value: control.value |
|||
|
|||
implicitHeight: sliderSize |
|||
width: backgroundLenght |
|||
|
|||
Slider { |
|||
id: control |
|||
width: (4 / 5) * parent.width |
|||
height: Const.sliderThickness |
|||
x: parent.width - width |
|||
y: 0 |
|||
|
|||
from: flip ? -1 : 1 |
|||
to: flip ? -5 : 5 |
|||
stepSize: 1 |
|||
value: flip ? -1 : 1 |
|||
snapMode: Slider.SnapOnRelease |
|||
|
|||
transform: Rotation { |
|||
origin { |
|||
x: control.width / 2 - main.width / 10 |
|||
y: control.height / 2 |
|||
} |
|||
|
|||
axis { |
|||
z: 0 |
|||
x: 0 |
|||
y: 1 |
|||
} |
|||
|
|||
angle: flip ? 180 : 0 |
|||
} |
|||
|
|||
background: Item { |
|||
id: controlBackground |
|||
width: main.width |
|||
height: parent.height |
|||
x: - parent.x |
|||
|
|||
Item { |
|||
id: backgroundObject |
|||
width: parent.width |
|||
height: parent.height |
|||
|
|||
Rectangle { |
|||
id: backgroundArea |
|||
width: parent.width |
|||
height: parent.height |
|||
radius: height / 2 |
|||
color: "pink" |
|||
} |
|||
|
|||
Item { |
|||
id: backgroundGrad |
|||
implicitWidth: parent.implicitWidth |
|||
implicitHeight: parent.implicitHeight |
|||
anchors.fill: parent |
|||
|
|||
layer.enabled: true |
|||
layer.effect: OpacityMask { |
|||
maskSource: backgroundArea |
|||
} |
|||
|
|||
Rectangle { |
|||
width: parent.width |
|||
height: parent.height |
|||
color: "transparent" |
|||
|
|||
LinearGradient { |
|||
anchors.fill: parent |
|||
start: Qt.point(parent.width / 2 , parent.height) |
|||
end: Qt.point(0, 0) |
|||
gradient: Gradient { |
|||
GradientStop { |
|||
position: 0 |
|||
color: Theme.current.none |
|||
} |
|||
|
|||
GradientStop { |
|||
position: 1 |
|||
color: Theme.current.noneDeep |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
Rectangle { |
|||
id: progressArea |
|||
width: (control.visualPosition * parent.width * 4 / 5) + (parent.width / 5) |
|||
height: parent.height |
|||
radius: height / 2 |
|||
color: "pink" |
|||
} |
|||
|
|||
Item { |
|||
id: progressGrad |
|||
anchors.fill: progressArea |
|||
|
|||
layer.enabled: true |
|||
layer.effect: OpacityMask { |
|||
maskSource: progressArea |
|||
} |
|||
|
|||
Rectangle { |
|||
width: parent.width |
|||
height: parent.height |
|||
color: "transparent" |
|||
|
|||
LinearGradient { |
|||
anchors.fill: parent |
|||
start: Qt.point(parent.width / 2 , parent.height) |
|||
end: Qt.point(0, 0) |
|||
gradient: Gradient { |
|||
GradientStop { |
|||
position: 0 |
|||
color: main.color |
|||
} |
|||
|
|||
GradientStop { |
|||
position: 1 |
|||
color: main.colorDeep |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
DropShadow { |
|||
id: dropDown |
|||
anchors.fill: backgroundObject |
|||
source: backgroundObject |
|||
horizontalOffset: 3 |
|||
verticalOffset: 3 |
|||
radius: 4 |
|||
samples: 8 |
|||
color: Theme.current.light |
|||
} |
|||
|
|||
DropShadow { |
|||
id: dropUp |
|||
anchors.fill: backgroundObject |
|||
source: backgroundObject |
|||
horizontalOffset: - 3 |
|||
verticalOffset: - 3 |
|||
radius: 4 |
|||
samples: 8 |
|||
color: Theme.current.light |
|||
} |
|||
|
|||
InnerShadow { |
|||
id: inner |
|||
anchors.fill: backgroundObject |
|||
source: backgroundObject |
|||
horizontalOffset: 3 |
|||
verticalOffset: 3 |
|||
radius: 3 |
|||
samples: 6 |
|||
smooth: true |
|||
color: Theme.current.lightShadow |
|||
} |
|||
} |
|||
|
|||
handle: KnobImage { |
|||
id: knob |
|||
x: control.leftPadding + (control.visualPosition * control.availableWidth) - width / 2 |
|||
y: control.topPadding + control.availableHeight / 2 - height / 2 |
|||
implicitWidth: sliderSize |
|||
implicitHeight: sliderSize |
|||
radius: implicitHeight / 2 |
|||
|
|||
Item { |
|||
width: parent.width |
|||
height: parent.height |
|||
anchors.centerIn: knob |
|||
|
|||
Text { |
|||
horizontalAlignment: Text.horizontalCenter |
|||
text: control.value |
|||
color: Theme.current.text |
|||
anchors.verticalCenter: parent.verticalCenter |
|||
anchors.horizontalCenter: parent.horizontalCenter |
|||
} |
|||
|
|||
transform: Rotation { |
|||
origin { |
|||
x: knob.width / 2 |
|||
y: knob.height / 2 |
|||
} |
|||
|
|||
axis { |
|||
z: 0 |
|||
x: 0 |
|||
y: 1 |
|||
} |
|||
|
|||
angle: flip ? 180 : 0 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
@ -0,0 +1,18 @@ |
|||
import QtQuick 2.0 |
|||
|
|||
import de.skycoder42.QtMvvm.Core 1.0 |
|||
import de.skycoder42.QtMvvm.Quick 1.0 |
|||
import com.example.consoleemulator 1.0 |
|||
|
|||
import "qrc:/qtmvvm/views" |
|||
import "qrc:/const" |
|||
import "qrc:/emulator/components" |
|||
|
|||
SliderBar { |
|||
property var name: "" |
|||
MvvmBinding { |
|||
viewModel: mainView.viewModel |
|||
viewProperty: "value" |
|||
viewModelProperty: name |
|||
} |
|||
} |
|||
@ -0,0 +1,85 @@ |
|||
import QtQuick 2.0 |
|||
|
|||
import "qrc:/emulator/components" |
|||
import "qrc:/emulator/elements" |
|||
import "qrc:/const" |
|||
import "qrc:/theme" |
|||
|
|||
Item { |
|||
width: childrenRect.width |
|||
height: childrenRect.height |
|||
|
|||
Column { |
|||
spacing: 15 |
|||
|
|||
Item { |
|||
width: Const.textWidth |
|||
implicitHeight: Const.textHeight |
|||
|
|||
Text { |
|||
horizontalAlignment: Text.horizontalCenter |
|||
text: "Incremental step" |
|||
color: Theme.current.text |
|||
anchors.verticalCenter: parent.verticalCenter |
|||
} |
|||
} |
|||
|
|||
SliderBarBind { |
|||
name: "stepInc" |
|||
} |
|||
|
|||
Item { |
|||
width: Const.textWidth |
|||
implicitHeight: Const.textHeight |
|||
|
|||
Text { |
|||
horizontalAlignment: Text.horizontalCenter |
|||
text: "Decremental step" |
|||
color: Theme.current.text |
|||
} |
|||
} |
|||
|
|||
SliderBarBind { |
|||
name: "stepDec" |
|||
color: Theme.current.yellow |
|||
colorDeep: Theme.current.yellowDeep |
|||
flip: true |
|||
} |
|||
|
|||
Row { |
|||
width: Const.sliderWidth |
|||
height: Const.sliderHeight |
|||
|
|||
Item { |
|||
width: Const.textWidth / 3 |
|||
height: Const.textHeight |
|||
anchors.verticalCenter: parent.verticalCenter |
|||
Text { |
|||
anchors.verticalCenter: parent.verticalCenter |
|||
horizontalAlignment: Text.horizontalCenter |
|||
text: "Theme" |
|||
color: Theme.current.text |
|||
} |
|||
} |
|||
|
|||
NeuLight { |
|||
anchors.verticalCenter: parent.verticalCenter |
|||
colorMode: 0 |
|||
width: Const.microButton |
|||
height: Const.microButton |
|||
image: Theme.current=== Theme.dark ? "qrc:/icons/uiMode/light.svg" : |
|||
"qrc:/icons/uiMode/dark.svg" |
|||
MouseArea{ |
|||
anchors.fill: parent |
|||
onClicked: { |
|||
if(Theme.current=== Theme.dark) { |
|||
Theme.current = Theme.light |
|||
} else { |
|||
Theme.current = Theme.dark |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue