├── README.md ├── deployment.pri ├── image1.png ├── image2.png ├── image3.png ├── main.cpp ├── main.qml ├── qml-bootstrap.pro ├── qml.qrc └── src ├── bars ├── Bar.qml └── ButtonBar.qml ├── buttons └── ButtonDefault.qml ├── cards └── Card.qml ├── content └── TextContent.qml ├── examples ├── AvatarListPage.qml ├── ButtonBarPage.qml ├── ButtonPage.qml ├── CardPage.qml ├── DefaultListPage.qml ├── IconListPage.qml ├── ThumbnailListPage.qml └── images │ ├── barrett.jpg │ ├── blue-album.jpg │ ├── dookie.jpg │ ├── license-to-ill.jpg │ ├── nevermind.jpg │ ├── siamese-dream.jpg │ ├── slimer.jpg │ ├── spengler.jpg │ ├── stantz.jpg │ ├── tully.jpg │ ├── venkman.jpg │ └── winston.jpg ├── fonts └── fontawesome-webfont.ttf ├── js └── helper.js ├── lists ├── AvatarListView.qml ├── DefaultListView.qml ├── IconListView.qml ├── List.qml └── ThumbnailListView.qml ├── styles ├── AvatarListViewStyle.qml ├── CardStyle.qml ├── DefaulListViewStyle.qml ├── IconListViewStyle.qml ├── ListDividerStyle.qml ├── ThumbnailListViewStyle.qml ├── TouchClearStyle.qml ├── TouchOutlineStyle.qml └── TouchStyle.qml └── variables ├── badges.js ├── bars.js ├── base.js ├── buttons.js ├── colors.js ├── fontawesome.js └── items.js /README.md: -------------------------------------------------------------------------------- 1 | [![Feature Requests](http://feathub.com/brexis/qml-bootstrap?format=svg)](http://feathub.com/brexis/qml-bootstrap) 2 | 3 | qml-bootstrap 4 | ============= 5 | Qml Bootstrap is a set of simple and beautiful components for qml mobile and desktop projects. It is inspired from [Ionic framework](http://ionicframework.com/) components and use [Font Awesome](http://fortawesome.github.io/Font-Awesome/) icons font. 6 | 7 | ## How to use it 8 | Just clone the repository and create a new qml project base on this code. Then import components that you want to use. For example, to use ButtonDefault 9 | ``` 10 | import QtQuick 2.3 11 | import QtQuick.Window 2.0 12 | import "src/buttons" 13 | 14 | Window { 15 | visible: true 16 | width: 640 17 | height: 640 18 | title: qsTr("Hello World !") 19 | 20 | Column { 21 | anchors.centerIn: parent 22 | spacing: 10 23 | ButtonDefault { 24 | design: "light" 25 | width: 100 26 | height: 50 27 | } 28 | ButtonDefault { 29 | design: "stable" 30 | width: 100 31 | height: 50 32 | } 33 | ButtonDefault { 34 | design: "positive" 35 | width: 100 36 | height: 50 37 | } 38 | ButtonDefault { 39 | design: "calm" 40 | width: 100 41 | height: 50 42 | } 43 | ButtonDefault { 44 | design: "balanced" 45 | width: 100 46 | height: 50 47 | } 48 | ButtonDefault { 49 | design: "energized" 50 | width: 100 51 | height: 50 52 | } 53 | ButtonDefault { 54 | design: "assertive" 55 | width: 100 56 | height: 50 57 | } 58 | ButtonDefault { 59 | design: "royal" 60 | width: 100 61 | height: 50 62 | } 63 | ButtonDefault { 64 | design: "dark" 65 | width: 100 66 | height: 50 67 | } 68 | } 69 | } 70 | ``` 71 | ## Sreenshots 72 | ![Buttons](https://raw.github.com/brexis/qml-bootstrap/dev/image1.png) 73 | ![Default listView](https://raw.github.com/brexis/qml-bootstrap/dev/image2.png) 74 | ![IconListView](https://raw.github.com/brexis/qml-bootstrap/dev/image3.png) 75 | 76 | 77 | ## Qt version 78 | Qml-bootstrap requires Qt 5.3.2 or highter to work. 79 | ## Plateforms supported 80 | You can use these components Window, Linux, Max OS Android or IOS. 81 | 82 | # Thanks 83 | [Ionic Framework](http://ionicframework.com/) - A hybrid mobile apps framework. 84 | 85 | [Font Awesome](http://fortawesome.github.io/Font-Awesome/) - The iconic font and CSS toolkit. 86 | 87 | [Qt Project](http://qt-project.org/) - True cross-platform framework. 88 | 89 | "[Using Fonts Awesome in QML](http://kdeblog.mageprojects.com/2012/11/20/using-fonts-awesome-in-qml/)" by markg85. 90 | -------------------------------------------------------------------------------- /deployment.pri: -------------------------------------------------------------------------------- 1 | android-no-sdk { 2 | target.path = /data/user/qt 3 | export(target.path) 4 | INSTALLS += target 5 | } else:android { 6 | x86 { 7 | target.path = /libs/x86 8 | } else: armeabi-v7a { 9 | target.path = /libs/armeabi-v7a 10 | } else { 11 | target.path = /libs/armeabi 12 | } 13 | export(target.path) 14 | INSTALLS += target 15 | } else:unix { 16 | isEmpty(target.path) { 17 | qnx { 18 | target.path = /tmp/$${TARGET}/bin 19 | } else { 20 | target.path = /opt/$${TARGET}/bin 21 | } 22 | export(target.path) 23 | } 24 | INSTALLS += target 25 | } 26 | 27 | export(INSTALLS) 28 | -------------------------------------------------------------------------------- /image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/image1.png -------------------------------------------------------------------------------- /image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/image2.png -------------------------------------------------------------------------------- /image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/image3.png -------------------------------------------------------------------------------- /main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QApplication app(argc, argv); 7 | 8 | QQmlApplicationEngine engine; 9 | engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 10 | 11 | return app.exec(); 12 | } 13 | -------------------------------------------------------------------------------- /main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Controls 1.2 3 | import "src/lists" 4 | import "src/bars" 5 | import "src/buttons" 6 | import "src/variables/fontawesome.js" as FontAwesome 7 | 8 | ApplicationWindow { 9 | visible: true 10 | width: 800 11 | height: 1280 12 | FontLoader{ source: "qrc:/src/fonts/fontawesome-webfont.ttf"} 13 | Rectangle { 14 | anchors.fill: parent 15 | } 16 | toolBar: Bar{ 17 | id: titleBar 18 | leftComponent: Component{ 19 | ButtonDefault{ 20 | class_name: "bar dark clear" 21 | text: "Back" 22 | icon: FontAwesome.icons.fa_angle_left 23 | opacity: stackView.depth > 1 ? 1 : 0 24 | visible: opacity ? true : false 25 | Behavior on opacity { NumberAnimation{} } 26 | onClicked: { 27 | stackView.pop() 28 | titleBar.title = "Qml Bootstrap Demo" 29 | } 30 | } 31 | } 32 | 33 | class_name: "header" 34 | title: "Qml Bootstrap Demo" 35 | } 36 | 37 | ListModel { 38 | id: pageModel 39 | ListElement { 40 | text: "Buttons Demo" 41 | page: "src/examples/ButtonPage.qml" 42 | } 43 | ListElement { 44 | text: "ListView Demo" 45 | page: "src/examples/DefaultListPage.qml" 46 | } 47 | ListElement { 48 | text: "ListView with icon Demo" 49 | page: "src/examples/IconListPage.qml" 50 | } 51 | ListElement { 52 | text: "Avatar ListView Demo" 53 | page: "src/examples/AvatarListPage.qml" 54 | } 55 | ListElement { 56 | text: "Thumnail ListView Demo" 57 | page: "src/examples/ThumbnailListPage.qml" 58 | } 59 | ListElement { 60 | text: "Button bar Demo" 61 | page: "src/examples/ButtonBarPage.qml" 62 | } 63 | ListElement { 64 | text: "Card" 65 | page: "src/examples/CardPage.qml" 66 | } 67 | } 68 | 69 | StackView { 70 | id: stackView 71 | anchors.fill: parent 72 | focus: true 73 | Keys.onReleased: if (event.key === Qt.Key_Back && stackView.depth > 1) { 74 | stackView.pop(); 75 | event.accepted = true; 76 | } 77 | 78 | initialItem: Item { 79 | width: parent.width 80 | height: parent.height 81 | DefaultListView{ 82 | model: pageModel 83 | anchors.fill: parent 84 | onItemClicked: { 85 | stackView.push(Qt.resolvedUrl(item.page)) 86 | titleBar.title = item.text 87 | } 88 | } 89 | } 90 | } 91 | 92 | statusBar: Bar{ 93 | class_name: "footer calm" 94 | title: "Powered by Brexis and Kamhix" 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /qml-bootstrap.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | 3 | QT += qml quick widgets 4 | 5 | SOURCES += main.cpp 6 | 7 | RESOURCES += qml.qrc 8 | OTHER_FILES += \ 9 | main.qml \ 10 | README.md \ 11 | src/variables/base.js \ 12 | src/variables/buttons.js \ 13 | src/variables/colors.js \ 14 | src/variables/items.js \ 15 | src/variables/badges.js \ 16 | src/variables/fontawesome.js \ 17 | src/styles/TouchStyle.qml \ 18 | src/buttons/ButtonDefault.qml \ 19 | src/styles/TouchOutlineStyle.qml \ 20 | src/styles/ListDividerStyle.qml \ 21 | src/lists/List.qml \ 22 | src/lists/DefaultListView.qml \ 23 | src/lists/IconListView.qml \ 24 | src/styles/DefaulListViewStyle.qml \ 25 | src/styles/IconListViewStyle.qml \ 26 | src/examples/ButtonPage.qml \ 27 | src/examples/DefaultListPage.qml \ 28 | src/examples/IconListPage.qml \ 29 | src/lists/AvatarListView.qml \ 30 | src/styles/AvatarListViewStyle.qml \ 31 | src/examples/AvatarListPage.qml \ 32 | src/content/TextContent.qml \ 33 | src/styles/ThumbnailListViewStyle.qml \ 34 | src/lists/ThumbnailListView.qml \ 35 | src/examples/ThumbnailListPage.qml \ 36 | src/styles/TouchClearStyle.qml \ 37 | src/bars/Bar.qml \ 38 | src/variables/bars.js \ 39 | src/bars/ButtonBar.qml \ 40 | src/examples/ButtonBarPage.qml \ 41 | src/cards/Card.qml \ 42 | src/styles/CardStyle.qml \ 43 | src/examples/CardPage.qml 44 | 45 | 46 | 47 | # Additional import path used to resolve QML modules in Qt Creator's code model 48 | QML_IMPORT_PATH = 49 | QMAKE_MAC_SDK = macosx10.9 50 | # Default rules for deployment. 51 | include(deployment.pri) 52 | -------------------------------------------------------------------------------- /qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | src/buttons/ButtonDefault.qml 5 | src/js/helper.js 6 | src/styles/TouchStyle.qml 7 | src/variables/badges.js 8 | src/variables/base.js 9 | src/variables/buttons.js 10 | src/variables/colors.js 11 | src/variables/fontawesome.js 12 | src/styles/TouchOutlineStyle.qml 13 | src/lists/List.qml 14 | src/variables/items.js 15 | src/lists/DefaultListView.qml 16 | src/styles/ListDividerStyle.qml 17 | src/fonts/fontawesome-webfont.ttf 18 | src/styles/IconListViewStyle.qml 19 | src/styles/DefaulListViewStyle.qml 20 | src/lists/IconListView.qml 21 | src/examples/ButtonPage.qml 22 | src/examples/DefaultListPage.qml 23 | src/examples/IconListPage.qml 24 | src/examples/images/spengler.jpg 25 | src/examples/images/stantz.jpg 26 | src/examples/images/venkman.jpg 27 | src/styles/AvatarListViewStyle.qml 28 | src/lists/AvatarListView.qml 29 | src/examples/AvatarListPage.qml 30 | src/content/TextContent.qml 31 | src/examples/images/barrett.jpg 32 | src/examples/images/slimer.jpg 33 | src/examples/images/tully.jpg 34 | src/examples/images/winston.jpg 35 | src/examples/images/blue-album.jpg 36 | src/examples/images/dookie.jpg 37 | src/examples/images/license-to-ill.jpg 38 | src/examples/images/nevermind.jpg 39 | src/examples/images/siamese-dream.jpg 40 | src/styles/ThumbnailListViewStyle.qml 41 | src/examples/ThumbnailListPage.qml 42 | src/lists/ThumbnailListView.qml 43 | src/styles/TouchClearStyle.qml 44 | src/bars/Bar.qml 45 | src/variables/bars.js 46 | src/bars/ButtonBar.qml 47 | src/examples/ButtonBarPage.qml 48 | src/examples/CardPage.qml 49 | src/styles/CardStyle.qml 50 | src/cards/Card.qml 51 | 52 | 53 | -------------------------------------------------------------------------------- /src/bars/Bar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Layouts 1.1 3 | 4 | import "../variables/bars.js" as StyleHelper 5 | import "../content" 6 | 7 | Rectangle { 8 | id: root 9 | width: parent.width 10 | property string class_name: ""; 11 | property var style: StyleHelper.parseBarClass(class_name); 12 | property string title: "" 13 | height: StyleHelper.bar_height + 2*StyleHelper.bar_padding_portrait 14 | clip: true 15 | 16 | property Component leftComponent 17 | 18 | property Component contentComponent: Component{ 19 | TextContent{ 20 | class_name: "h1" 21 | text: root.title 22 | font.pixelSize: StyleHelper.bar_title_font_size 23 | color: root.style.text 24 | horizontalAlignment: Text.AlignHCenter 25 | verticalAlignment: Text.AlignVCenter 26 | elide: Text.ElideRight 27 | } 28 | } 29 | 30 | property Component rightComponent 31 | 32 | Rectangle{ 33 | color: root.style.bg 34 | anchors.fill: parent 35 | anchors.topMargin: StyleHelper.hasClass('header', root.class_name) ? -1 : 0 36 | anchors.leftMargin: -1 37 | anchors.rightMargin: -1 38 | anchors.bottomMargin: StyleHelper.hasClass('footer', root.class_name) ? -1 : 0 39 | border.width: 1 40 | border.color: root.style.border 41 | } 42 | 43 | Loader{ 44 | sourceComponent: root.leftComponent 45 | anchors.left: parent.left 46 | anchors.leftMargin: StyleHelper.bar_padding_portrait 47 | anchors.verticalCenter: parent.verticalCenter 48 | } 49 | Loader{ 50 | sourceComponent: root.contentComponent 51 | anchors.fill: parent 52 | anchors.margins: StyleHelper.bar_padding_portrait 53 | anchors.verticalCenter: parent.verticalCenter 54 | } 55 | Loader{ 56 | sourceComponent: root.rightComponent 57 | anchors.right: parent.right 58 | anchors.rightMargin: StyleHelper.bar_padding_portrait 59 | anchors.verticalCenter: parent.verticalCenter 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/bars/ButtonBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Controls 1.2 3 | import QtQuick.Layouts 1.1 4 | 5 | import "../buttons" 6 | import "../variables/buttons.js" as StyleHelper 7 | 8 | Rectangle { 9 | id: root 10 | width: 330 11 | height: barContent.height 12 | 13 | property bool checkable: false 14 | property int checkedIndex: -1 15 | property variant model: [] 16 | 17 | property string class_name: "" 18 | property var type: StyleHelper.parseButtonClass(class_name); 19 | border.color: type.style.active_border 20 | border.width: StyleHelper.button_border_width 21 | radius: StyleHelper.button_border_radius 22 | signal click (var index); 23 | 24 | Item { 25 | id: barContent 26 | width: parent.width - StyleHelper.button_border_width * 2 27 | height: row.height 28 | anchors.centerIn: parent 29 | clip: true 30 | 31 | Row { 32 | id: row 33 | Repeater{ 34 | model: root.model.length 35 | Item{ 36 | width: root.width / root.model.length 37 | height: btn.height 38 | 39 | ButtonDefault { 40 | id: btn 41 | text: root.model[index].text 42 | icon: typeof(root.model[index].icon) === 'string' ? root.model[index].icon : '' 43 | width: parent.width 44 | radius: false 45 | selected: root.checkable && index === root.checkedIndex 46 | 47 | class_name: { 48 | var nClassName = root.class_name; 49 | if (!StyleHelper.hasClass('full', nClassName)) { 50 | nClassName += " full" 51 | } 52 | return nClassName; 53 | } 54 | 55 | onClicked: { 56 | root.checkedIndex = index; 57 | root.click(index); 58 | } 59 | } 60 | Rectangle{ 61 | visible: index !== 0 62 | width: StyleHelper.button_border_width 63 | height: parent.height 64 | color: root.type.style.border 65 | } 66 | } 67 | } 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/buttons/ButtonDefault.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Controls 1.2 3 | import QtQuick.Controls.Styles 1.2 4 | import QtGraphicalEffects 1.0 5 | import "../styles" 6 | import "../variables/buttons.js" as StyleHelper 7 | Button { 8 | id: root 9 | property string class_name: ""; 10 | property var type: StyleHelper.parseButtonClass(class_name); 11 | property string icon: "" 12 | property bool iconRight: false 13 | property double fontSize : type.size.font_size 14 | property double iconSize : type.size.icon_size 15 | property bool radius: true 16 | property bool selected: { 17 | if (checkable) { 18 | return checked; 19 | } 20 | return false 21 | } 22 | 23 | width: { 24 | if (StyleHelper.hasClass('block', class_name) || StyleHelper.hasClass('full', class_name)) 25 | return parent.width; 26 | else 27 | return implicitWidth + type.size.padding * 2 28 | } 29 | height: type.size.height + 5 30 | 31 | style: { 32 | if (StyleHelper.hasClass('outline', class_name)) { 33 | return outline; 34 | } 35 | if (StyleHelper.hasClass('clear', class_name)) { 36 | return clear; 37 | } 38 | return normal; 39 | } 40 | 41 | Component { 42 | id: normal 43 | TouchStyle { 44 | style: type.style 45 | size: type.size 46 | } 47 | } 48 | 49 | Component { 50 | id: clear 51 | TouchClearStyle { 52 | style: type.style 53 | size: type.size 54 | } 55 | } 56 | 57 | Component { 58 | id: outline 59 | TouchOutlineStyle { 60 | style: type.style 61 | size: type.size 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/cards/Card.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtGraphicalEffects 1.0 3 | 4 | import "../styles" 5 | import "../variables/items.js" as StyleHelper 6 | 7 | Rectangle { 8 | id: root 9 | anchors.top: parent.top; 10 | anchors.left: parent.left 11 | anchors.right: parent.right 12 | height: listView.height + 4 * StyleHelper.card_padding 13 | color: "transparent" 14 | 15 | property alias model: listView.model 16 | property string header: "" 17 | property string footer: "" 18 | 19 | Item{ 20 | id: shadow 21 | smooth: true 22 | width: listView.width + 2 * dropShadow.radius 23 | height: listView.height + 2 * dropShadow.radius 24 | anchors.centerIn: listView 25 | visible: false 26 | 27 | Rectangle { 28 | id: contentRect 29 | width: listView.width 30 | height: listView.height 31 | anchors.centerIn: parent 32 | antialiasing: true; 33 | } 34 | } 35 | 36 | DropShadow { 37 | id: dropShadow 38 | anchors.fill: shadow 39 | horizontalOffset: 2 40 | verticalOffset: 1 41 | radius: 4 42 | samples: 24 43 | color: "#19000000" 44 | cached: true 45 | source: shadow 46 | } 47 | 48 | ListView { 49 | id: listView 50 | anchors.top: parent.top; 51 | anchors.left: parent.left 52 | anchors.right: parent.right 53 | anchors.topMargin: 2 * StyleHelper.card_padding 54 | anchors.leftMargin: StyleHelper.card_padding 55 | anchors.rightMargin: StyleHelper.card_padding 56 | height: childrenRect.height 57 | 58 | boundsBehavior : Flickable.StopAtBounds 59 | 60 | delegate: Component{ 61 | CardStyle{} 62 | } 63 | 64 | header: root.header === "" ? blank : headerComponent 65 | 66 | Component{ 67 | id: headerComponent 68 | ListDividerStyle{ 69 | text: root.header 70 | } 71 | } 72 | footer: root.footer === "" ? blank : footerComponent 73 | 74 | Component{ 75 | id: footerComponent 76 | ListDividerStyle{ 77 | text: root.footer 78 | } 79 | } 80 | 81 | Component{ 82 | id: blank 83 | Item{} 84 | } 85 | } 86 | } 87 | 88 | -------------------------------------------------------------------------------- /src/content/TextContent.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "../variables/base.js" as StyleHelper 3 | 4 | Text{ 5 | property string class_name: "" 6 | property var style: StyleHelper.parseTextClass(class_name) 7 | font.pixelSize: style.font_size 8 | font.weight: style.font_weight 9 | color: StyleHelper.base_color 10 | lineHeight: style.line_height 11 | } 12 | -------------------------------------------------------------------------------- /src/examples/AvatarListPage.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "../variables/fontawesome.js" as FontAwesome 3 | import "../lists" 4 | 5 | Item { 6 | width: parent.width 7 | height: parent.height 8 | AvatarListView{ 9 | anchors.fill: parent 10 | 11 | model: ListModel { 12 | ListElement{ 13 | avatar: "qrc:/src/examples/images/venkman.jpg" 14 | title:"Venkman" 15 | detail: "Back off, man. I'm a scientist." 16 | } 17 | ListElement{ 18 | avatar: "qrc:/src/examples/images/spengler.jpg" 19 | title:"Egon" 20 | detail: "We're gonna go full stream." 21 | } 22 | ListElement{ 23 | avatar: "qrc:/src/examples/images/stantz.jpg" 24 | title:"Ray" 25 | detail: "Ugly little spud, isn't he?" 26 | } 27 | ListElement{ 28 | avatar: "qrc:/src/examples/images/winston.jpg" 29 | title:"Winston" 30 | detail: "That's a big Twinkie." 31 | } 32 | ListElement{ 33 | avatar: "qrc:/src/examples/images/tully.jpg" 34 | title:"Tully" 35 | detail: "Okay, who brought the dog?" 36 | } 37 | ListElement{ 38 | avatar: "qrc:/src/examples/images/barrett.jpg" 39 | title:"Dana" 40 | detail: "I am The Gatekeeper!" 41 | } 42 | ListElement{ 43 | avatar: "qrc:/src/examples/images/slimer.jpg" 44 | title:"Slimer" 45 | detail: "Boo!" 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/examples/ButtonBarPage.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Layouts 1.1 3 | import "../variables/fontawesome.js" as FontAwesome 4 | import "../bars" 5 | 6 | Item { 7 | width: parent.width 8 | height: parent.height 9 | 10 | Item { 11 | width: parent.width - 20 12 | anchors.top: parent.top 13 | anchors.topMargin: 20 14 | anchors.horizontalCenter: parent.horizontalCenter 15 | Column { 16 | spacing: 10 17 | ButtonBar{ 18 | class_name: "light" 19 | model: [ 20 | { 21 | text: 'First' 22 | }, 23 | { 24 | text: 'Second' 25 | }, 26 | { 27 | text: 'Third' 28 | } 29 | ] 30 | 31 | onClick: { 32 | console.log('Click Index ' + index); 33 | } 34 | } 35 | 36 | ButtonBar{ 37 | class_name: "stable" 38 | model: [ 39 | { 40 | text: 'First' 41 | }, 42 | { 43 | text: 'Second' 44 | }, 45 | { 46 | text: 'Third' 47 | } 48 | ] 49 | 50 | onClick: { 51 | console.log('Click Index ' + index); 52 | } 53 | } 54 | ButtonBar{ 55 | class_name: "positive" 56 | checkable: true 57 | model: [ 58 | { 59 | text: 'First' 60 | }, 61 | { 62 | text: 'Second' 63 | }, 64 | { 65 | text: 'Third' 66 | } 67 | ] 68 | 69 | onCheckedIndexChanged: { 70 | console.log('Index ' + checkedIndex); 71 | } 72 | } 73 | ButtonBar{ 74 | class_name: "calm" 75 | checkable: true 76 | model: [ 77 | { 78 | text: 'First' 79 | }, 80 | { 81 | text: 'Second' 82 | }, 83 | { 84 | text: 'Third' 85 | } 86 | ] 87 | 88 | onCheckedIndexChanged: { 89 | console.log('Index ' + checkedIndex); 90 | } 91 | } 92 | ButtonBar{ 93 | class_name: "energized" 94 | checkable: true 95 | model: [ 96 | { 97 | text: 'First' 98 | }, 99 | { 100 | text: 'Second' 101 | }, 102 | { 103 | text: 'Third' 104 | } 105 | ] 106 | 107 | onCheckedIndexChanged: { 108 | console.log('Index ' + checkedIndex); 109 | } 110 | } 111 | ButtonBar{ 112 | class_name: "balanced" 113 | checkable: true 114 | model: [ 115 | { 116 | text: 'First' 117 | }, 118 | { 119 | text: 'Second' 120 | }, 121 | { 122 | text: 'Third' 123 | } 124 | ] 125 | 126 | onCheckedIndexChanged: { 127 | console.log('Index ' + checkedIndex); 128 | } 129 | } 130 | ButtonBar{ 131 | class_name: "assertive" 132 | checkable: true 133 | model: [ 134 | { 135 | text: 'First' 136 | }, 137 | { 138 | text: 'Second' 139 | }, 140 | { 141 | text: 'Third' 142 | } 143 | ] 144 | 145 | onCheckedIndexChanged: { 146 | console.log('Index ' + checkedIndex); 147 | } 148 | } 149 | ButtonBar{ 150 | class_name: "royal" 151 | checkable: true 152 | model: [ 153 | { 154 | text: 'First' 155 | }, 156 | { 157 | text: 'Second' 158 | }, 159 | { 160 | text: 'Third' 161 | } 162 | ] 163 | 164 | onCheckedIndexChanged: { 165 | console.log('Index ' + checkedIndex); 166 | } 167 | } 168 | ButtonBar{ 169 | class_name: "dark" 170 | checkable: true 171 | model: [ 172 | { 173 | text: 'First' 174 | }, 175 | { 176 | text: 'Second' 177 | }, 178 | { 179 | text: 'Third' 180 | } 181 | ] 182 | 183 | onCheckedIndexChanged: { 184 | console.log('Index ' + checkedIndex); 185 | } 186 | } 187 | } 188 | 189 | } 190 | } 191 | -------------------------------------------------------------------------------- /src/examples/ButtonPage.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Layouts 1.1 3 | import "../buttons" 4 | import "../variables/fontawesome.js" as FontAwesome 5 | Item { 6 | width: parent.width 7 | height: parent.height 8 | ColumnLayout { 9 | spacing: 10 10 | anchors.fill: parent 11 | anchors.topMargin: 10 12 | 13 | RowLayout{ 14 | Layout.alignment: Qt.AlignTop | Qt.AlignHCenter 15 | Layout.preferredWidth: parent.width - 20 16 | 17 | Column { 18 | spacing: 10 19 | Layout.alignment: Qt.AlignTop 20 | ButtonDefault { 21 | checkable: true 22 | checked: true 23 | class_name: "small" 24 | text: "Button small" 25 | } 26 | ButtonDefault { 27 | text: "Button Default" 28 | } 29 | ButtonDefault { 30 | class_name: "large" 31 | text: "Button Large" 32 | } 33 | ButtonDefault { 34 | class_name: "clear" 35 | text: "Button default clear" 36 | } 37 | ButtonDefault { 38 | class_name: "outline" 39 | text: "Button default outline" 40 | } 41 | } 42 | Column { 43 | spacing: 10 44 | Layout.alignment: Qt.AlignTop 45 | ButtonDefault { 46 | class_name: "stable" 47 | text: "Button default stable" 48 | } 49 | ButtonDefault { 50 | class_name: "calm" 51 | text: "Button default calm" 52 | } 53 | ButtonDefault { 54 | class_name: "balanced" 55 | text: "Button default balanced" 56 | } 57 | ButtonDefault { 58 | class_name: "energized" 59 | text: "Button default energized" 60 | } 61 | ButtonDefault { 62 | class_name: "assertive" 63 | text: "Button default assertive" 64 | } 65 | ButtonDefault { 66 | class_name: "royal" 67 | text: "Button default royal" 68 | } 69 | ButtonDefault { 70 | class_name: "dark" 71 | text: "Button default dark" 72 | } 73 | } 74 | Column { 75 | spacing: 10 76 | Layout.alignment: Qt.AlignTop 77 | ButtonDefault { 78 | class_name: "dark outline" 79 | text: "Back" 80 | icon: FontAwesome.icons.fa_angle_left 81 | } 82 | ButtonDefault { 83 | class_name: "dark outline" 84 | text: "Next" 85 | icon: FontAwesome.icons.fa_angle_right 86 | iconRight: true 87 | } 88 | ButtonDefault { 89 | class_name: "dark outline" 90 | icon: FontAwesome.icons.fa_cog 91 | } 92 | } 93 | } 94 | Column{ 95 | Layout.alignment: Qt.AlignTop | Qt.AlignHCenter 96 | Layout.preferredWidth: parent.width - 20 97 | spacing: 10 98 | 99 | ButtonDefault { 100 | class_name: "positive block" 101 | text: "Button positive block width" 102 | } 103 | ButtonDefault { 104 | class_name: "calm block" 105 | text: "Button calm block width" 106 | } 107 | } 108 | Column{ 109 | Layout.fillWidth: true 110 | Layout.alignment: Qt.AlignTop 111 | spacing: 10 112 | 113 | ButtonDefault { 114 | class_name: "energized full" 115 | text: "Button energized full width" 116 | } 117 | ButtonDefault { 118 | class_name: "dark full" 119 | text: "Button dark full width" 120 | } 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/examples/CardPage.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Layouts 1.1 3 | 4 | import "../cards" 5 | import "../variables/fontawesome.js" as FontAwesome 6 | 7 | Item { 8 | width: parent.width 9 | height: parent.height 10 | 11 | Card{ 12 | id: card1 13 | model: ListModel{ 14 | ListElement{ 15 | text: "This is a basic Card which" 16 | } 17 | 18 | ListElement{ 19 | text: "This is a basic Card which contains an item that has wrapping text." 20 | } 21 | } 22 | } 23 | 24 | Card{ 25 | anchors.top: card1.bottom 26 | header: "I'm a Header in a Card!" 27 | footer: "I'm a Footer in a Card!" 28 | 29 | model: ListModel{ 30 | ListElement{ 31 | text: "This is a basic Card which (positive style)" 32 | class_name: "positive" 33 | } 34 | 35 | ListElement{ 36 | text: "This is a basic Card which contains an item that has wrapping text. (energized style)" 37 | class_name: "energized" 38 | } 39 | } 40 | } 41 | 42 | } 43 | -------------------------------------------------------------------------------- /src/examples/DefaultListPage.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "../lists" 3 | 4 | Item { 5 | width: parent.width 6 | height: parent.height 7 | DefaultListView{ 8 | id: listView 9 | hasDivider: true 10 | anchors.fill: parent 11 | onItemClicked: { 12 | listView.model.get(index).text = "Item clicked"; 13 | } 14 | 15 | model: ListModel{ 16 | ListElement{ 17 | text: "Item 1 default" 18 | divider: "Divider 1" 19 | } 20 | ListElement{ 21 | text: "Item 2 light" 22 | divider: "Divider 1" 23 | class_name: "light" 24 | } 25 | ListElement{ 26 | text: "Item 3 stable" 27 | divider: "Divider 1" 28 | class_name: "stable" 29 | } 30 | ListElement{ 31 | text: "Item 4 calm" 32 | divider: "Divider 2" 33 | class_name: "calm" 34 | } 35 | ListElement{ 36 | text: "Item 5 positive" 37 | divider: "Divider 2" 38 | class_name: "positive" 39 | } 40 | ListElement{ 41 | text: "Item 5 assertive" 42 | divider: "Divider 2" 43 | class_name: "assertive" 44 | } 45 | ListElement{ 46 | text: "Item 5 balanced" 47 | divider: "Divider 3" 48 | class_name: "balanced" 49 | } 50 | ListElement{ 51 | text: "Item 5 royal" 52 | divider: "Divider 3" 53 | class_name: "royal" 54 | } 55 | ListElement{ 56 | text: "Item 5 dark" 57 | divider: "Divider 3" 58 | class_name: "dark" 59 | } 60 | } 61 | 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/examples/IconListPage.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "../variables/fontawesome.js" as FontAwesome 3 | import "../lists" 4 | 5 | Item { 6 | width: parent.width 7 | height: parent.height 8 | IconListView{ 9 | anchors.fill: parent 10 | model: [{ 11 | text: "Check mail", 12 | leftIcon: FontAwesome.icons.fa_comments_o, 13 | rightIcon: FontAwesome.icons.fa_phone, 14 | note: "Grammy", 15 | badge: "0", 16 | badge_class_name: "assertive" 17 | }, 18 | { 19 | text: "Call Mum", 20 | leftIcon: FontAwesome.icons.fa_phone, 21 | badge: "3", 22 | badge_class_name: "positive", 23 | class_name: "dark", 24 | note: "Note", 25 | } 26 | ] 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/examples/ThumbnailListPage.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "../variables/fontawesome.js" as FontAwesome 3 | import "../lists" 4 | 5 | Item { 6 | width: parent.width 7 | height: parent.height 8 | ThumbnailListView{ 9 | anchors.fill: parent 10 | 11 | model: ListModel { 12 | ListElement{ 13 | avatar: "qrc:/src/examples/images/blue-album.jpg" 14 | title:"Weezer" 15 | detail: "Blue Album" 16 | } 17 | ListElement{ 18 | avatar: "qrc:/src/examples/images/siamese-dream.jpg" 19 | title:"Smashing Pumpkins" 20 | detail: "Siamese Dream" 21 | } 22 | ListElement{ 23 | avatar: "qrc:/src/examples/images/nevermind.jpg" 24 | title:"Nirvana" 25 | detail: "Nevermind" 26 | } 27 | ListElement{ 28 | avatar: "qrc:/src/examples/images/license-to-ill.jpg" 29 | title:"Beastie Boys" 30 | detail: "License To Ill" 31 | } 32 | ListElement{ 33 | avatar: "qrc:/src/examples/images/dookie.jpg" 34 | title:"Green Day" 35 | detail: "Dookie" 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/examples/images/barrett.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/barrett.jpg -------------------------------------------------------------------------------- /src/examples/images/blue-album.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/blue-album.jpg -------------------------------------------------------------------------------- /src/examples/images/dookie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/dookie.jpg -------------------------------------------------------------------------------- /src/examples/images/license-to-ill.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/license-to-ill.jpg -------------------------------------------------------------------------------- /src/examples/images/nevermind.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/nevermind.jpg -------------------------------------------------------------------------------- /src/examples/images/siamese-dream.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/siamese-dream.jpg -------------------------------------------------------------------------------- /src/examples/images/slimer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/slimer.jpg -------------------------------------------------------------------------------- /src/examples/images/spengler.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/spengler.jpg -------------------------------------------------------------------------------- /src/examples/images/stantz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/stantz.jpg -------------------------------------------------------------------------------- /src/examples/images/tully.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/tully.jpg -------------------------------------------------------------------------------- /src/examples/images/venkman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/venkman.jpg -------------------------------------------------------------------------------- /src/examples/images/winston.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/examples/images/winston.jpg -------------------------------------------------------------------------------- /src/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brexis/qml-bootstrap/27d6b87c25f8afcd8836f7a587797e50c140f51d/src/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/js/helper.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/lists/AvatarListView.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Layouts 1.1 3 | import "../styles" 4 | import "../content" 5 | import "../variables/items.js" as StyleHelper 6 | List { 7 | id: rootList 8 | delegate: Component{ 9 | AvatarListViewStyle{ 10 | root: rootList 11 | onItemClicked: rootList.itemClicked(item, index) 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/lists/DefaultListView.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import "../styles" 3 | List { 4 | id: rootList 5 | delegate: Component{ 6 | DefaulListViewStyle{ 7 | onItemClicked: rootList.itemClicked(item, index) 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/lists/IconListView.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import "../styles" 3 | List { 4 | id: rootList 5 | delegate: Component{ 6 | IconListViewStyle{ 7 | onItemClicked: rootList.itemClicked(item, index) 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/lists/List.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import "../styles" 3 | ListView { 4 | id: root 5 | signal itemClicked(var item, var index); 6 | property bool hasDivider: false 7 | section.property: "divider" 8 | section.criteria: ViewSection.FullString 9 | section.labelPositioning: ViewSection.CurrentLabelAtStart | ViewSection.InlineLabels 10 | section.delegate: hasDivider ? dividerHeading : blank 11 | 12 | Component{ 13 | id: dividerHeading 14 | ListDividerStyle{ 15 | text: section 16 | } 17 | } 18 | Component{ 19 | id: blank 20 | Item{} 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/lists/ThumbnailListView.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Layouts 1.1 3 | import "../styles" 4 | import "../content" 5 | import "../variables/items.js" as StyleHelper 6 | List { 7 | id: rootList 8 | delegate: Component{ 9 | ThumbnailListViewStyle{ 10 | root: rootList 11 | onItemClicked: rootList.itemClicked(item, index) 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/styles/AvatarListViewStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Layouts 1.1 3 | import QtGraphicalEffects 1.0 4 | import "../lists" 5 | import "../variables/badges.js" as StyleHelper 6 | import "../variables/fontawesome.js" as FontAwesome 7 | import "../content" 8 | 9 | Item{ 10 | id: itemRoot 11 | width: ListView.view.width 12 | height: row.implicitHeight + StyleHelper.item_padding * 2 13 | property List root 14 | property var item: model.modelData ? model.modelData : model 15 | property var itemStyle: StyleHelper.parseItemClass(item.class_name) 16 | property var badgeStyle: StyleHelper.parseBadgeClass(item.badge_class_name) 17 | signal itemClicked (var item, var index); 18 | 19 | Rectangle{ 20 | anchors.fill: parent 21 | anchors.margins: - StyleHelper.item_border_width 22 | color: itemMouse.pressed ? itemRoot.itemStyle.active_bg : itemRoot.itemStyle.bg 23 | border.width: StyleHelper.item_border_width 24 | border.color: itemMouse.pressed ? itemRoot.itemStyle.active_border : itemRoot.itemStyle.border 25 | RowLayout{ 26 | id: row 27 | anchors.fill: parent 28 | anchors.margins: StyleHelper.item_padding 29 | spacing: StyleHelper.item_padding 30 | Item{ 31 | Layout.preferredWidth: StyleHelper.item_avatar_width 32 | Layout.preferredHeight: StyleHelper.item_avatar_height 33 | 34 | Image{ 35 | id: avatar 36 | source: itemRoot.item.avatar 37 | anchors.fill: parent 38 | smooth: true 39 | visible: false 40 | } 41 | Rectangle{ 42 | id: mask 43 | anchors.fill: parent 44 | radius: StyleHelper.item_avatar_border_radius 45 | } 46 | OpacityMask{ 47 | anchors.fill: avatar 48 | source: avatar 49 | maskSource: mask 50 | } 51 | } 52 | Item{ 53 | Layout.fillHeight: true 54 | Layout.fillWidth: true 55 | 56 | ColumnLayout{ 57 | anchors.fill: parent 58 | TextContent{ 59 | text: itemRoot.item.title 60 | class_name: "h2" 61 | style: StyleHelper.parseItemTextClass(class_name) 62 | elide: Text.ElideRight 63 | Layout.alignment: Qt.AlignTop 64 | Layout.fillWidth: true 65 | } 66 | TextContent{ 67 | text: itemRoot.item.detail 68 | color: "#666" 69 | elide: Text.ElideRight 70 | Layout.alignment: Qt.AlignTop 71 | Layout.fillWidth: true 72 | } 73 | } 74 | } 75 | } 76 | } 77 | MouseArea{ 78 | id: itemMouse 79 | anchors.fill: parent 80 | onClicked: itemRoot.itemClicked(itemRoot.item, model.index) 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/styles/CardStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import "../variables/items.js" as StyleHelper 3 | Item{ 4 | id: itemRoot 5 | width: ListView.view.width 6 | height: content.implicitHeight + StyleHelper.item_padding * 2 7 | property var style: StyleHelper.parseItemClass(model.class_name) 8 | 9 | Rectangle{ 10 | anchors.fill: parent 11 | anchors.margins: - StyleHelper.item_border_width 12 | color: itemRoot.style.bg 13 | border.width: StyleHelper.item_border_width 14 | border.color: itemRoot.style.border 15 | radius: StyleHelper.card_border_radius 16 | 17 | Text { 18 | id: content 19 | text: model.text 20 | color: itemRoot.style.text 21 | font.pixelSize: StyleHelper.item_font_size 22 | anchors.fill: parent 23 | anchors.margins: StyleHelper.item_padding 24 | verticalAlignment: Text.AlignVCenter 25 | wrapMode: Text.WordWrap 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/styles/DefaulListViewStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import "../variables/items.js" as StyleHelper 3 | Item{ 4 | id: itemRoot 5 | width: ListView.view.width 6 | height: content.implicitHeight + StyleHelper.item_padding * 2 7 | property var style: StyleHelper.parseItemClass(model.class_name) 8 | signal itemClicked (var item, var index); 9 | 10 | Rectangle{ 11 | anchors.fill: parent 12 | anchors.margins: - StyleHelper.item_border_width 13 | color: itemMouse.pressed ? itemRoot.style.active_bg : itemRoot.style.bg 14 | border.width: StyleHelper.item_border_width 15 | border.color: itemMouse.pressed ? itemRoot.style.active_border : itemRoot.style.border 16 | 17 | Text{ 18 | id: content 19 | text: model.text 20 | color: itemRoot.style.text 21 | font.pixelSize: StyleHelper.item_font_size 22 | anchors.fill: parent 23 | anchors.margins: StyleHelper.item_padding 24 | verticalAlignment: Text.AlignVCenter 25 | elide: Text.ElideRight 26 | } 27 | } 28 | MouseArea{ 29 | id: itemMouse 30 | anchors.fill: parent 31 | onClicked: itemRoot.itemClicked(model, model.index) 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/styles/IconListViewStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Layouts 1.1 3 | import "../variables/badges.js" as StyleHelper 4 | import "../variables/fontawesome.js" as FontAwesome 5 | 6 | Item{ 7 | id: itemRoot 8 | width: ListView.view.width 9 | height: row.implicitHeight + StyleHelper.item_padding * 2 10 | property var item: model.modelData ? model.modelData : model 11 | property var itemStyle: StyleHelper.parseItemClass(item.class_name) 12 | property var badgeStyle: StyleHelper.parseBadgeClass(item.badge_class_name) 13 | signal itemClicked (var item, var index); 14 | 15 | Rectangle{ 16 | anchors.fill: parent 17 | anchors.margins: - StyleHelper.item_border_width 18 | color: itemMouse.pressed ? itemRoot.itemStyle.active_bg : itemRoot.itemStyle.bg 19 | border.width: StyleHelper.item_border_width 20 | border.color: itemMouse.pressed ? itemRoot.itemStyle.active_border : itemRoot.itemStyle.border 21 | RowLayout{ 22 | id: row 23 | anchors.fill: parent 24 | anchors.leftMargin: Math.ceil( (StyleHelper.item_padding / 3) * 2); 25 | anchors.rightMargin: Math.ceil( (StyleHelper.item_padding / 3) * 2); 26 | anchors.topMargin: StyleHelper.item_padding 27 | anchors.bottomMargin: StyleHelper.item_padding 28 | spacing: StyleHelper.item_padding 29 | Text{ 30 | visible: (itemRoot.item.leftIcon !== undefined && itemRoot.item.leftIcon !== "") 31 | font.family: "FontAwesome" 32 | font.pixelSize: StyleHelper.item_icon_font_size 33 | text: (itemRoot.item.leftIcon !== undefined ) ? itemRoot.item.leftIcon : "" 34 | color: itemRoot.itemStyle.text 35 | Layout.preferredWidth: 32 36 | Layout.preferredHeight: 32 37 | } 38 | 39 | Text{ 40 | text: itemRoot.item.text 41 | color: itemRoot.itemStyle.text 42 | font.pixelSize: StyleHelper.item_font_size 43 | Layout.fillWidth: true 44 | Layout.alignment: Qt.AlignVCenter 45 | verticalAlignment: Text.AlignVCenter 46 | elide: Text.ElideRight 47 | } 48 | Text{ 49 | visible: (itemRoot.item.note !== undefined && itemRoot.item.note !== "") 50 | text: (itemRoot.item.note !== undefined ) ? itemRoot.item.note : "" 51 | font.pixelSize: 14 52 | color: "#aaa" 53 | Layout.alignment: Qt.AlignVCenter 54 | } 55 | Rectangle{ 56 | visible: (itemRoot.item.badge !== undefined && itemRoot.item.badge !== "") 57 | Layout.preferredHeight: badge.height + 2 * 3 58 | Layout.preferredWidth: badge.width + 2 * 8 59 | radius: StyleHelper.badge_border_radius 60 | color: itemRoot.badgeStyle.bg 61 | Layout.alignment: Qt.AlignVCenter 62 | Text{ 63 | id: badge 64 | text: (itemRoot.item.badge !== undefined ) ? itemRoot.item.badge : "" 65 | color: itemRoot.badgeStyle.text 66 | font.weight: StyleHelper.badge_font_weight 67 | font.pixelSize: StyleHelper.badge_font_size 68 | anchors.centerIn: parent 69 | } 70 | } 71 | Text{ 72 | visible: (itemRoot.item.rightIcon !== undefined && itemRoot.item.rightIcon !== "") 73 | font.family: "FontAwesome" 74 | font.pixelSize: StyleHelper.item_icon_font_size 75 | text: (itemRoot.item.rightIcon !== undefined ) ? itemRoot.item.rightIcon : "" 76 | color: itemRoot.itemStyle.text 77 | Layout.preferredWidth: 32 78 | Layout.preferredHeight: 32 79 | Layout.alignment: Qt.AlignVCenter 80 | } 81 | } 82 | } 83 | MouseArea{ 84 | id: itemMouse 85 | anchors.fill: parent 86 | onClicked: itemRoot.itemClicked(itemRoot.item, model.index) 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/styles/ListDividerStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import "../variables/items.js" as StyleHelper 3 | Item{ 4 | id: root 5 | width: ListView.view.width 6 | height: sectionText.implicitHeight + StyleHelper.item_padding 7 | property string text 8 | 9 | Rectangle{ 10 | anchors.fill: parent 11 | anchors.margins: - StyleHelper.item_border_width 12 | color: StyleHelper.item_divider_bg 13 | border.width: StyleHelper.item_border_width 14 | border.color: StyleHelper.itemStyles.default.border 15 | 16 | Text{ 17 | id: sectionText 18 | text: root.text 19 | font.bold: true 20 | color: StyleHelper.item_divider_color 21 | font.pixelSize: StyleHelper.item_font_size 22 | anchors.fill: parent 23 | anchors.topMargin: StyleHelper.item_padding / 2 24 | anchors.leftMargin: StyleHelper.item_padding 25 | anchors.rightMargin: StyleHelper.item_padding 26 | anchors.bottomMargin: StyleHelper.item_padding / 2 27 | verticalAlignment: Text.AlignVCenter 28 | elide: Text.ElideRight 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/styles/ThumbnailListViewStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Layouts 1.1 3 | import QtGraphicalEffects 1.0 4 | import "../lists" 5 | import "../variables/badges.js" as StyleHelper 6 | import "../variables/fontawesome.js" as FontAwesome 7 | import "../content" 8 | 9 | Item{ 10 | id: itemRoot 11 | width: ListView.view.width 12 | height: row.implicitHeight + StyleHelper.item_padding * 2 13 | property List root 14 | property var item: model.modelData ? model.modelData : model 15 | property var itemStyle: StyleHelper.parseItemClass(item.class_name) 16 | property var badgeStyle: StyleHelper.parseBadgeClass(item.badge_class_name) 17 | signal itemClicked (var item, var index); 18 | 19 | Rectangle{ 20 | anchors.fill: parent 21 | anchors.margins: - StyleHelper.item_border_width 22 | color: itemMouse.pressed ? itemRoot.itemStyle.active_bg : itemRoot.itemStyle.bg 23 | border.width: StyleHelper.item_border_width 24 | border.color: itemMouse.pressed ? itemRoot.itemStyle.active_border : itemRoot.itemStyle.border 25 | RowLayout{ 26 | id: row 27 | anchors.fill: parent 28 | anchors.margins: StyleHelper.item_padding 29 | spacing: StyleHelper.item_padding 30 | Image{ 31 | Layout.preferredWidth: StyleHelper.item_thumbnail_width 32 | Layout.preferredHeight: StyleHelper.item_thumbnail_height 33 | source: itemRoot.item.avatar 34 | smooth: true 35 | } 36 | Item{ 37 | Layout.fillHeight: true 38 | Layout.fillWidth: true 39 | 40 | ColumnLayout{ 41 | anchors.fill: parent 42 | TextContent{ 43 | text: itemRoot.item.title 44 | class_name: "h2" 45 | style: StyleHelper.parseItemTextClass(class_name) 46 | elide: Text.ElideRight 47 | Layout.alignment: Qt.AlignTop 48 | Layout.fillWidth: true 49 | } 50 | TextContent{ 51 | text: itemRoot.item.detail 52 | color: "#666" 53 | elide: Text.ElideRight 54 | verticalAlignment: Text.AlignTop 55 | Layout.alignment: Qt.AlignTop 56 | Layout.fillHeight: true 57 | Layout.fillWidth: true 58 | } 59 | } 60 | } 61 | } 62 | } 63 | MouseArea{ 64 | id: itemMouse 65 | anchors.fill: parent 66 | onClicked: itemRoot.itemClicked(itemRoot.item, model.index) 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/styles/TouchClearStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Controls.Styles 1.2 3 | import QtQuick.Layouts 1.1 4 | import "../variables/bars.js" as StyleHelper 5 | 6 | ButtonStyle { 7 | id: root 8 | property variant style 9 | property variant size 10 | background: Item { 11 | clip: true 12 | Rectangle { 13 | width: StyleHelper.hasClass('full', control.class_name) ? parent.width + 2 *StyleHelper.button_border_width : parent.width 14 | height: parent.height 15 | anchors.centerIn: parent 16 | color: "transparent" 17 | border.color: "transparent" 18 | border.width: StyleHelper.button_border_width 19 | radius: StyleHelper.hasClass('full', control.class_name) ? 0 : StyleHelper.button_border_radius 20 | smooth: true 21 | } 22 | } 23 | label: RowLayout{ 24 | spacing: 10 25 | anchors.fill: parent 26 | anchors.leftMargin: root.size.padding 27 | anchors.rightMargin: root.size.padding 28 | 29 | layoutDirection: control.iconRight ? Qt.RightToLeft : Qt.LeftToRight 30 | opacity: (control.pressed || control.selected) ? 0.3 : 1 31 | 32 | Text { 33 | visible: control.icon !== "" 34 | horizontalAlignment: Text.AlignHCenter 35 | verticalAlignment: Text.AlignVCenter 36 | text: control.icon 37 | font.family: "FontAwesome" 38 | font.pixelSize: control.iconSize 39 | color: root.style.border 40 | Layout.alignment: Qt.AlignVCenter 41 | } 42 | Text { 43 | visible: control.text !== "" 44 | horizontalAlignment: Text.AlignHCenter 45 | verticalAlignment: Text.AlignVCenter 46 | text: control.text 47 | font.pixelSize: control.fontSize 48 | color: root.style.border 49 | Layout.alignment: Qt.AlignCenter 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/styles/TouchOutlineStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Controls.Styles 1.2 3 | import QtQuick.Layouts 1.1 4 | import "../variables/buttons.js" as StyleHelper 5 | 6 | ButtonStyle { 7 | id: root 8 | property variant style 9 | property variant size 10 | background: Item { 11 | clip: true 12 | Rectangle{ 13 | width: StyleHelper.hasClass('full', control.class_name) ? parent.width + 2 *StyleHelper.button_border_width : parent.width 14 | height: parent.height 15 | anchors.centerIn: parent 16 | color: (control.pressed || control.selected) ? root.style.border : "transparent" 17 | border.color: style.active_border 18 | border.width: StyleHelper.button_border_width 19 | radius: StyleHelper.hasClass('full', control.class_name) ? 0 : StyleHelper.button_border_radius 20 | smooth: true 21 | } 22 | } 23 | label: RowLayout{ 24 | spacing: 10 25 | anchors.fill: parent 26 | anchors.leftMargin: root.size.padding 27 | anchors.rightMargin: root.size.padding 28 | 29 | layoutDirection: control.iconRight ? Qt.RightToLeft : Qt.LeftToRight 30 | 31 | Text { 32 | visible: control.icon !== "" 33 | horizontalAlignment: Text.AlignHCenter 34 | verticalAlignment: Text.AlignVCenter 35 | text: control.icon 36 | font.family: "FontAwesome" 37 | font.pixelSize: control.iconSize 38 | color: (control.pressed || control.selected) ? "#fff" : root.style.border 39 | Layout.alignment: Qt.AlignVCenter 40 | } 41 | Text { 42 | visible: control.text !== "" 43 | horizontalAlignment: Text.AlignHCenter 44 | verticalAlignment: Text.AlignVCenter 45 | text: control.text 46 | font.pixelSize: control.fontSize 47 | color: (control.pressed || control.selected) ? "#fff" : root.style.border 48 | Layout.alignment: Qt.AlignCenter 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/styles/TouchStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Controls.Styles 1.2 3 | import QtQuick.Layouts 1.1 4 | import "../variables/buttons.js" as StyleHelper 5 | 6 | ButtonStyle { 7 | id: root 8 | property variant style 9 | property variant size 10 | background: Item { 11 | clip: true 12 | Rectangle{ 13 | width: StyleHelper.hasClass('full', control.class_name) ? parent.width + 2 *StyleHelper.button_border_width : parent.width 14 | height: parent.height 15 | anchors.centerIn: parent 16 | color: (control.pressed || control.selected) ? style.active_bg :style.bg 17 | border.color: (control.pressed || control.selected) ? style.active_border : style.border 18 | border.width: StyleHelper.button_border_width 19 | radius: StyleHelper.hasClass('full', control.class_name) ? 0 : StyleHelper.button_border_radius 20 | smooth: true 21 | Rectangle { 22 | visible: (control.pressed || control.selected) 23 | anchors.fill: parent 24 | gradient: Gradient { 25 | GradientStop { position: 0.0; color: "#26000000" } 26 | GradientStop { position: 0.1; color: "transparent" } 27 | } 28 | } 29 | } 30 | } 31 | label: RowLayout{ 32 | spacing: 10 33 | anchors.fill: parent 34 | anchors.leftMargin: root.size.padding 35 | anchors.rightMargin: root.size.padding 36 | 37 | layoutDirection: control.iconRight ? Qt.RightToLeft : Qt.LeftToRight 38 | 39 | Text { 40 | visible: control.icon !== "" 41 | horizontalAlignment: Text.AlignHCenter 42 | verticalAlignment: Text.AlignVCenter 43 | text: control.icon 44 | font.family: "FontAwesome" 45 | font.pixelSize: control.iconSize 46 | color: root.style.text 47 | Layout.alignment: Qt.AlignVCenter 48 | } 49 | Text { 50 | visible: control.text !== "" 51 | horizontalAlignment: Text.AlignHCenter 52 | verticalAlignment: Text.AlignVCenter 53 | text: control.text 54 | font.pixelSize: control.fontSize 55 | color: root.style.text 56 | Layout.alignment: Qt.AlignCenter 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/variables/badges.js: -------------------------------------------------------------------------------- 1 | Qt.include("items.js"); 2 | 3 | function parseBadgeClass (className) { 4 | var type = badgeStyles.default 5 | if (!className) { 6 | return type; 7 | } 8 | 9 | var classes = className.split(' '); 10 | 11 | for (var i = 0; i < classes.length; ++i) { 12 | var trimClass = classes[i].trim(); 13 | var style = badgeStyles[trimClass]; 14 | if (style) { 15 | type = style; 16 | } 17 | } 18 | return type; 19 | } 20 | 21 | var badge_font_size = 14; 22 | var badge_border_radius = 10; 23 | var badge_font_weight = 75 24 | 25 | var badgeStyles = { 26 | light: { 27 | bg : buttonStyles.light.bg, 28 | text : buttonStyles.light.text 29 | }, 30 | stable: { 31 | bg : buttonStyles.stable.bg, 32 | text : buttonStyles.stable.text 33 | }, 34 | positive: { 35 | bg : buttonStyles.positive.bg, 36 | text : buttonStyles.positive.text 37 | }, 38 | calm: { 39 | bg : buttonStyles.calm.bg, 40 | text : buttonStyles.calm.text 41 | }, 42 | assertive: { 43 | bg : buttonStyles.assertive.bg, 44 | text : buttonStyles.assertive.text 45 | }, 46 | balanced: { 47 | bg : buttonStyles.balanced.bg, 48 | text : buttonStyles.balanced.text 49 | }, 50 | energized: { 51 | bg : buttonStyles.energized.bg, 52 | text : buttonStyles.energized.text 53 | }, 54 | royal: { 55 | bg : buttonStyles.royal.bg, 56 | text : buttonStyles.royal.text 57 | }, 58 | dark: { 59 | bg : buttonStyles.dark.bg, 60 | text : buttonStyles.dark.text 61 | }, 62 | default: { 63 | bg : "transparent", 64 | text : "#AAAAAA" 65 | } 66 | }; 67 | -------------------------------------------------------------------------------- /src/variables/bars.js: -------------------------------------------------------------------------------- 1 | Qt.include("buttons.js"); 2 | 3 | var bar_height = 44; 4 | var bar_title_font_size = 17; 5 | var bar_padding_portrait = 5; 6 | var bar_padding_landscape = 5; 7 | var bar_transparency = 1; 8 | 9 | function parseBarClass (className) { 10 | var style = barStyles.default; 11 | var classes = className.split(' '); 12 | 13 | for (var i = 0; i < classes.length; ++i) { 14 | var trimClass = classes[i].trim(); 15 | var _style = barStyles[trimClass]; 16 | 17 | if (_style) { 18 | style = _style; 19 | } 20 | } 21 | return style; 22 | } 23 | 24 | var barStyles = { 25 | light: { 26 | bg : color.light, 27 | text : "#444", 28 | border : "#ddd", 29 | active_bg : "#fafafa", 30 | active_border : "#ccc" 31 | }, 32 | stable: { 33 | bg : color.stable, 34 | text : "#444", 35 | border : "#b2b2b2", 36 | active_bg : "#e5e5e5", 37 | active_border : "#a2a2a2" 38 | }, 39 | positive: { 40 | bg : color.positive, 41 | text : "#fff", 42 | border : Qt.darker(color.positive, 1.18), 43 | active_bg : Qt.darker(color.positive, 1.18), 44 | active_border : Qt.darker(color.positive, 1.18) 45 | }, 46 | calm: { 47 | bg : color.calm, 48 | text : "#fff", 49 | border : Qt.darker(color.calm, 1.18), 50 | active_bg : Qt.darker(color.calm, 1.18), 51 | active_border : Qt.darker(color.calm, 1.18) 52 | }, 53 | assertive: { 54 | bg : color.assertive, 55 | text : "#fff", 56 | border : Qt.darker(color.assertive, 1.18), 57 | active_bg : Qt.darker(color.assertive, 1.18), 58 | active_border : Qt.darker(color.assertive, 1.18) 59 | }, 60 | balanced: { 61 | bg : color.balanced, 62 | text : "#fff", 63 | border : Qt.darker(color.balanced, 1.18), 64 | active_bg : Qt.darker(color.balanced, 1.18), 65 | active_border : Qt.darker(color.balanced, 1.18) 66 | }, 67 | energized: { 68 | bg : color.energized, 69 | text : "#fff", 70 | border : Qt.darker(color.energized, 1.18), 71 | active_bg : Qt.darker(color.energized, 1.18), 72 | active_border : Qt.darker(color.energized, 1.18) 73 | }, 74 | royal: { 75 | bg : color.royal, 76 | text : "#fff", 77 | border : Qt.darker(color.royal, 1.18), 78 | active_bg : Qt.darker(color.royal, 1.18), 79 | active_border : Qt.darker(color.royal, 1.18) 80 | }, 81 | dark: { 82 | bg : color.dark, 83 | text : "#fff", 84 | border : Qt.darker(color.dark, 1.18), 85 | active_bg : Qt.darker(color.dark, 1.18), 86 | active_border : Qt.darker(color.dark, 1.18) 87 | }, 88 | default: { 89 | bg : color.light, 90 | text : "#444", 91 | border : "#ddd", 92 | active_bg : "#fafafa", 93 | active_border : "#ccc" 94 | } 95 | }; 96 | -------------------------------------------------------------------------------- /src/variables/base.js: -------------------------------------------------------------------------------- 1 | Qt.include("colors.js"); 2 | 3 | var font_family_sans_serif = "Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"; 4 | var font_family_light_sans_serif = "Helvetica Neue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"; 5 | var font_family_serif = "Georgia, Times New Roman, Times, serif"; 6 | var font_family_monospace = "Monaco, Menlo, Consolas, Courier New, monospace"; 7 | 8 | var font_family_base = font_family_sans_serif; 9 | var font_size_base = 14; 10 | var font_size_large = 18; 11 | var font_size_small = 11; 12 | 13 | var line_height_base = 1.428571429; // 20/14 14 | var line_height_computed = Math.floor(font_size_base * line_height_base); // ~20 15 | var line_height_large = 1.33; 16 | var line_height_small = 1.5; 17 | 18 | var headings_font_family = font_family_base; 19 | var headings_font_weight = 63; 20 | var headings_line_height = 1.2; 21 | 22 | var base_background_color = "#fff"; 23 | var base_color = "#000"; 24 | 25 | var link_color = color.positive; 26 | var link_hover_color = Qt.darker(link_color, 1.18); 27 | 28 | var content_padding = 10; 29 | 30 | var padding_base_vertical = 6; 31 | var padding_base_horizontal = 12; 32 | 33 | var padding_large_vertical = 10; 34 | var padding_large_horizontal = 16; 35 | 36 | var padding_small_vertical = 5; 37 | var padding_small_horizontal = 10; 38 | 39 | var border_radius_base = 4; 40 | var border_radius_large = 6; 41 | var border_radius_small = 3; 42 | 43 | function parseTextClass (className) { 44 | var style = { 45 | font_size: font_size_base, 46 | font_weight: 50, 47 | line_height: 1.25 48 | }; 49 | 50 | var classes = className.split(' '); 51 | for (var i = 0; i < classes.length; ++i) { 52 | var trimClass = classes[i].trim(); 53 | var size = textStyles[trimClass]; 54 | if (size) { 55 | style = size 56 | } 57 | } 58 | return style; 59 | } 60 | 61 | var textStyles = { 62 | h1: { 63 | font_size: Math.floor(font_size_base * 2.60), 64 | font_weight: headings_font_weight, 65 | line_height: headings_line_height 66 | }, 67 | h2: { 68 | font_size: Math.floor(font_size_base * 2.15), 69 | font_weight: headings_font_weight, 70 | line_height: headings_line_height 71 | }, 72 | h3: { 73 | font_size: Math.floor(font_size_base * 1.70), 74 | font_weight: headings_font_weight, 75 | line_height: headings_line_height 76 | }, 77 | h4: { 78 | font_size: Math.floor(font_size_base * 1.25), 79 | font_weight: headings_font_weight, 80 | line_height: headings_line_height 81 | }, 82 | h5: { 83 | font_size: Math.floor(font_size_base), 84 | font_weight: headings_font_weight, 85 | line_height: headings_line_height 86 | }, 87 | h6: { 88 | font_size: Math.floor(font_size_base * 0.85), 89 | font_weight: headings_font_weight, 90 | line_height: headings_line_height 91 | } 92 | }; 93 | 94 | function hasClass(name, className) { 95 | return className.indexOf(name) !== -1; 96 | } 97 | 98 | function hasOnClass(names, class_name) { 99 | var _names = names.splite(' '); 100 | for(var i = 0; i <_names.length; ++i) { 101 | if (className.indexOf(_names[i]) !== -1) { 102 | return true; 103 | } 104 | } 105 | return false; 106 | } 107 | -------------------------------------------------------------------------------- /src/variables/buttons.js: -------------------------------------------------------------------------------- 1 | Qt.include("base.js"); 2 | 3 | function parseButtonClass (className) { 4 | var type = { 5 | style: buttonStyles.default, 6 | size: buttonSizes.default 7 | }; 8 | var classes = className.split(' '); 9 | 10 | for (var i = 0; i < classes.length; ++i) { 11 | var trimClass = classes[i].trim(); 12 | var size = buttonSizes[trimClass]; 13 | var style = buttonStyles[trimClass]; 14 | if (size) { 15 | type.size = size; 16 | } 17 | if (style) { 18 | type.style = style; 19 | } 20 | } 21 | return type; 22 | } 23 | 24 | var button_color = "#222"; 25 | var button_block_margin = 10; 26 | var button_clear_padding = 6; 27 | var button_border_radius = 2; 28 | var button_border_width = 1; 29 | 30 | var buttonSizes = { 31 | "default": { 32 | font_size : 16, 33 | height : 42, 34 | padding : 12, 35 | icon_size : 24 36 | }, 37 | large: { 38 | font_size : 20, 39 | height : 54, 40 | padding : 16, 41 | icon_size : 32 42 | }, 43 | small: { 44 | font_size : 12, 45 | height : 28, 46 | padding : 4, 47 | icon_size : 16 48 | }, 49 | bar: { 50 | font_size : 13, 51 | height : 32, 52 | padding : 8, 53 | icon_size : 20 54 | } 55 | }; 56 | 57 | var buttonStyles = { 58 | light: { 59 | bg : color.light, 60 | text : "#444", 61 | border : "#ddd", 62 | active_bg : "#fafafa", 63 | active_border : "#ccc" 64 | }, 65 | stable: { 66 | bg : color.stable, 67 | text : "#444", 68 | border : "#b2b2b2", 69 | active_bg : "#e5e5e5", 70 | active_border : "#a2a2a2" 71 | }, 72 | positive: { 73 | bg : color.positive, 74 | text : "#fff", 75 | border : Qt.darker(color.positive, 1.18), 76 | active_bg : Qt.darker(color.positive, 1.18), 77 | active_border : Qt.darker(color.positive, 1.18) 78 | }, 79 | calm: { 80 | bg : color.calm, 81 | text : "#fff", 82 | border : Qt.darker(color.calm, 1.18), 83 | active_bg : Qt.darker(color.calm, 1.18), 84 | active_border : Qt.darker(color.calm, 1.18) 85 | }, 86 | assertive: { 87 | bg : color.assertive, 88 | text : "#fff", 89 | border : Qt.darker(color.assertive, 1.18), 90 | active_bg : Qt.darker(color.assertive, 1.18), 91 | active_border : Qt.darker(color.assertive, 1.18) 92 | }, 93 | balanced: { 94 | bg : color.balanced, 95 | text : "#fff", 96 | border : Qt.darker(color.balanced, 1.18), 97 | active_bg : Qt.darker(color.balanced, 1.18), 98 | active_border : Qt.darker(color.balanced, 1.18) 99 | }, 100 | energized: { 101 | bg : color.energized, 102 | text : "#fff", 103 | border : Qt.darker(color.energized, 1.18), 104 | active_bg : Qt.darker(color.energized, 1.18), 105 | active_border : Qt.darker(color.energized, 1.18) 106 | }, 107 | royal: { 108 | bg : color.royal, 109 | text : "#fff", 110 | border : Qt.darker(color.royal, 1.18), 111 | active_bg : Qt.darker(color.royal, 1.18), 112 | active_border : Qt.darker(color.royal, 1.18) 113 | }, 114 | dark: { 115 | bg : color.dark, 116 | text : "#fff", 117 | border : Qt.darker(color.dark, 1.18), 118 | active_bg : Qt.darker(color.dark, 1.18), 119 | active_border : Qt.darker(color.dark, 1.18) 120 | }, 121 | default: { 122 | bg : color.stable, 123 | text : "#444", 124 | border : "#b2b2b2", 125 | active_bg : "#e5e5e5", 126 | active_border : "#a2a2a2" 127 | } 128 | }; 129 | -------------------------------------------------------------------------------- /src/variables/colors.js: -------------------------------------------------------------------------------- 1 | 2 | var color = { 3 | light: "#fff", 4 | stable: "#f8f8f8", 5 | positive: "#4a87ee", 6 | calm: "#43cee6", 7 | balanced: "#66cc33", 8 | energized: "#f0b840", 9 | assertive: "#ef4e3a", 10 | royal: "#8a6de9", 11 | dark: "#444" 12 | } 13 | -------------------------------------------------------------------------------- /src/variables/fontawesome.js: -------------------------------------------------------------------------------- 1 | 2 | var icons = { 3 | fa_adjust : "\uf042", 4 | fa_adn : "\uf170", 5 | fa_align_center : "\uf037", 6 | fa_align_justify : "\uf039", 7 | fa_align_left : "\uf036", 8 | fa_align_right : "\uf038", 9 | fa_ambulance : "\uf0f9", 10 | fa_anchor : "\uf13d", 11 | fa_android : "\uf17b", 12 | fa_angellist : "\uf209", 13 | fa_angle_double_down : "\uf103", 14 | fa_angle_double_left : "\uf100", 15 | fa_angle_double_right : "\uf101", 16 | fa_angle_double_up : "\uf102", 17 | fa_angle_down : "\uf107", 18 | fa_angle_left : "\uf104", 19 | fa_angle_right : "\uf105", 20 | fa_angle_up : "\uf106", 21 | fa_apple : "\uf179", 22 | fa_archive : "\uf187", 23 | fa_arrow_circle_down : "\uf0ab", 24 | fa_arrow_circle_left : "\uf0a8", 25 | fa_arrow_circle_o_down : "\uf01a", 26 | fa_arrow_circle_o_left : "\uf190", 27 | fa_arrow_circle_o_right : "\uf18e", 28 | fa_arrow_circle_o_up : "\uf01b", 29 | fa_arrow_circle_right : "\uf0a9", 30 | fa_arrow_circle_up : "\uf0aa", 31 | fa_arrow_down : "\uf063", 32 | fa_arrow_left : "\uf060", 33 | fa_arrow_right : "\uf061", 34 | fa_arrow_up : "\uf062", 35 | fa_arrows : "\uf047", 36 | fa_arrows_alt : "\uf0b2", 37 | fa_arrows_h : "\uf07e", 38 | fa_arrows_v : "\uf07d", 39 | fa_asterisk : "\uf069", 40 | fa_automobile : "\uf1b9", 41 | fa_backward : "\uf04a", 42 | fa_ban : "\uf05e", 43 | fa_bank : "\uf19c", 44 | fa_bar_chart_o : "\uf080", 45 | fa_barcode : "\uf02a", 46 | fa_bars : "\uf0c9", 47 | fa_beer : "\uf0fc", 48 | fa_behance : "\uf1b4", 49 | fa_behance_square : "\uf1b5", 50 | fa_bell : "\uf0f3", 51 | fa_bell_o : "\uf0a2", 52 | fa_bell_slash_o : "\uf1f7", 53 | fa_bitbucket : "\uf171", 54 | fa_bitbucket_square : "\uf172", 55 | fa_bitcoin : "\uf15a", 56 | fa_bold : "\uf032", 57 | fa_bolt : "\uf0e7", 58 | fa_bomb : "\uf1e2", 59 | fa_book : "\uf02d", 60 | fa_bookmark : "\uf02e", 61 | fa_bookmark_o : "\uf097", 62 | fa_briefcase : "\uf0b1", 63 | fa_btc : "\uf15a", 64 | fa_bug : "\uf188", 65 | fa_building : "\uf1ad", 66 | fa_building_o : "\uf0f7", 67 | fa_bullhorn : "\uf0a1", 68 | fa_bullseye : "\uf140", 69 | fa_cab : "\uf1ba", 70 | fa_calendar : "\uf073", 71 | fa_calendar_o : "\uf133", 72 | fa_camera : "\uf030", 73 | fa_camera_retro : "\uf083", 74 | fa_car : "\uf1b9", 75 | fa_caret_down : "\uf0d7", 76 | fa_caret_left : "\uf0d9", 77 | fa_caret_right : "\uf0da", 78 | fa_caret_square_o_down : "\uf150", 79 | fa_caret_square_o_left : "\uf191", 80 | fa_caret_square_o_right : "\uf152", 81 | fa_caret_square_o_up : "\uf151", 82 | fa_caret_up : "\uf0d8", 83 | fa_certificate : "\uf0a3", 84 | fa_chain : "\uf0c1", 85 | fa_chain_broken : "\uf127", 86 | fa_check : "\uf00c", 87 | fa_check_circle : "\uf058", 88 | fa_check_circle_o : "\uf05d", 89 | fa_check_square : "\uf14a", 90 | fa_check_square_o : "\uf046", 91 | fa_chevron_circle_down : "\uf13a", 92 | fa_chevron_circle_left : "\uf137", 93 | fa_chevron_circle_right : "\uf138", 94 | fa_chevron_circle_up : "\uf139", 95 | fa_chevron_down : "\uf078", 96 | fa_chevron_left : "\uf053", 97 | fa_chevron_right : "\uf054", 98 | fa_chevron_up : "\uf077", 99 | fa_child : "\uf1ae", 100 | fa_circle : "\uf111", 101 | fa_circle_o : "\uf10c", 102 | fa_circle_o_notch : "\uf1ce", 103 | fa_circle_thin : "\uf1db", 104 | fa_clipboard : "\uf0ea", 105 | fa_clock_o : "\uf017", 106 | fa_cloud : "\uf0c2", 107 | fa_cloud_download : "\uf0ed", 108 | fa_cloud_upload : "\uf0ee", 109 | fa_cny : "\uf157", 110 | fa_code : "\uf121", 111 | fa_code_fork : "\uf126", 112 | fa_codepen : "\uf1cb", 113 | fa_coffee : "\uf0f4", 114 | fa_cog : "\uf013", 115 | fa_cogs : "\uf085", 116 | fa_columns : "\uf0db", 117 | fa_comment : "\uf075", 118 | fa_comment_o : "\uf0e5", 119 | fa_comments : "\uf086", 120 | fa_comments_o : "\uf0e6", 121 | fa_compass : "\uf14e", 122 | fa_compress : "\uf066", 123 | fa_copy : "\uf0c5", 124 | fa_credit_card : "\uf09d", 125 | fa_crop : "\uf125", 126 | fa_crosshairs : "\uf05b", 127 | fa_css3 : "\uf13c", 128 | fa_cube : "\uf1b2", 129 | fa_cubes : "\uf1b3", 130 | fa_cut : "\uf0c4", 131 | fa_cutlery : "\uf0f5", 132 | fa_dashboard : "\uf0e4", 133 | fa_database : "\uf1c0", 134 | fa_dedent : "\uf03b", 135 | fa_delicious : "\uf1a5", 136 | fa_desktop : "\uf108", 137 | fa_deviantart : "\uf1bd", 138 | fa_digg : "\uf1a6", 139 | fa_dollar : "\uf155", 140 | fa_dot_circle_o : "\uf192", 141 | fa_download : "\uf019", 142 | fa_dribbble : "\uf17d", 143 | fa_dropbox : "\uf16b", 144 | fa_drupal : "\uf1a9", 145 | fa_edit : "\uf044", 146 | fa_eject : "\uf052", 147 | fa_ellipsis_h : "\uf141", 148 | fa_ellipsis_v : "\uf142", 149 | fa_empire : "\uf1d1", 150 | fa_envelope : "\uf0e0", 151 | fa_envelope_o : "\uf003", 152 | fa_envelope_square : "\uf199", 153 | fa_eraser : "\uf12d", 154 | fa_eur : "\uf153", 155 | fa_euro : "\uf153", 156 | fa_exchange : "\uf0ec", 157 | fa_exclamation : "\uf12a", 158 | fa_exclamation_circle : "\uf06a", 159 | fa_exclamation_triangle : "\uf071", 160 | fa_expand : "\uf065", 161 | fa_external_link : "\uf08e", 162 | fa_external_link_square : "\uf14c", 163 | fa_eye : "\uf06e", 164 | fa_eye_slash : "\uf070", 165 | fa_facebook : "\uf09a", 166 | fa_facebook_square : "\uf082", 167 | fa_fast_backward : "\uf049", 168 | fa_fast_forward : "\uf050", 169 | fa_fax : "\uf1ac", 170 | fa_female : "\uf182", 171 | fa_fighter_jet : "\uf0fb", 172 | fa_file : "\uf15b", 173 | fa_file_archive_o : "\uf1c6", 174 | fa_file_audio_o : "\uf1c7", 175 | fa_file_code_o : "\uf1c9", 176 | fa_file_excel_o : "\uf1c3", 177 | fa_file_image_o : "\uf1c5", 178 | fa_file_movie_o : "\uf1c8", 179 | fa_file_o : "\uf016", 180 | fa_file_pdf_o : "\uf1c1", 181 | fa_file_photo_o : "\uf1c5", 182 | fa_file_picture_o : "\uf1c5", 183 | fa_file_powerpoint_o : "\uf1c4", 184 | fa_file_sound_o : "\uf1c7", 185 | fa_file_text : "\uf15c", 186 | fa_file_text_o : "\uf0f6", 187 | fa_file_video_o : "\uf1c8", 188 | fa_file_word_o : "\uf1c2", 189 | fa_file_zip_o : "\uf1c6", 190 | fa_files_o : "\uf0c5", 191 | fa_film : "\uf008", 192 | fa_filter : "\uf0b0", 193 | fa_fire : "\uf06d", 194 | fa_fire_extinguisher : "\uf134", 195 | fa_flag : "\uf024", 196 | fa_flag_checkered : "\uf11e", 197 | fa_flag_o : "\uf11d", 198 | fa_flash : "\uf0e7", 199 | fa_flask : "\uf0c3", 200 | fa_flickr : "\uf16e", 201 | fa_floppy_o : "\uf0c7", 202 | fa_folder : "\uf07b", 203 | fa_folder_o : "\uf114", 204 | fa_folder_open : "\uf07c", 205 | fa_folder_open_o : "\uf115", 206 | fa_font : "\uf031", 207 | fa_forward : "\uf04e", 208 | fa_foursquare : "\uf180", 209 | fa_frown_o : "\uf119", 210 | fa_gamepad : "\uf11b", 211 | fa_gavel : "\uf0e3", 212 | fa_gbp : "\uf154", 213 | fa_ge : "\uf1d1", 214 | fa_gear : "\uf013", 215 | fa_gears : "\uf085", 216 | fa_gift : "\uf06b", 217 | fa_git : "\uf1d3", 218 | fa_git_square : "\uf1d2", 219 | fa_github : "\uf09b", 220 | fa_github_alt : "\uf113", 221 | fa_github_square : "\uf092", 222 | fa_gittip : "\uf184", 223 | fa_glass : "\uf000", 224 | fa_globe : "\uf0ac", 225 | fa_google : "\uf1a0", 226 | fa_google_plus : "\uf0d5", 227 | fa_google_plus_square : "\uf0d4", 228 | fa_graduation_cap : "\uf19d", 229 | fa_group : "\uf0c0", 230 | fa_h_square : "\uf0fd", 231 | fa_hacker_news : "\uf1d4", 232 | fa_hand_o_down : "\uf0a7", 233 | fa_hand_o_left : "\uf0a5", 234 | fa_hand_o_right : "\uf0a4", 235 | fa_hand_o_up : "\uf0a6", 236 | fa_hdd_o : "\uf0a0", 237 | fa_header : "\uf1dc", 238 | fa_headphones : "\uf025", 239 | fa_heart : "\uf004", 240 | fa_heart_o : "\uf08a", 241 | fa_history : "\uf1da", 242 | fa_home : "\uf015", 243 | fa_hospital_o : "\uf0f8", 244 | fa_html5 : "\uf13b", 245 | fa_image : "\uf03e", 246 | fa_inbox : "\uf01c", 247 | fa_indent : "\uf03c", 248 | fa_info : "\uf129", 249 | fa_info_circle : "\uf05a", 250 | fa_inr : "\uf156", 251 | fa_instagram : "\uf16d", 252 | fa_institution : "\uf19c", 253 | fa_italic : "\uf033", 254 | fa_joomla : "\uf1aa", 255 | fa_jpy : "\uf157", 256 | fa_jsfiddle : "\uf1cc", 257 | fa_key : "\uf084", 258 | fa_keyboard_o : "\uf11c", 259 | fa_krw : "\uf159", 260 | fa_language : "\uf1ab", 261 | fa_laptop : "\uf109", 262 | fa_leaf : "\uf06c", 263 | fa_legal : "\uf0e3", 264 | fa_lemon_o : "\uf094", 265 | fa_level_down : "\uf149", 266 | fa_level_up : "\uf148", 267 | fa_life_bouy : "\uf1cd", 268 | fa_life_ring : "\uf1cd", 269 | fa_life_saver : "\uf1cd", 270 | fa_lightbulb_o : "\uf0eb", 271 | fa_link : "\uf0c1", 272 | fa_linkedin : "\uf0e1", 273 | fa_linkedin_square : "\uf08c", 274 | fa_linux : "\uf17c", 275 | fa_list : "\uf03a", 276 | fa_list_alt : "\uf022", 277 | fa_list_ol : "\uf0cb", 278 | fa_list_ul : "\uf0ca", 279 | fa_location_arrow : "\uf124", 280 | fa_lock : "\uf023", 281 | fa_long_arrow_down : "\uf175", 282 | fa_long_arrow_left : "\uf177", 283 | fa_long_arrow_right : "\uf178", 284 | fa_long_arrow_up : "\uf176", 285 | fa_magic : "\uf0d0", 286 | fa_magnet : "\uf076", 287 | fa_mail_forward : "\uf064", 288 | fa_mail_reply : "\uf112", 289 | fa_mail_reply_all : "\uf122", 290 | fa_male : "\uf183", 291 | fa_map_marker : "\uf041", 292 | fa_maxcdn : "\uf136", 293 | fa_medkit : "\uf0fa", 294 | fa_meh_o : "\uf11a", 295 | fa_microphone : "\uf130", 296 | fa_microphone_slash : "\uf131", 297 | fa_minus : "\uf068", 298 | fa_minus_circle : "\uf056", 299 | fa_minus_square : "\uf146", 300 | fa_minus_square_o : "\uf147", 301 | fa_mobile : "\uf10b", 302 | fa_mobile_phone : "\uf10b", 303 | fa_money : "\uf0d6", 304 | fa_moon_o : "\uf186", 305 | fa_mortar_board : "\uf19d", 306 | fa_music : "\uf001", 307 | fa_navicon : "\uf0c9", 308 | fa_openid : "\uf19b", 309 | fa_outdent : "\uf03b", 310 | fa_pagelines : "\uf18c", 311 | fa_paper_plane : "\uf1d8", 312 | fa_paper_plane_o : "\uf1d9", 313 | fa_paperclip : "\uf0c6", 314 | fa_paragraph : "\uf1dd", 315 | fa_paste : "\uf0ea", 316 | fa_pause : "\uf04c", 317 | fa_paw : "\uf1b0", 318 | fa_pencil : "\uf040", 319 | fa_pencil_square : "\uf14b", 320 | fa_pencil_square_o : "\uf044", 321 | fa_phone : "\uf095", 322 | fa_phone_square : "\uf098", 323 | fa_photo : "\uf03e", 324 | fa_picture_o : "\uf03e", 325 | fa_pied_piper : "\uf1a7", 326 | fa_pied_piper_alt : "\uf1a8", 327 | fa_pied_piper_square : "\uf1a7", 328 | fa_pinterest : "\uf0d2", 329 | fa_pinterest_square : "\uf0d3", 330 | fa_plane : "\uf072", 331 | fa_play : "\uf04b", 332 | fa_play_circle : "\uf144", 333 | fa_play_circle_o : "\uf01d", 334 | fa_plus : "\uf067", 335 | fa_plus_circle : "\uf055", 336 | fa_plus_square : "\uf0fe", 337 | fa_plus_square_o : "\uf196", 338 | fa_power_off : "\uf011", 339 | fa_print : "\uf02f", 340 | fa_puzzle_piece : "\uf12e", 341 | fa_qq : "\uf1d6", 342 | fa_qrcode : "\uf029", 343 | fa_question : "\uf128", 344 | fa_question_circle : "\uf059", 345 | fa_quote_left : "\uf10d", 346 | fa_quote_right : "\uf10e", 347 | fa_ra : "\uf1d0", 348 | fa_random : "\uf074", 349 | fa_rebel : "\uf1d0", 350 | fa_recycle : "\uf1b8", 351 | fa_reddit : "\uf1a1", 352 | fa_reddit_square : "\uf1a2", 353 | fa_refresh : "\uf021", 354 | fa_renren : "\uf18b", 355 | fa_reorder : "\uf0c9", 356 | fa_repeat : "\uf01e", 357 | fa_reply : "\uf112", 358 | fa_reply_all : "\uf122", 359 | fa_retweet : "\uf079", 360 | fa_rmb : "\uf157", 361 | fa_road : "\uf018", 362 | fa_rocket : "\uf135", 363 | fa_rotate_left : "\uf0e2", 364 | fa_rotate_right : "\uf01e", 365 | fa_rouble : "\uf158", 366 | fa_rss : "\uf09e", 367 | fa_rss_square : "\uf143", 368 | fa_rub : "\uf158", 369 | fa_ruble : "\uf158", 370 | fa_rupee : "\uf156", 371 | fa_save : "\uf0c7", 372 | fa_scissors : "\uf0c4", 373 | fa_search : "\uf002", 374 | fa_search_minus : "\uf010", 375 | fa_search_plus : "\uf00e", 376 | fa_send : "\uf1d8", 377 | fa_send_o : "\uf1d9", 378 | fa_share : "\uf064", 379 | fa_share_alt : "\uf1e0", 380 | fa_share_alt_square : "\uf1e1", 381 | fa_share_square : "\uf14d", 382 | fa_share_square_o : "\uf045", 383 | fa_shield : "\uf132", 384 | fa_shopping_cart : "\uf07a", 385 | fa_sign_in : "\uf090", 386 | fa_sign_out : "\uf08b", 387 | fa_signal : "\uf012", 388 | fa_sitemap : "\uf0e8", 389 | fa_skype : "\uf17e", 390 | fa_slack : "\uf198", 391 | fa_sliders : "\uf1de", 392 | fa_smile_o : "\uf118", 393 | fa_sort : "\uf0dc", 394 | fa_sort_alpha_asc : "\uf15d", 395 | fa_sort_alpha_desc : "\uf15e", 396 | fa_sort_amount_asc : "\uf160", 397 | fa_sort_amount_desc : "\uf161", 398 | fa_sort_asc : "\uf0de", 399 | fa_sort_desc : "\uf0dd", 400 | fa_sort_down : "\uf0dd", 401 | fa_sort_numeric_asc : "\uf162", 402 | fa_sort_numeric_desc : "\uf163", 403 | fa_sort_up : "\uf0de", 404 | fa_soundcloud : "\uf1be", 405 | fa_space_shuttle : "\uf197", 406 | fa_spinner : "\uf110", 407 | fa_spoon : "\uf1b1", 408 | fa_spotify : "\uf1bc", 409 | fa_square : "\uf0c8", 410 | fa_square_o : "\uf096", 411 | fa_stack_exchange : "\uf18d", 412 | fa_stack_overflow : "\uf16c", 413 | fa_star : "\uf005", 414 | fa_star_half : "\uf089", 415 | fa_star_half_empty : "\uf123", 416 | fa_star_half_full : "\uf123", 417 | fa_star_half_o : "\uf123", 418 | fa_star_o : "\uf006", 419 | fa_steam : "\uf1b6", 420 | fa_steam_square : "\uf1b7", 421 | fa_step_backward : "\uf048", 422 | fa_step_forward : "\uf051", 423 | fa_stethoscope : "\uf0f1", 424 | fa_stop : "\uf04d", 425 | fa_strikethrough : "\uf0cc", 426 | fa_stumbleupon : "\uf1a4", 427 | fa_stumbleupon_circle : "\uf1a3", 428 | fa_subscript : "\uf12c", 429 | fa_suitcase : "\uf0f2", 430 | fa_sun_o : "\uf185", 431 | fa_superscript : "\uf12b", 432 | fa_support : "\uf1cd", 433 | fa_table : "\uf0ce", 434 | fa_tablet : "\uf10a", 435 | fa_tachometer : "\uf0e4", 436 | fa_tag : "\uf02b", 437 | fa_tags : "\uf02c", 438 | fa_tasks : "\uf0ae", 439 | fa_taxi : "\uf1ba", 440 | fa_tencent_weibo : "\uf1d5", 441 | fa_terminal : "\uf120", 442 | fa_text_height : "\uf034", 443 | fa_text_width : "\uf035", 444 | fa_th : "\uf00a", 445 | fa_th_large : "\uf009", 446 | fa_th_list : "\uf00b", 447 | fa_thumb_tack : "\uf08d", 448 | fa_thumbs_down : "\uf165", 449 | fa_thumbs_o_down : "\uf088", 450 | fa_thumbs_o_up : "\uf087", 451 | fa_thumbs_up : "\uf164", 452 | fa_ticket : "\uf145", 453 | fa_times : "\uf00d", 454 | fa_times_circle : "\uf057", 455 | fa_times_circle_o : "\uf05c", 456 | fa_tint : "\uf043", 457 | fa_toggle_down : "\uf150", 458 | fa_toggle_left : "\uf191", 459 | fa_toggle_right : "\uf152", 460 | fa_toggle_up : "\uf151", 461 | fa_trash_o : "\uf014", 462 | fa_tree : "\uf1bb", 463 | fa_trello : "\uf181", 464 | fa_trophy : "\uf091", 465 | fa_truck : "\uf0d1", 466 | fa_try : "\uf195", 467 | fa_tumblr : "\uf173", 468 | fa_tumblr_square : "\uf174", 469 | fa_turkish_lira : "\uf195", 470 | fa_twitter : "\uf099", 471 | fa_twitter_square : "\uf081", 472 | fa_umbrella : "\uf0e9", 473 | fa_underline : "\uf0cd", 474 | fa_undo : "\uf0e2", 475 | fa_university : "\uf19c", 476 | fa_unlink : "\uf127", 477 | fa_unlock : "\uf09c", 478 | fa_unlock_alt : "\uf13e", 479 | fa_unsorted : "\uf0dc", 480 | fa_upload : "\uf093", 481 | fa_usd : "\uf155", 482 | fa_user : "\uf007", 483 | fa_user_md : "\uf0f0", 484 | fa_users : "\uf0c0", 485 | fa_video_camera : "\uf03d", 486 | fa_vimeo_square : "\uf194", 487 | fa_vine : "\uf1ca", 488 | fa_vk : "\uf189", 489 | fa_volume_down : "\uf027", 490 | fa_volume_off : "\uf026", 491 | fa_volume_up : "\uf028", 492 | fa_warning : "\uf071", 493 | fa_wechat : "\uf1d7", 494 | fa_weibo : "\uf18a", 495 | fa_weixin : "\uf1d7", 496 | fa_wheelchair : "\uf193", 497 | fa_windows : "\uf17a", 498 | fa_won : "\uf159", 499 | fa_wordpress : "\uf19a", 500 | fa_wrench : "\uf0ad", 501 | fa_xing : "\uf168", 502 | fa_xing_square : "\uf169", 503 | fa_yahoo : "\uf19e", 504 | fa_yen : "\uf157", 505 | fa_youtube : "\uf167", 506 | fa_youtube_play : "\uf16a", 507 | fa_youtube_square : "\uf166" 508 | } 509 | -------------------------------------------------------------------------------- /src/variables/items.js: -------------------------------------------------------------------------------- 1 | Qt.include("bars.js"); 2 | 3 | function parseItemClass (className) { 4 | var type = itemStyles.default 5 | if (!className) { 6 | return type; 7 | } 8 | 9 | var classes = className.split(' '); 10 | 11 | for (var i = 0; i < classes.length; ++i) { 12 | var trimClass = classes[i].trim(); 13 | var style = itemStyles[trimClass]; 14 | if (style) { 15 | type = style; 16 | } 17 | } 18 | return type; 19 | } 20 | 21 | function parseItemTextClass (className) { 22 | var style = { 23 | font_size: font_size_base, 24 | font_weight: 50, 25 | line_height: 1.25 26 | }; 27 | 28 | var classes = className.split(' '); 29 | for (var i = 0; i < classes.length; ++i) { 30 | var trimClass = classes[i].trim(); 31 | var size = itemTextStyles[trimClass]; 32 | if (size) { 33 | style = size 34 | } 35 | } 36 | return style; 37 | } 38 | 39 | var itemTextStyles = { 40 | h1: { 41 | font_size: Math.floor(font_size_base * 2.60), 42 | font_weight: headings_font_weight, 43 | line_height: headings_line_height 44 | }, 45 | h2: { 46 | font_size: 16, 47 | font_weight: headings_font_weight, 48 | line_height: headings_line_height 49 | }, 50 | h3: { 51 | font_size: 14, 52 | font_weight: headings_font_weight, 53 | line_height: headings_line_height 54 | }, 55 | h4: { 56 | font_size: 12, 57 | font_weight: headings_font_weight, 58 | line_height: headings_line_height 59 | }, 60 | h5: { 61 | font_size: 10, 62 | font_weight: headings_font_weight, 63 | line_height: headings_line_height 64 | }, 65 | h6: { 66 | font_size: 10, 67 | font_weight: headings_font_weight, 68 | line_height: headings_line_height 69 | } 70 | }; 71 | 72 | var item_font_size = 16; 73 | var item_border_width = 1; 74 | var item_padding = 16; 75 | 76 | var item_button_font_size = 18; 77 | var item_button_line_height = 32; 78 | var item_icon_font_size = 32; 79 | var item_icon_fill_font_size = 28; 80 | 81 | var item_icon_accessory_color = "#ccc"; 82 | var item_icon_accessory_font_size = 16; 83 | 84 | var item_avatar_width = 40; 85 | var item_avatar_height = 40; 86 | var item_avatar_border_radius = 4; 87 | 88 | var item_thumbnail_width = 80; 89 | var item_thumbnail_height = 80; 90 | var item_thumbnail_margin = 10; 91 | 92 | var item_divider_bg = "#f5f5f5"; 93 | var item_divider_color = "#222"; 94 | var item_divider_padding = "5 15"; 95 | 96 | var itemStyles = { 97 | light: { 98 | bg : buttonStyles.light.bg, 99 | border : buttonStyles.light.border, 100 | text : buttonStyles.light.text, 101 | active_bg : buttonStyles.light.active_bg, 102 | active_border : buttonStyles.light.active_border 103 | }, 104 | stable: { 105 | bg : buttonStyles.stable.bg, 106 | border : buttonStyles.stable.border, 107 | text : buttonStyles.stable.text, 108 | active_bg : buttonStyles.stable.active_bg, 109 | active_border : buttonStyles.stable.active_border 110 | }, 111 | positive: { 112 | bg : buttonStyles.positive.bg, 113 | border : buttonStyles.positive.border, 114 | text : buttonStyles.positive.text, 115 | active_bg : buttonStyles.positive.active_bg, 116 | active_border : buttonStyles.positive.active_border 117 | }, 118 | calm: { 119 | bg : buttonStyles.calm.bg, 120 | border : buttonStyles.calm.border, 121 | text : buttonStyles.calm.text, 122 | active_bg : buttonStyles.calm.active_bg, 123 | active_border : buttonStyles.calm.active_border 124 | }, 125 | assertive: { 126 | bg : buttonStyles.assertive.bg, 127 | border : buttonStyles.assertive.border, 128 | text : buttonStyles.assertive.text, 129 | active_bg : buttonStyles.assertive.active_bg, 130 | active_border : buttonStyles.assertive.active_border 131 | }, 132 | balanced: { 133 | bg : buttonStyles.balanced.bg, 134 | border : buttonStyles.balanced.border, 135 | text : buttonStyles.balanced.text, 136 | active_bg : buttonStyles.balanced.active_bg, 137 | active_border : buttonStyles.balanced.active_border 138 | }, 139 | energized: { 140 | bg : buttonStyles.energized.bg, 141 | border : buttonStyles.energized.border, 142 | text : buttonStyles.energized.text, 143 | active_bg : buttonStyles.energized.active_bg, 144 | active_border : buttonStyles.energized.active_border 145 | }, 146 | royal: { 147 | bg : buttonStyles.royal.bg, 148 | border : buttonStyles.royal.border, 149 | text : buttonStyles.royal.text, 150 | active_bg : buttonStyles.royal.active_bg, 151 | active_border : buttonStyles.royal.active_border 152 | }, 153 | dark: { 154 | bg : buttonStyles.dark.bg, 155 | border : buttonStyles.dark.border, 156 | text : buttonStyles.dark.text, 157 | active_bg : buttonStyles.dark.active_bg, 158 | active_border : buttonStyles.dark.active_border 159 | }, 160 | default: { 161 | bg : buttonStyles.light.bg, 162 | border : buttonStyles.light.border, 163 | text : buttonStyles.light.text, 164 | active_bg : "#D9D9D9", 165 | active_border : buttonStyles.light.active_border 166 | } 167 | }; 168 | 169 | var item_edit_transition_duration = 250; 170 | var item_edit_transition_function = "ease-in-out"; 171 | 172 | var item_left_edit_left = 8; // item's left side edit's "left" property 173 | 174 | var item_right_edit_open_width = 50; 175 | var item_left_edit_open_width = 50; 176 | 177 | var item_delete_icon_size = 24; 178 | var item_delete_icon_color = color.assertive; 179 | 180 | var item_reorder_icon_size = 32; 181 | var item_reorder_icon_color = color.dark; 182 | 183 | 184 | // Lists 185 | // ------------------------------- 186 | 187 | var list_header_bg = "transparent"; 188 | var list_header_color = "#222"; 189 | var list_header_padding = [5, 15]; 190 | var list_header_margin_top = 20; 191 | 192 | 193 | // Cards 194 | // ------------------------------- 195 | 196 | var card_header_bg = "#F5F5F5"; 197 | var card_body_bg = "#fff"; 198 | var card_footer_bg = "#F5F5F5"; 199 | 200 | var card_padding = 10; 201 | var card_border_width = 1; 202 | 203 | var card_border_color = "#ccc"; 204 | var card_border_radius = 2; 205 | --------------------------------------------------------------------------------