mirror of https://github.com/cutefishos/settings
Redesign the background page
cutefishd
5 years ago
parent
49bbae1c20
commit
8174817502
@ -1,104 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import QtGraphicalEffects 1.0
|
||||
import Cutefish.Settings 1.0
|
||||
import MeuiKit 1.0 as Meui
|
||||
|
||||
ItemPage {
|
||||
headerTitle: qsTr("Wallpaper")
|
||||
|
||||
Background {
|
||||
id: background
|
||||
}
|
||||
|
||||
GridView {
|
||||
anchors.fill: parent
|
||||
leftMargin: Meui.Units.smallSpacing
|
||||
|
||||
cellWidth: 320
|
||||
cellHeight: 180
|
||||
|
||||
clip: true
|
||||
model: background.backgrounds
|
||||
|
||||
currentIndex: -1
|
||||
|
||||
ScrollBar.vertical: ScrollBar {
|
||||
bottomPadding: Meui.Theme.smallRadius
|
||||
}
|
||||
|
||||
delegate: Item {
|
||||
id: item
|
||||
|
||||
// required property variant modelData
|
||||
property bool isSelected: modelData === background.currentBackgroundPath
|
||||
|
||||
width: GridView.view.cellWidth
|
||||
height: GridView.view.cellHeight
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Meui.Units.largeSpacing
|
||||
anchors.rightMargin: Meui.Units.largeSpacing
|
||||
anchors.topMargin: Meui.Units.smallSpacing
|
||||
anchors.bottomMargin: Meui.Units.smallSpacing
|
||||
color: "transparent"
|
||||
radius: Meui.Theme.bigRadius + Meui.Units.smallSpacing / 2
|
||||
|
||||
border.color: Meui.Theme.highlightColor
|
||||
border.width: image.status == Image.Ready & isSelected ? 3 : 0
|
||||
|
||||
Image {
|
||||
id: image
|
||||
anchors.fill: parent
|
||||
anchors.margins: Meui.Units.smallSpacing
|
||||
source: "file://" + modelData
|
||||
sourceSize: Qt.size(width, height)
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
asynchronous: true
|
||||
mipmap: true
|
||||
cache: true
|
||||
opacity: 1.0
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: 100
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
}
|
||||
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
maskSource: Item {
|
||||
width: image.width
|
||||
height: image.height
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: Meui.Theme.bigRadius
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.LeftButton
|
||||
hoverEnabled: true
|
||||
|
||||
onClicked: {
|
||||
background.setBackground(modelData)
|
||||
}
|
||||
|
||||
onEntered: function() {
|
||||
image.opacity = 0.7
|
||||
}
|
||||
onExited: function() {
|
||||
image.opacity = 1.0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,211 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import QtGraphicalEffects 1.0
|
||||
import Cutefish.Settings 1.0
|
||||
import MeuiKit 1.0 as Meui
|
||||
|
||||
import "../"
|
||||
|
||||
ItemPage {
|
||||
headerTitle: qsTr("Background")
|
||||
|
||||
Background {
|
||||
id: background
|
||||
}
|
||||
|
||||
Scrollable {
|
||||
anchors.fill: parent
|
||||
contentHeight: layout.implicitHeight
|
||||
|
||||
ColumnLayout {
|
||||
id: layout
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: Meui.Units.smallSpacing
|
||||
spacing: Meui.Units.largeSpacing
|
||||
|
||||
DesktopPreview {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
width: 500
|
||||
height: 300
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
spacing: Meui.Units.largeSpacing * 2
|
||||
|
||||
Label {
|
||||
text: qsTr("Background type")
|
||||
}
|
||||
|
||||
TabBar {
|
||||
Layout.fillWidth: true
|
||||
onCurrentIndexChanged: {
|
||||
background.backgroundType = currentIndex
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
currentIndex = background.backgroundType
|
||||
}
|
||||
|
||||
TabButton {
|
||||
text: qsTr("Picture")
|
||||
}
|
||||
|
||||
TabButton {
|
||||
text: qsTr("Color")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
Layout.fillWidth: true
|
||||
height: item.height
|
||||
sourceComponent: background.backgroundType === 0 ? imageView : colorView
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: imageView
|
||||
|
||||
ListView {
|
||||
id: _view
|
||||
Layout.fillWidth: true
|
||||
spacing: Meui.Units.smallSpacing
|
||||
orientation: Qt.Horizontal
|
||||
|
||||
height: 150
|
||||
clip: true
|
||||
model: background.backgrounds
|
||||
currentIndex: -1
|
||||
|
||||
delegate: Item {
|
||||
id: item
|
||||
|
||||
property bool isSelected: modelData === background.currentBackgroundPath
|
||||
|
||||
width: 200
|
||||
height: _view.height
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "transparent"
|
||||
radius: Meui.Theme.bigRadius + Meui.Units.smallSpacing / 2
|
||||
|
||||
border.color: Meui.Theme.highlightColor
|
||||
border.width: image.status == Image.Ready & isSelected ? 3 : 0
|
||||
|
||||
Image {
|
||||
id: image
|
||||
anchors.fill: parent
|
||||
anchors.margins: Meui.Units.smallSpacing
|
||||
source: "file://" + modelData
|
||||
sourceSize: Qt.size(width, height)
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
asynchronous: true
|
||||
mipmap: true
|
||||
cache: true
|
||||
opacity: 1.0
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: 100
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
}
|
||||
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
maskSource: Item {
|
||||
width: image.width
|
||||
height: image.height
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: Meui.Theme.bigRadius
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.LeftButton
|
||||
hoverEnabled: true
|
||||
|
||||
onClicked: {
|
||||
background.setBackground(modelData)
|
||||
}
|
||||
|
||||
onEntered: function() {
|
||||
image.opacity = 0.7
|
||||
}
|
||||
onExited: function() {
|
||||
image.opacity = 1.0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: colorView
|
||||
|
||||
GridView {
|
||||
id: _colorView
|
||||
Layout.fillWidth: true
|
||||
height: _colorView.count * cellHeight
|
||||
|
||||
cellWidth: 50
|
||||
cellHeight: 50
|
||||
|
||||
interactive: false
|
||||
model: ListModel {}
|
||||
|
||||
property var itemSize: 32
|
||||
|
||||
Component.onCompleted: {
|
||||
model.append({"bgColor": "#2B8ADA"})
|
||||
model.append({"bgColor": "#4DA4ED"})
|
||||
model.append({"bgColor": "#B7E786"})
|
||||
model.append({"bgColor": "#F2BB73"})
|
||||
model.append({"bgColor": "#EE72EB"})
|
||||
model.append({"bgColor": "#F0905A"})
|
||||
model.append({"bgColor": "#595959"})
|
||||
}
|
||||
|
||||
delegate: Rectangle {
|
||||
property bool checked: Qt.colorEqual(background.backgroundColor, bgColor)
|
||||
property color currentColor: bgColor
|
||||
|
||||
width: _colorView.itemSize + Meui.Units.largeSpacing
|
||||
height: width
|
||||
color: "transparent"
|
||||
radius: width / 2
|
||||
border.color: _mouseArea.pressed ? Qt.rgba(currentColor.r,
|
||||
currentColor.g,
|
||||
currentColor.b, 0.6)
|
||||
: Qt.rgba(currentColor.r,
|
||||
currentColor.g,
|
||||
currentColor.b, 0.4)
|
||||
border.width: checked ? 3 : _mouseArea.containsMouse ? 2 : 0
|
||||
|
||||
MouseArea {
|
||||
id: _mouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: background.backgroundColor = bgColor
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 32
|
||||
height: width
|
||||
anchors.centerIn: parent
|
||||
color: currentColor
|
||||
radius: width / 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,101 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import MeuiKit 1.0 as Meui
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
Item {
|
||||
id: control
|
||||
|
||||
Component {
|
||||
id: wallpaperItem
|
||||
|
||||
Image {
|
||||
id: image
|
||||
source: "file://" + background.currentBackgroundPath
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: colorItem
|
||||
|
||||
Rectangle {
|
||||
color: background.backgroundColor
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: bgLoader
|
||||
anchors.fill: parent
|
||||
|
||||
sourceComponent: {
|
||||
if (background.backgroundType === 0)
|
||||
return wallpaperItem
|
||||
|
||||
return colorItem
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: desktopItem
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
|
||||
anchors.leftMargin: 10
|
||||
anchors.topMargin: 10
|
||||
|
||||
width: 30
|
||||
height: width
|
||||
|
||||
radius: height * 0.2
|
||||
opacity: 0.5
|
||||
color: Meui.Theme.backgroundColor
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: desktopItem2
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.top: desktopItem.bottom
|
||||
|
||||
anchors.leftMargin: 10
|
||||
anchors.topMargin: 10
|
||||
|
||||
width: 30
|
||||
height: width
|
||||
|
||||
radius: height * 0.2
|
||||
opacity: 0.5
|
||||
color: Meui.Theme.backgroundColor
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: dockArea
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
anchors.leftMargin: 8
|
||||
anchors.rightMargin: 8
|
||||
anchors.bottomMargin: 8
|
||||
|
||||
height: 38
|
||||
radius: height * 0.3
|
||||
color: Meui.Theme.backgroundColor
|
||||
opacity: 0.7
|
||||
}
|
||||
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
maskSource: Item {
|
||||
width: control.width
|
||||
height: control.height
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: Meui.Theme.bigRadius
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue