feat(Menu): use style file

This commit is contained in:
Ronan Abhamon 2016-09-27 11:51:37 +02:00
parent ba2ec69285
commit 7fdd7f1a3c
8 changed files with 72 additions and 26 deletions

View file

@ -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>

View 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.
}
}

View file

@ -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
: ''
}
}

View file

@ -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 {

View 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
}
}
}

View file

@ -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
}
}

View file

@ -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
}
}

View file

@ -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