mirror of
https://gitlab.linphone.org/BC/public/linphone-desktop.git
synced 2026-01-24 23:28:09 +00:00
feat(Menu): use style file
This commit is contained in:
parent
ba2ec69285
commit
7fdd7f1a3c
8 changed files with 72 additions and 26 deletions
|
|
@ -59,6 +59,7 @@
|
|||
<file>ui/modules/Linphone/Styles/CollapseStyle.qml</file>
|
||||
<file>ui/modules/Linphone/Styles/DialogStyle.qml</file>
|
||||
<file>ui/modules/Linphone/Styles/ForceScrollBarStyle.qml</file>
|
||||
<file>ui/modules/Linphone/Styles/MenuStyle.qml</file>
|
||||
<file>ui/modules/Linphone/Styles/PopupStyle.qml</file>
|
||||
<file>ui/modules/Linphone/Styles/qmldir</file>
|
||||
<file>ui/modules/Linphone/Styles/SearchBoxStyle.qml</file>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,22 @@ QtObject {
|
|||
property int zPopup: 999
|
||||
property int zMax: 999999
|
||||
|
||||
// TODO: Mutualize similar colors.
|
||||
property QtObject colors: QtObject {
|
||||
property string a: 'transparent'
|
||||
property string b: '#5E5E5F'
|
||||
property string c: '#C5C5C5'
|
||||
property string d: '#5A585B'
|
||||
property string e: '#DEDEDE'
|
||||
property string f: '#808080'
|
||||
property string b: '#5E5E5F' // Pressed toolbar.
|
||||
property string c: '#C5C5C5' // Released toolbar.
|
||||
|
||||
property string d: '#5A585B' // Text color.
|
||||
|
||||
property string e: '#DEDEDE' // Timeline separator
|
||||
|
||||
property string f: '#808080' // Popup shadow.
|
||||
|
||||
property string g: '#8E8E8E' // MenuEntry Normal.
|
||||
property string h: '#707070' // MenuEntry Hovered.
|
||||
property string i: '#FE5E00' // MenuEntry Pressed.
|
||||
property string j: '#434343' // MenuEntry Selected.
|
||||
|
||||
property string k: '#FFFFFF' // Text color.
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import QtQuick 2.7
|
|||
import QtQuick.Layouts 1.3
|
||||
|
||||
import Linphone 1.0
|
||||
import Linphone.Styles 1.0
|
||||
|
||||
// ===================================================================
|
||||
// Responsive flat menu with visual indicators.
|
||||
|
|
@ -18,19 +19,19 @@ ColumnLayout {
|
|||
|
||||
signal entrySelected (int entry)
|
||||
|
||||
spacing: 2
|
||||
spacing: MenuStyle.spacing
|
||||
|
||||
Repeater {
|
||||
model: entries
|
||||
|
||||
Rectangle {
|
||||
color: _selectedEntry === index
|
||||
? '#434343'
|
||||
? MenuStyle.entry.color.selected
|
||||
: (mouseArea.pressed
|
||||
? '#FE5E00'
|
||||
? MenuStyle.entry.color.pressed
|
||||
: (mouseArea.containsMouse
|
||||
? '#707070'
|
||||
: '#8E8E8E'
|
||||
? MenuStyle.entry.color.hovered
|
||||
: MenuStyle.entry.color.normal
|
||||
)
|
||||
)
|
||||
height: item.entryHeight
|
||||
|
|
@ -38,22 +39,22 @@ ColumnLayout {
|
|||
|
||||
RowLayout {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 20
|
||||
anchors.leftMargin: MenuStyle.entry.leftMargin
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 20
|
||||
anchors.rightMargin: MenuStyle.entry.rightMargin
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 18
|
||||
spacing: MenuStyle.entry.spacing
|
||||
|
||||
Icon {
|
||||
Layout.preferredHeight: 24
|
||||
Layout.preferredWidth: 24
|
||||
Layout.preferredHeight: MenuStyle.entry.iconSize
|
||||
Layout.preferredWidth: MenuStyle.entry.iconSize
|
||||
icon: modelData.icon
|
||||
}
|
||||
|
||||
Text {
|
||||
Layout.fillWidth: true
|
||||
color: '#FFFFFF'
|
||||
font.pointSize: 13
|
||||
color: MenuStyle.entry.textColor
|
||||
font.pointSize: MenuStyle.entry.fontSize
|
||||
height: parent.height
|
||||
text: modelData.entryName
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
|
@ -61,9 +62,11 @@ ColumnLayout {
|
|||
|
||||
Icon {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
Layout.preferredHeight: 12
|
||||
Layout.preferredWidth: 12
|
||||
icon: _selectedEntry === index ? 'right_arrow' : ''
|
||||
Layout.preferredHeight: MenuStyle.entry.selectionIconSize
|
||||
Layout.preferredWidth: MenuStyle.entry.selectionIconSize
|
||||
icon: _selectedEntry === index
|
||||
? MenuStyle.entry.selectionIcon
|
||||
: ''
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import QtQuick 2.7
|
|||
QtObject {
|
||||
property int animationDuration: 200
|
||||
property int iconSize: 32
|
||||
|
||||
property string icon: 'collapse'
|
||||
|
||||
property Rectangle background: Rectangle {
|
||||
|
|
|
|||
27
tests/ui/modules/Linphone/Styles/MenuStyle.qml
Normal file
27
tests/ui/modules/Linphone/Styles/MenuStyle.qml
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
pragma Singleton
|
||||
import QtQuick 2.7
|
||||
|
||||
import Linphone 1.0
|
||||
|
||||
QtObject {
|
||||
property int spacing: 2
|
||||
|
||||
property QtObject entry: QtObject {
|
||||
property int fontSize: 13
|
||||
property int iconSize: 24
|
||||
property int leftMargin: 20
|
||||
property int rightMargin: 20
|
||||
property int selectionIconSize: 12
|
||||
property int spacing: 18
|
||||
|
||||
property string selectionIcon: 'right_arrow'
|
||||
property string textColor: Constants.colors.k
|
||||
|
||||
property QtObject color: QtObject {
|
||||
property string normal: Constants.colors.g
|
||||
property string hovered: Constants.colors.h
|
||||
property string pressed: Constants.colors.i
|
||||
property string selected: Constants.colors.j
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,9 +6,11 @@ import Linphone 1.0
|
|||
QtObject {
|
||||
property QtObject shadow: QtObject {
|
||||
property double radius: 8.0
|
||||
|
||||
property int horizontalOffset: 0
|
||||
property int samples: 15
|
||||
property int verticalOffset: 2
|
||||
|
||||
property string color: Constants.colors.f
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,14 @@ QtObject {
|
|||
property int leftMargin: 18
|
||||
property int spacing: 16
|
||||
property int topMargin: 10
|
||||
|
||||
property string color: Constants.colors.d
|
||||
property string icon: 'history'
|
||||
}
|
||||
|
||||
property QtObject separator: QtObject {
|
||||
property int height: 1
|
||||
|
||||
property string color: Constants.colors.e
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
module Linphone.Style
|
||||
|
||||
# Components styles.
|
||||
singleton CollapseStyle 1.0 CollapseStyle.qml
|
||||
singleton DialogStyle 1.0 DialogStyle.qml
|
||||
singleton CollapseStyle 1.0 CollapseStyle.qml
|
||||
singleton DialogStyle 1.0 DialogStyle.qml
|
||||
singleton ForceScrollBarStyle 1.0 ForceScrollBarStyle.qml
|
||||
singleton PopupStyle 1.0 PopupStyle.qml
|
||||
singleton SearchBoxStyle 1.0 SearchBoxStyle.qml
|
||||
singleton TimelineStyle 1.0 TimelineStyle.qml
|
||||
singleton MenuStyle 1.0 MenuStyle.qml
|
||||
singleton PopupStyle 1.0 PopupStyle.qml
|
||||
singleton SearchBoxStyle 1.0 SearchBoxStyle.qml
|
||||
singleton TimelineStyle 1.0 TimelineStyle.qml
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue