Commit 4e4a07af authored by Teemu Tamminen's avatar Teemu Tamminen
Browse files

Responsive design ui demo

parent 52a1b455
import QtQuick 2.12
import ResponsiveUiDesign 1.0
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
import QtMultimedia 5.15
Rectangle {
id: background
width: 1080
height: 720
color: "#595d88"
clip:true
radius: 50
border.width: 7
gradient: Gradient {
GradientStop { position: 0.0; color: "#595d88" }
GradientStop { position: 1.0; color: "lightsteelblue" }
}
readonly property int itemSize: 200
Item {
anchors.fill: bacground
layer.enabled: true
layer.effect: OpacityMask {
maskSource: bacground
}
Rectangle {
id: leftarea
y: 0
width: 329
height: parent.height
color: "#595d88"
radius: 50
border.width: 5
anchors.left: parent.left
anchors.leftMargin: 0
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "#595d88" }
}
// Slider {
// id: imagescaleslider
// from: 100
// value: 200
// to: 200
// anchors.top: titlerect.bottom
// anchors.horizontalCenter: titlerect.horizontalCenter
// }
CheckBox {
id: control
rotation: 45
y: 323
width: 50
height: 50
anchors.left: leftarea.right
anchors.verticalCenterOffset: 0
anchors.leftMargin: -27
anchors.verticalCenter: leftarea.verticalCenter
indicator: Rectangle {
color: "#595d88"
implicitWidth: 50
implicitHeight: 50
opacity: 1
radius: 7
border.color: "#000000"
border.width: 4
gradient: Gradient {
GradientStop { position: 0.1; color: "white" }
GradientStop { position: 1.0; color: "#595d88" }
}
}
}
}
Rectangle {
id: imgArea
x: 0
color: "transparent"
radius: 50
border.width: 0
anchors.left: leftarea.right
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.rightMargin: 0
clip:true
Grid {
id: grid
anchors.fill: parent
layoutDirection: Qt.LeftToRight
flow: Grid.LeftToRight
verticalItemAlignment: Grid.AlignVCenter
horizontalItemAlignment: Grid.AlignHCenter
anchors.centerIn: parent
spacing: 10
rightPadding: 10
leftPadding: 60
bottomPadding: 10
topPadding: 60
columns: width / (itemSize + spacing + 20)
onColumnsChanged: {
for (var i = 0; i < rects.count; ++i) {
var item = rects.itemAt(i)
item.targetX = item.x
item.targetY = item.y
item.origX = item.x
item.origY = item.y
}
}
Repeater {
id: rects
model: imgs.count
Rectangle {
property real origX: 0
property real origY: 0
property real targetX: 0
property real targetY: 0
width: itemSize
height: itemSize
color: "transparent"
}
}
}
Repeater {
id: imgs
model: ["gradient1.jpg",
"gradient2.jpg",
"gradient2.jpg",
"gradient3.jpg",
"gradient4.jpg",
"gradient5.jpg",
"gradient6.jpg",
"gradient7.jpg",
"gradient8.jpg",
"gradient9.jpg",
"gradient10.jpg",
"gradient11.jpg",
"gradient12.jpg"]
Item {
id: imgpiece
property alias isHovered: mouseArea.containsMouse
width: itemSize
height: itemSize
layer.enabled: true
layer.effect: OpacityMask {
maskSource: maskrect
}
Image {
id:imgpieceArt
anchors.fill: parent
source: modelData
}
Rectangle {
id: maskrect
anchors.fill: parent
radius: 20
opacity: 0.01
}
Rectangle {
id: edge
anchors.fill: parent
radius: 20
color: "transparent"
border.width: 5 * imgpiece.scale
border.color: "white"
}
ColorAnimation {
running: mouseArea.containsMouse
target: edge
property: "border.color"
to: "white"
duration: 250
}
ColorAnimation {
running: !mouseArea.containsMouse
target: edge
property: "border.color"
to: "grey"
duration: 250
}
MouseArea {
id: mouseArea
hoverEnabled: true
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onContainsMouseChanged: {
var row = (rects.itemAt(model.index).y - grid.topPadding) / (grid.spacing + itemSize);
var col = (rects.itemAt(model.index).x - grid.leftPadding) / (grid.spacing + itemSize);
for (var c = 0; c < grid.columns; ++c) {
if (c !== col) {
var idxH = row * grid.columns + c;
if (idxH < imgs.count)
rects.itemAt(idxH).targetX = rects.itemAt(idxH).origX + (containsMouse ? 20 : 0) * (c < col ? -1 : 1)
}
}
var rows = Math.ceil(imgs.count / grid.columns)
for (var r = 0; r < rows; ++r) {
if (r !== row) {
var idxV = r * grid.columns + col;
if (idxV < imgs.count)
rects.itemAt(idxV).targetY = rects.itemAt(idxV).origY + (containsMouse ? 20 : 0) * (r < row ? -1 : 1)
}
}
}
onClicked: {
//console.log("TODO: expand")
showArt.source = imgpieceArt.source
imgpieceBig.visible = true
}
}
}
}
Item {
id: imgpieceBig
width: 500
height: 500
visible: false
anchors.centerIn: parent
layer.enabled: true
layer.effect: OpacityMask {
maskSource: maskrect2
}
Image {
id:showArt
anchors.fill: parent
source: "gradient1.jpg"
}
Rectangle {
id: maskrect2
anchors.fill: parent
radius: 20
opacity: 0.01
}
Rectangle {
id: edge2
anchors.fill: parent
radius: 20
color: "transparent"
border.width: 5
border.color: "white"
}
Button {
x:440
y:10
width: 50
height: 50
highlighted: false
onClicked: parent.visible = false
background: Rectangle {
id: buttonbg
anchors.fill: parent
color: "transparent"
}
Image {
id:buttonclose
anchors.fill: parent
source: "close"
}
}
}
}
Timer {
interval: 50
repeat: true
running: true
onTriggered: {
for (var i = 0; i < rects.count; ++i) {
imgs.itemAt(i).x += (rects.itemAt(i).targetX - imgs.itemAt(i).x) / 3
imgs.itemAt(i).y += (rects.itemAt(i).targetY - imgs.itemAt(i).y) / 3
imgs.itemAt(i).scale += ((imgs.itemAt(i).isHovered ? 1.2 : 1) - imgs.itemAt(i).scale) / 3
}
}
}
states: [
State {
name: "State1"
when: control.checked
PropertyChanges {
target: leftarea
y: 0
anchors.leftMargin: -328
}
}
]
transitions: Transition {
from: "*"; to: "*";
NumberAnimation { target: leftarea; property: "anchors.leftMargin"; duration: 500; easing.type: Easing.InOutQuad }
}
Rectangle {
id: rectangleedge
anchors.fill: parent
color: "transparent"
border.color: "black"
border.width: 5
radius: 50
}
}
}
/*##^##
Designer {
D{i:0;formeditorZoom:0.66}
}
##^##*/
import QtQuick 2.12
import ResponsiveUiDesign 1.0
Item {
width: Constants.width
height: Constants.height
Screen01 {
}
}
/* File generated by Qt Creator */
import QmlProject 1.1
Project {
mainFile: "ResponsiveUiDesign.qml"
/* Include .qml, .js, and image files from current directory and subdirectories */
QmlFiles {
directory: "."
}
JavaScriptFiles {
directory: "."
}
ImageFiles {
directory: "."
}
Files {
filter: "*.conf"
files: ["qtquickcontrols2.conf"]
}
Files {
filter: "qmldir"
directory: "."
}
Files {
filter: "*.ttf;*.otf"
}
Environment {
QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
QT_AUTO_SCREEN_SCALE_FACTOR: "1"
}
/* List of plugin directories passed to QML runtime */
importPaths: [ "imports", "asset_imports" ]
/* Required for deployment */
targetDirectory: "/opt/ResponsiveUiDesign"
}
import QtQuick 2.12
import ResponsiveUiDesign 1.0
import QtQuick.Controls 2.15
import QtQuick.Window 2.0
ApplicationWindow {
id: win
title: qsTr("Hello World")
width: Constants.width
height: Constants.height
flags: Qt.Tool | Qt.FramelessWindowHint | Qt.WindowSystemMenuHint | Qt.WindowStaysOnTopHint
color: "transparent"
visible: true
Bacground {
id: bacground
radius: 50
anchors.fill: parent
}
Item {
id: root // Dummy item as mapToItem requires Item
anchors.fill: parent
Rectangle {
width: 30
height: 30
anchors.right: parent.right
anchors.bottom: parent.bottom
color: "transparent"
MouseArea {
anchors.fill: parent
onPositionChanged: {
win.width += mapToItem(root,mouseX,mouseY).x-root.width
win.height += mapToItem(root,mouseX,mouseY).y-root.height
}
}
}
Rectangle {
width: win.width-80
height: 10
anchors.left: parent.left
anchors.leftMargin: 40
anchors.top: parent.top
color: "transparent"
MouseArea {
anchors.fill: parent
property int startX
property int startY
onPressed: {
startX = mouseX
startY = mouseY
}
onPositionChanged: {
win.x += mouseX - startX
win.y += mouseY - startY
}
}
}
Rectangle {
width: win.width-80
height: 10
anchors.left: parent.left
anchors.leftMargin: 40
anchors.bottom: parent.bottom
color: "transparent"
MouseArea {
anchors.fill: parent
property int startX
property int startY
onPressed: {
startX = mouseX
startY = mouseY
}
onPositionChanged: {
win.height += mouseY - startY
}
}
}
Rectangle {
width: 10
height: win.height-80
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.bottomMargin: 40
color: "transparent"
MouseArea {
anchors.fill: parent
property int startX
property int startY
onPressed: {
startX = mouseX
startY = mouseY
}
onPositionChanged: {
win.width += mouseX - startX
}
}
}
Rectangle {
width: 10
height: win.height-80
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.bottomMargin: 40
color: "transparent"
MouseArea {
anchors.fill: parent
property int startX
property int startY
onPressed: {
startX = mouseX
startY = mouseY
}
onPositionChanged: {
win.x += mouseX - startX
win.width -= mouseX - startX
}
}
}
Rectangle {
width: 30
height: 30
anchors.left: parent.left
anchors.bottom: parent.bottom
color: "transparent"
MouseArea {
anchors.fill: parent
property int startX
property int startY
onPressed: {
startX = mouseX
startY = mouseY
}
onPositionChanged: {
win.x += mouseX - startX
win.width -= mouseX - startX
win.height += mouseY + startY
}
}
}
}
}
/*##^##
Designer {
D{i:0;formeditorZoom:0.5}
}
##^##*/
Fonts in this folder are loaded automatically.