Adjust UI

pull/3/head
cutefishd 5 years ago
parent 61e168b25a
commit 00a46f5553

@ -16,6 +16,8 @@ QtObject {
*/
property int gridUnit: fontMetrics.height
property int extendBorderWidth: 3
/**
* units.iconSizes provides access to platform-dependent icon sizing
*

@ -6,8 +6,9 @@ import QtQuick.Controls.impl 2.4
T.Button
{
id: control
implicitWidth: Math.max(background.implicitWidth, contentItem.implicitWidth + Meui.Units.largeSpacing)
implicitHeight: background.implicitHeight
implicitWidth: Math.max(background.implicitWidth + Meui.Units.extendBorderWidth,
contentItem.implicitWidth + Meui.Units.largeSpacing + Meui.Units.extendBorderWidth)
implicitHeight: background.implicitHeight + Meui.Units.extendBorderWidth
hoverEnabled: true
property color hoveredColor: Qt.tint(Meui.Theme.textColor, Qt.rgba(Meui.Theme.backgroundColor.r,
@ -37,15 +38,32 @@ T.Button
alignment: Qt.AlignCenter
}
background: Rectangle {
implicitWidth: (Meui.Units.iconSizes.medium * 3) + Meui.Units.largeSpacing
implicitHeight: Meui.Units.iconSizes.medium + Meui.Units.smallSpacing
background: Item {
implicitWidth: (Meui.Units.iconSizes.medium * 3) + Meui.Units.largeSpacing + Meui.Units.extendBorderWidth
implicitHeight: Meui.Units.iconSizes.medium + Meui.Units.smallSpacing + Meui.Units.extendBorderWidth
color: control.flat && control.enabled ? control.pressed ? control.flatPressedColor : control.hovered ? control.flatHoveredColor : Meui.Theme.highlightColor
: control.pressed ? control.pressedColor : control.hovered ? control.hoveredColor : Meui.Theme.backgroundColor
border.color: control.flat && control.enabled ? Meui.Theme.highlightColor : control.activeFocus || control.pressed ? Meui.Theme.highlightColor :
Qt.tint(Meui.Theme.textColor, Qt.rgba(Meui.Theme.backgroundColor.r, Meui.Theme.backgroundColor.g, Meui.Theme.backgroundColor.b, 0.7))
border.width: control.pressed ? 0 : Meui.Units.devicePixelRatio
radius: Meui.Theme.smallRadius
Rectangle {
id: _border
anchors.fill: parent
visible: control.activeFocus
color: "transparent"
border.color: Qt.rgba(Meui.Theme.highlightColor.r,
Meui.Theme.highlightColor.g,
Meui.Theme.highlightColor.b, 0.3)
border.width: Meui.Units.extendBorderWidth
radius: Meui.Theme.smallRadius
}
Rectangle {
anchors.fill: parent
anchors.margins: Meui.Units.extendBorderWidth
radius: Meui.Theme.smallRadius - Meui.Units.extendBorderWidth
border.color: control.flat && control.enabled ? Meui.Theme.highlightColor : control.activeFocus || control.pressed ? Meui.Theme.highlightColor :
Qt.tint(Meui.Theme.textColor, Qt.rgba(Meui.Theme.backgroundColor.r, Meui.Theme.backgroundColor.g, Meui.Theme.backgroundColor.b, 0.7))
border.width: 1
color: control.flat && control.enabled ? control.pressed ? control.flatPressedColor : control.hovered ? control.flatHoveredColor : Meui.Theme.highlightColor
: control.pressed ? control.pressedColor : control.hovered ? control.hoveredColor : Meui.Theme.backgroundColor
}
}
}

@ -45,11 +45,11 @@ import MeuiKit 1.0 as Meui
T.ComboBox {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset + Meui.Units.extendBorderWidth,
implicitContentWidth + leftPadding + rightPadding + Meui.Units.extendBorderWidth)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset + Meui.Units.extendBorderWidth,
implicitContentHeight + topPadding + bottomPadding + Meui.Units.extendBorderWidth,
implicitIndicatorHeight + topPadding + bottomPadding + Meui.Units.extendBorderWidth)
topInset: Meui.Units.smallSpacing
bottomInset: Meui.Units.smallSpacing
@ -105,15 +105,36 @@ T.ComboBox {
color: !control.editable ? control.Meui.Theme.backgroundColor : "transparent"
border.color: Qt.tint(Meui.Theme.textColor, Qt.rgba(Meui.Theme.backgroundColor.r, Meui.Theme.backgroundColor.g, Meui.Theme.backgroundColor.b, 0.7))
Rectangle {
id: _border
anchors.fill: parent
visible: control.activeFocus
color: "transparent"
border.color: Qt.rgba(Meui.Theme.highlightColor.r,
Meui.Theme.highlightColor.g,
Meui.Theme.highlightColor.b, 0.3)
border.width: Meui.Units.extendBorderWidth
radius: Meui.Theme.smallRadius
}
Rectangle {
visible: control.editable
y: parent.y + control.baselineOffset
width: parent.width
height: control.activeFocus ? 2 : 1
color: control.editable && control.activeFocus ? control.Meui.Theme.highlightColor : control.Meui.Theme.highlightedTextColor
anchors.fill: parent
anchors.margins: Meui.Units.extendBorderWidth
radius: Meui.Theme.smallRadius - Meui.Units.extendBorderWidth
color: "transparent"
border.color: control.activeFocus ? Meui.Theme.highlightColor : Qt.tint(Meui.Theme.textColor, Qt.rgba(Meui.Theme.backgroundColor.r, Meui.Theme.backgroundColor.g, Meui.Theme.backgroundColor.b, 0.7))
border.width: 1
}
// border.color: control.activeFocus ? Meui.Theme.highlightColor : Qt.tint(Meui.Theme.textColor, Qt.rgba(Meui.Theme.backgroundColor.r, Meui.Theme.backgroundColor.g, Meui.Theme.backgroundColor.b, 0.7))
// Rectangle {
// visible: control.editable
// y: parent.y + control.baselineOffset
// width: parent.width
// height: control.activeFocus ? 2 : 1
// color: control.editable && control.activeFocus ? control.Meui.Theme.highlightColor : control.Meui.Theme.highlightedTextColor
// }
}
popup: T.Popup {

@ -44,7 +44,7 @@ T.Dialog {
from: 0
to: 1
easing.type: Easing.InOutCubic
duration: 250
duration: 200
}
}
@ -54,7 +54,7 @@ T.Dialog {
from: 1
to: 0
easing.type: Easing.InOutCubic
duration: 250
duration: 200
}
}

@ -24,7 +24,7 @@ T.Label {
color: Meui.Theme.textColor
linkColor: Meui.Theme.linkColor
opacity: enabled? 1 : 0.6
opacity: enabled ? 1 : 0.6
Accessible.role: Accessible.StaticText
Accessible.name: text

@ -31,14 +31,14 @@ T.TextField {
implicitWidth: Math.max(200,
placeholderText ? placeholder.implicitWidth + leftPadding + rightPadding : 0)
|| contentWidth + leftPadding + rightPadding
|| contentWidth + leftPadding + rightPadding + Meui.Units.extendBorderWidth
implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
background ? background.implicitHeight : 0,
placeholder.implicitHeight + topPadding + bottomPadding)
placeholder.implicitHeight + topPadding + bottomPadding + Meui.Units.extendBorderWidth)
// padding: 6
leftPadding: Meui.Units.smallSpacing
rightPadding: Meui.Units.smallSpacing
leftPadding: Meui.Units.smallSpacing + Meui.Units.extendBorderWidth
rightPadding: Meui.Units.smallSpacing + Meui.Units.extendBorderWidth
//Text.NativeRendering is broken on non integer pixel ratios
renderType: Window.devicePixelRatio % 1 !== 0 ? Text.QtRendering : Text.NativeRendering
@ -73,24 +73,31 @@ T.TextField {
wrapMode: Text.NoWrap
}
background: Rectangle {
implicitWidth: 1 * 120
implicitHeight: Meui.Units.iconSizes.medium + Meui.Units.smallSpacing
color: control.activeFocus ? Qt.lighter(Meui.Theme.backgroundColor, 1.4)
: (control.hovered ? Qt.lighter(Meui.Theme.backgroundColor, 1.3) : Meui.Theme.backgroundColor)
background: Rectangle {
implicitWidth: (Meui.Units.iconSizes.medium * 3) + Meui.Units.smallSpacing + Meui.Units.extendBorderWidth
implicitHeight: Meui.Units.iconSizes.medium + Meui.Units.smallSpacing + Meui.Units.extendBorderWidth
color: control.activeFocus ? Qt.lighter(Meui.Theme.backgroundColor, 1.4) : Meui.Theme.backgroundColor
radius: Meui.Theme.smallRadius
border.color: control.activeFocus ? Meui.Theme.highlightColor :
Qt.tint(Meui.Theme.textColor, Qt.rgba(Meui.Theme.backgroundColor.r, Meui.Theme.backgroundColor.g, Meui.Theme.backgroundColor.b, 0.7))
ColorAnimation {
id: _colorAnimation
duration: 125
easing.type: Easing.InOutCubic
Rectangle {
id: _border
anchors.fill: parent
visible: control.activeFocus
color: "transparent"
border.color: Qt.rgba(Meui.Theme.highlightColor.r,
Meui.Theme.highlightColor.g,
Meui.Theme.highlightColor.b, 0.3)
border.width: Meui.Units.extendBorderWidth
radius: Meui.Theme.smallRadius
}
Behavior on color { animation: _colorAnimation }
Behavior on border.color { animation: _colorAnimation }
radius: Meui.Theme.smallRadius
border.width: 1
}
Rectangle {
anchors.fill: parent
anchors.margins: Meui.Units.extendBorderWidth
radius: Meui.Theme.smallRadius - Meui.Units.extendBorderWidth
color: "transparent"
border.color: control.activeFocus ? Meui.Theme.highlightColor : Qt.tint(Meui.Theme.textColor, Qt.rgba(Meui.Theme.backgroundColor.r, Meui.Theme.backgroundColor.g, Meui.Theme.backgroundColor.b, 0.7))
border.width: 1
}
}
}

Loading…
Cancel
Save