Top bar integrated with on hover opacity effect

This commit is contained in:
Alexandre Van de Sande 2015-03-09 19:27:49 -03:00
parent 4486608a26
commit 03953d6bd1
7 changed files with 204 additions and 175 deletions

View file

@ -270,12 +270,22 @@ ApplicationWindow {
id: blockModel id: blockModel
} }
Rectangle { Rectangle {
id: windowChrome id: windowChrome
color: "#EBE8E8" color: "#EBE8E8"
anchors.fill: parent anchors.fill: parent
radius: 3 radius: 3
/************************/ /************************/
/* */ /* */
/* Resizeable Borders */ /* Resizeable Borders */
@ -348,30 +358,6 @@ ApplicationWindow {
} }
} }
MouseArea {
id: topResizableBar
anchors {
top: parent.top
right: parent.right
left: parent.left
}
height: 5
cursorShape: Qt.SizeVerCursor;
property real lastMouseY: 0
property real lastTop: root.y + root.height
onPressed: {
lastMouseY = mouseY
lastTop = root.y + root.height
}
onPositionChanged: {
if (!(root.height - mouseY + lastMouseY < root.minimumHeight)) {
root.height -= (mouseY - lastMouseY)
root.y = lastTop - root.height
}
}
}
MouseArea { MouseArea {
id: bottomRightResizableHandle id: bottomRightResizableHandle
anchors { anchors {
@ -398,51 +384,210 @@ ApplicationWindow {
} }
} }
} }
// Commenting this out because it's causing too many crashes
// MouseArea {
// id: bottomLeftResizableHandle
// anchors {
// bottom: parent.bottom
// left: parent.left
// }
// width: 5
// height: 5
// cursorShape: Qt.SizeBDiagCursor;
// Rectangle {
// anchors.fill: parent
// color: "red"
// }
// property real lastMouseX: 0
// property real lastMouseY: 0
// property real lastRight: root.x + root.width
// onPressed: {
// lastMouseX = mouseX
// lastMouseY = mouseY
// lastRight = root.x + root.width
// }
// onPositionChanged: {
// if (!(root.width + mouseX - lastMouseX < root.minimumWidth)) {
// root.width += (mouseX - lastMouseX)
// }
// if (!(root.height - mouseY + lastMouseY < root.minimumHeight)) {
// root.height -= (mouseY - lastMouseY)
// root.y = lastTop - root.height
// }
// }
// }
} }
Rectangle {
id: topBar
anchors {
top: parent.top
left: parent.left
right: parent.right
}
height: 18.4
z: 100
color: "transparent"
MouseArea {
id: menuMouseArea
anchors.fill: parent
property real lastMouseX: 0
property real lastMouseY: 0
hoverEnabled: true
onPressed: {
lastMouseX = mouseX
lastMouseY = mouseY
}
onPositionChanged: {
if (menuMouseArea.pressed){
root.x += (mouseX - lastMouseX)
root.y += (mouseY - lastMouseY)
}
}
onEntered: {
topBar.state = "hovered"
}
onExited: {
topBar.state = "normal"
}
}
// gradient: Gradient {
// GradientStop { position: 0.0; color: "#FFFFFFFF" }
// GradientStop { position: 1.0; color: "#00FFFFFF" }
// }
Rectangle {
anchors {
top: parent.top
right: parent.right
bottom: parent.bottom
left: parent.left
leftMargin: 194
}
radius: 3
gradient: Gradient {
GradientStop { position: 0.0; color: "#FFFFFFFF" }
GradientStop { position: 1.0; color: "#00FFFFFF" }
}
}
Rectangle {
id: topbarBackground
anchors.fill: parent
opacity: 0.0
radius: 3
color: "#AAA0A0"
}
states: [
State {
name: "normal"
when: menuMouseArea.hovered
PropertyChanges {
target: topbarBackground
opacity: 0
}
},
State {
name: "hovered"
when: menuMouseArea.hovered
PropertyChanges {
target: topbarBackground
opacity: 1
}
}]
transitions: Transition {
NumberAnimation {
properties: "opacity"
duration: 250
easing.type: Easing.InOutQuad
}
}
/************************/
/* Semafor Buttons */
/************************/
Rectangle {
id: semaforButtons
color: "transparent"
height: 32
anchors {
top: parent.top
left: parent.left
right: parent.right
}
Rectangle {
color: 'transparent'
width: 13
height: 20
x: 3
Image {
height: 13
width: 13
source: toolbarCloseButton.containsMouse ? "../window-control/window-close.png" : "../window-control/window-close-hover.png"
anchors.centerIn: parent
MouseArea {
id: toolbarCloseButton
anchors.fill: parent
hoverEnabled: true
onClicked: Qt.quit() //gui.stop();
onEntered: {
topBar.state = "hovered"
}
}
}
}
Rectangle {
color: 'transparent'
width: 13
height: 20
x: 21
Image {
height: 13
width: 13
source: toolbarminimizeButton.containsMouse ? "../window-control/window-minimize.png" : "../window-control/window-minimize-hover.png"
anchors.centerIn: parent
MouseArea {
id: toolbarminimizeButton
anchors.fill: parent
hoverEnabled: true
onClicked: {
console.log("Minimize");
// Neither works..
//root.visibility = QWindow.minimized;
// root.showMinimized();
}
onEntered: {
topBar.state = "hovered"
console.log(topBar.state )
}
}
}
}
Rectangle {
color: 'transparent'
width: 13
height: 20
x: 40
Image {
height: 13
width: 13
source: toolbarzoomButton.containsMouse ? "../window-control/window-zoom.png" : "../window-control/window-zoom-hover.png"
anchors.centerIn: parent
MouseArea {
id: toolbarzoomButton
anchors.fill: parent
hoverEnabled: true
onClicked: {
console.log("Maximize");
// Neither works..
//root.visibility = QWindow.maximized;
//root.showMaximized();
}
onEntered: {
topBar.state = "hovered"
}
}
}
}
}
}
SplitView { SplitView {
property var views: []; property var views: [];
id: mainSplit id: mainSplit
anchors.fill: windowChrome anchors.fill: windowChrome
anchors.margins: 2 anchors.margins: 2
z: 50
//color: "brown" //color: "brown"
//radius: 5 //radius: 5
@ -484,6 +629,8 @@ ApplicationWindow {
return {view: view, menuItem: menuItem} return {view: view, menuItem: menuItem}
} }
/********************* /*********************
* Main menu. * Main menu.
********************/ ********************/
@ -851,94 +998,6 @@ ApplicationWindow {
return comp return comp
} }
/************************/
/* Semafor Buttons */
/************************/
Rectangle {
id: semaforButtons
color: "transparent"
height: 32
anchors {
top: parent.top
left: parent.left
right: parent.right
}
Rectangle {
color: 'transparent'
width: 13
height: 20
x: 3
Image {
height: 13
width: 13
source: toolbarCloseButton.containsMouse ? "../window-control/window-close.png" : "../window-control/window-close-hover.png"
anchors.centerIn: parent
MouseArea {
id: toolbarCloseButton
anchors.fill: parent
hoverEnabled: true
onClicked: Qt.quit() //gui.stop();
}
}
}
Rectangle {
color: 'transparent'
width: 13
height: 20
x: 21
Image {
height: 13
width: 13
source: toolbarminimizeButton.containsMouse ? "../window-control/window-minimize.png" : "../window-control/window-minimize-hover.png"
anchors.centerIn: parent
MouseArea {
id: toolbarminimizeButton
anchors.fill: parent
hoverEnabled: true
onClicked: {
console.log("Minimize");
// Neither works..
//root.visibility = QWindow.minimized;
// root.showMinimized();
}
}
}
}
Rectangle {
color: 'transparent'
width: 13
height: 20
x: 40
Image {
height: 13
width: 13
source: toolbarzoomButton.containsMouse ? "../window-control/window-zoom.png" : "../window-control/window-zoom-hover.png"
anchors.centerIn: parent
MouseArea {
id: toolbarzoomButton
anchors.fill: parent
hoverEnabled: true
onClicked: {
console.log("Maximize");
// Neither works..
//root.visibility = QWindow.maximized;
//root.showMaximized();
} }
}
}
}
ColumnLayout { ColumnLayout {
id: menuColumn id: menuColumn
@ -1059,36 +1118,6 @@ ApplicationWindow {
anchors.top: parent.top anchors.top: parent.top
color: "#00000000" color: "#00000000"
Rectangle {
id: topMovingHandle
anchors {
top: parent.top
left: parent.left
right: parent.right
}
height: 37
z: 100
MouseArea {
anchors.fill: parent
property real lastMouseX: 0
property real lastMouseY: 0
onPressed: {
lastMouseX = mouseX
lastMouseY = mouseY
}
onPositionChanged: {
root.x += (mouseX - lastMouseX)
root.y += (mouseY - lastMouseY)
}
}
gradient: Gradient {
GradientStop { position: 0.0; color: "#FFFFFFFF" }
GradientStop { position: 1.0; color: "#00FFFFFF" }
}
}
Rectangle { Rectangle {
id: mainView id: mainView
color: "#00000000" color: "#00000000"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 448 B

After

Width:  |  Height:  |  Size: 479 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 894 B

After

Width:  |  Height:  |  Size: 920 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 378 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 706 B

After

Width:  |  Height:  |  Size: 748 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 368 B

After

Width:  |  Height:  |  Size: 406 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 720 B

After

Width:  |  Height:  |  Size: 775 B