mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-30 07:03:46 +08:00
update
This commit is contained in:
parent
221361369e
commit
18205851f6
@ -80,25 +80,25 @@ CustomWindow {
|
|||||||
id:flipable
|
id:flipable
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
property bool flipped: false
|
property bool flipped: false
|
||||||
|
property real flipAngle: 0
|
||||||
transform: Rotation {
|
transform: Rotation {
|
||||||
id: rotation
|
id: rotation
|
||||||
origin.x: flipable.width/2
|
origin.x: flipable.width/2
|
||||||
origin.y: flipable.height/2
|
origin.y: flipable.height/2
|
||||||
axis { x: 0; y: 1; z: 0 }
|
axis { x: 0; y: 1; z: 0 }
|
||||||
angle: 0
|
angle: flipable.flipAngle
|
||||||
|
|
||||||
}
|
}
|
||||||
states: State {
|
states: State {
|
||||||
name: "back"
|
PropertyChanges { target: flipable; flipAngle: 180 }
|
||||||
PropertyChanges { target: rotation; angle: 180 }
|
|
||||||
when: flipable.flipped
|
when: flipable.flipped
|
||||||
}
|
}
|
||||||
transitions: Transition {
|
transitions: Transition {
|
||||||
NumberAnimation { target: rotation; property: "angle"; duration: 1000 ; easing.type: Easing.OutQuad}
|
NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutQuad}
|
||||||
}
|
}
|
||||||
back: Item{
|
back: Item{
|
||||||
anchors.fill: flipable
|
anchors.fill: flipable
|
||||||
visible: rotation.angle !== 0
|
visible: flipable.flipAngle !== 0
|
||||||
FluAppBar {
|
FluAppBar {
|
||||||
anchors {
|
anchors {
|
||||||
top: parent.top
|
top: parent.top
|
||||||
@ -108,6 +108,7 @@ CustomWindow {
|
|||||||
darkText: lang.dark_mode
|
darkText: lang.dark_mode
|
||||||
showDark: true
|
showDark: true
|
||||||
z:7
|
z:7
|
||||||
|
darkClickListener:(button)=>handleDarkChanged(button)
|
||||||
}
|
}
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
iconSource: FluentIcons.ChromeBack
|
iconSource: FluentIcons.ChromeBack
|
||||||
@ -126,7 +127,8 @@ CustomWindow {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
front: Item{
|
front: Item{
|
||||||
visible: rotation.angle !== 180
|
id:page_front
|
||||||
|
visible: flipable.flipAngle !== 180
|
||||||
anchors.fill: flipable
|
anchors.fill: flipable
|
||||||
FluAppBar {
|
FluAppBar {
|
||||||
anchors {
|
anchors {
|
||||||
@ -136,6 +138,7 @@ CustomWindow {
|
|||||||
}
|
}
|
||||||
darkText: lang.dark_mode
|
darkText: lang.dark_mode
|
||||||
showDark: true
|
showDark: true
|
||||||
|
darkClickListener:(button)=>handleDarkChanged(button)
|
||||||
z:7
|
z:7
|
||||||
}
|
}
|
||||||
FluNavigationView{
|
FluNavigationView{
|
||||||
@ -182,4 +185,83 @@ CustomWindow {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Image{
|
||||||
|
id:img_cache
|
||||||
|
visible: false
|
||||||
|
anchors.fill: flipable
|
||||||
|
}
|
||||||
|
|
||||||
|
Canvas{
|
||||||
|
id:canvas
|
||||||
|
anchors.fill: flipable
|
||||||
|
property int centerX: canvas.width / 2
|
||||||
|
property int centerY: canvas.height / 2
|
||||||
|
property real radius: 0
|
||||||
|
property int maxRadius: 0
|
||||||
|
property url imageUrl
|
||||||
|
Behavior on radius{
|
||||||
|
id:anim_radius
|
||||||
|
NumberAnimation {
|
||||||
|
target: canvas
|
||||||
|
property: "radius"
|
||||||
|
duration: 666
|
||||||
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: [0,0,0,1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onRadiusChanged: {
|
||||||
|
canvas.requestPaint()
|
||||||
|
}
|
||||||
|
onPaint: {
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.save()
|
||||||
|
if(img_cache.source.toString().length!==0){
|
||||||
|
try{
|
||||||
|
ctx.drawImage(img_cache.source, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height)
|
||||||
|
}catch(e){
|
||||||
|
img_cache.source = ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
clearArc(ctx, centerX, centerY, radius)
|
||||||
|
ctx.restore()
|
||||||
|
}
|
||||||
|
function clearArc(ctx,x, y, radius, startAngle, endAngle) {
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.globalCompositeOperation = 'destination-out'
|
||||||
|
ctx.fillStyle = 'black'
|
||||||
|
ctx.arc(x, y, radius, 0, 2*Math.PI);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.closePath();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function distance(x1,y1,x2,y2){
|
||||||
|
return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDarkChanged(button){
|
||||||
|
var pos = button.mapToItem(flipable,0,0)
|
||||||
|
var mouseX = pos.x
|
||||||
|
var mouseY = pos.y
|
||||||
|
canvas.maxRadius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,canvas.width,0),distance(mouseX,mouseY,0,canvas.height),distance(mouseX,mouseY,canvas.width,canvas.height))
|
||||||
|
window.contentItem.grabToImage(function(result) {
|
||||||
|
img_cache.source = result.url
|
||||||
|
canvas.requestPaint()
|
||||||
|
if(FluTheme.dark){
|
||||||
|
FluTheme.darkMode = FluDarkMode.Light
|
||||||
|
}else{
|
||||||
|
FluTheme.darkMode = FluDarkMode.Dark
|
||||||
|
}
|
||||||
|
canvas.centerX = mouseX
|
||||||
|
canvas.centerY = mouseY
|
||||||
|
anim_radius.enabled = false
|
||||||
|
canvas.radius = 0
|
||||||
|
anim_radius.enabled = true
|
||||||
|
canvas.radius = canvas.maxRadius
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -22,6 +22,25 @@ Rectangle{
|
|||||||
property bool titleVisible: true
|
property bool titleVisible: true
|
||||||
property bool isMac: FluTools.isMacos()
|
property bool isMac: FluTools.isMacos()
|
||||||
property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
|
property var maxClickListener : function(){
|
||||||
|
if (d.win.visibility === Window.Maximized)
|
||||||
|
d.win.visibility = Window.Windowed
|
||||||
|
else
|
||||||
|
d.win.visibility = Window.Maximized
|
||||||
|
}
|
||||||
|
property var minClickListener: function(){
|
||||||
|
d.win.visibility = Window.Minimized
|
||||||
|
}
|
||||||
|
property var closeClickListener : function(){
|
||||||
|
d.win.close()
|
||||||
|
}
|
||||||
|
property var darkClickListener: function(){
|
||||||
|
if(FluTheme.dark){
|
||||||
|
FluTheme.darkMode = FluDarkMode.Light
|
||||||
|
}else{
|
||||||
|
FluTheme.darkMode = FluDarkMode.Dark
|
||||||
|
}
|
||||||
|
}
|
||||||
id:root
|
id:root
|
||||||
color: Qt.rgba(0,0,0,0)
|
color: Qt.rgba(0,0,0,0)
|
||||||
height: visible ? 30 : 0
|
height: visible ? 30 : 0
|
||||||
@ -67,14 +86,9 @@ Rectangle{
|
|||||||
color:root.textColor
|
color:root.textColor
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
|
id:btn_dark
|
||||||
checked: FluTheme.dark
|
checked: FluTheme.dark
|
||||||
clickListener: function(){
|
clickListener:()=> darkClickListener(btn_dark)
|
||||||
if(FluTheme.dark){
|
|
||||||
FluTheme.darkMode = FluDarkMode.Light
|
|
||||||
}else{
|
|
||||||
FluTheme.darkMode = FluDarkMode.Dark
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
@ -89,9 +103,7 @@ Rectangle{
|
|||||||
visible: !isMac
|
visible: !isMac
|
||||||
iconColor: root.textColor
|
iconColor: root.textColor
|
||||||
color: hovered ? minimizeHoverColor : minimizeNormalColor
|
color: hovered ? minimizeHoverColor : minimizeNormalColor
|
||||||
onClicked: {
|
onClicked: minClickListener()
|
||||||
d.win.visibility = Window.Minimized
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
id:btn_maximize
|
id:btn_maximize
|
||||||
@ -105,12 +117,7 @@ Rectangle{
|
|||||||
iconColor: root.textColor
|
iconColor: root.textColor
|
||||||
text:d.isRestore?restoreText:maximizeText
|
text:d.isRestore?restoreText:maximizeText
|
||||||
iconSize: 11
|
iconSize: 11
|
||||||
onClicked: {
|
onClicked: maxClickListener()
|
||||||
if (d.win.visibility === Window.Maximized)
|
|
||||||
d.win.visibility = Window.Windowed
|
|
||||||
else
|
|
||||||
d.win.visibility = Window.Maximized
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
id:btn_close
|
id:btn_close
|
||||||
@ -124,9 +131,7 @@ Rectangle{
|
|||||||
iconSize: 10
|
iconSize: 10
|
||||||
iconColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
|
iconColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
|
||||||
color:hovered ? closeHoverColor : closeNormalColor
|
color:hovered ? closeHoverColor : closeNormalColor
|
||||||
onClicked: {
|
onClicked: closeClickListener()
|
||||||
d.win.close()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user