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