├── FlatUI.pro ├── LICENSE ├── README.md ├── deployment.pri ├── flatui ├── BoxSwitch.qml ├── Button.qml ├── ButtonStyle.qml ├── CheckBox.qml ├── DangerButton.qml ├── DefaultButton.qml ├── Dropdown.qml ├── FlatUI.qml ├── HorizontalScrollBar.qml ├── IconButton.qml ├── IconInput.qml ├── IconNavBar.qml ├── ImageCircle.qml ├── InfoButton.qml ├── Input.qml ├── InputStyle.qml ├── InverseButton.qml ├── NavButton.qml ├── NavDropdown.qml ├── NumberNavBar.qml ├── NumberNavButton.qml ├── PillNavBar.qml ├── PrimaryButton.qml ├── ProgressBar.qml ├── ProgressCircle.qml ├── RadioButton.qml ├── SearchInput.qml ├── Select.qml ├── Sidebar.qml ├── Slider.qml ├── SliderStyle.qml ├── Style.qml ├── SuccessButton.qml ├── Switch.qml ├── SwitchStyle.qml ├── ToolTip.qml ├── TooltipCreator.js ├── TopNavBar.qml ├── VerticalScrollBar.qml ├── WarningButton.qml ├── fonts │ ├── fontawesome │ │ ├── fontawesome-webfont.ttf │ │ ├── icon │ │ │ ├── font-awesome-qml.icns │ │ │ ├── font-awesome-qml.ico │ │ │ ├── font-awesome-qml.png │ │ │ ├── font-awesome-qml@2x.ico │ │ │ └── font-awesome-qml@2x.png │ │ └── screenshot │ │ │ └── screenshot.png │ ├── glyphicons │ │ ├── flat-ui-icons-regular.eot │ │ ├── flat-ui-icons-regular.svg │ │ ├── flat-ui-icons-regular.ttf │ │ ├── flat-ui-icons-regular.woff │ │ └── selection.json │ └── lato │ │ ├── lato-black.eot │ │ ├── lato-black.svg │ │ ├── lato-black.ttf │ │ ├── lato-black.woff │ │ ├── lato-bold.eot │ │ ├── lato-bold.svg │ │ ├── lato-bold.ttf │ │ ├── lato-bold.woff │ │ ├── lato-bolditalic.eot │ │ ├── lato-bolditalic.svg │ │ ├── lato-bolditalic.ttf │ │ ├── lato-bolditalic.woff │ │ ├── lato-italic.eot │ │ ├── lato-italic.svg │ │ ├── lato-italic.ttf │ │ ├── lato-italic.woff │ │ ├── lato-light.eot │ │ ├── lato-light.svg │ │ ├── lato-light.ttf │ │ ├── lato-light.woff │ │ ├── lato-regular.eot │ │ ├── lato-regular.svg │ │ ├── lato-regular.ttf │ │ └── lato-regular.woff ├── img │ ├── favicon.ico │ ├── icons │ │ ├── png │ │ │ ├── Book.png │ │ │ ├── Calendar.png │ │ │ ├── Chat.png │ │ │ ├── Clipboard.png │ │ │ ├── Compas.png │ │ │ ├── Gift-Box.png │ │ │ ├── Infinity-Loop.png │ │ │ ├── Mail.png │ │ │ ├── Map.png │ │ │ ├── Pensils.png │ │ │ ├── Pocket.png │ │ │ ├── Retina-Ready.png │ │ │ ├── Toilet-Paper.png │ │ │ └── Watches.png │ │ └── svg │ │ │ ├── book.svg │ │ │ ├── calendar.svg │ │ │ ├── chat.svg │ │ │ ├── clipboard.svg │ │ │ ├── clocks.svg │ │ │ ├── compas.svg │ │ │ ├── gift-box.svg │ │ │ ├── loop.svg │ │ │ ├── mail.svg │ │ │ ├── map.svg │ │ │ ├── paper-bag.svg │ │ │ ├── pencils.svg │ │ │ ├── retina.svg │ │ │ ├── ribbon.svg │ │ │ └── toilet-paper.svg │ ├── login │ │ ├── icon.png │ │ ├── imac-2x.png │ │ └── imac.png │ └── tile │ │ ├── ribbon-2x.png │ │ └── ribbon.png ├── qmldir └── src │ ├── android-clock.png │ ├── android-contact.png │ ├── arrow-down-b.png │ ├── camera.png │ ├── checkmark.png │ ├── chevron-left.png │ ├── chevron-right.png │ ├── close-round.png │ ├── eye.png │ ├── heart.png │ ├── ios7-checkmark-outline.png │ └── navicon-round.png ├── main.cpp ├── main.qml ├── qmldir └── screenshots ├── screenshot_bottom.jpg ├── screenshot_middle.jpg └── screenshot_top.jpg /FlatUI.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | 3 | QT += qml quick 4 | 5 | SOURCES += main.cpp 6 | 7 | RESOURCES += 8 | 9 | # Additional import path used to resolve QML modules in Qt Creator's code model 10 | QML_IMPORT_PATH = 11 | 12 | # Default rules for deployment. 13 | include(deployment.pri) 14 | 15 | DISTFILES += \ 16 | main.qml \ 17 | flatui/FlatUI.qml \ 18 | flatui/HorizontalScrollBar.qml \ 19 | flatui/VerticalScrollBar.qml \ 20 | flatui/qmldir \ 21 | flatui/Button.qml \ 22 | flatui/PrimaryButton.qml \ 23 | flatui/WarningButton.qml \ 24 | flatui/DangerButton.qml \ 25 | flatui/DefaultButton.qml \ 26 | flatui/InfoButton.qml \ 27 | flatui/InverseButton.qml \ 28 | flatui/SuccessButton.qml \ 29 | flatui/ButtonStyle.qml \ 30 | flatui/InputStyle.qml \ 31 | flatui/Style.qml \ 32 | flatui/Input.qml \ 33 | flatui/Dropdown.qml \ 34 | flatui/Select.qml \ 35 | flatui/CheckBox.qml \ 36 | flatui/RadioButton.qml \ 37 | flatui/IconButton.qml \ 38 | flatui/IconInput.qml \ 39 | flatui/Switch.qml \ 40 | flatui/SwitchStyle.qml \ 41 | flatui/Slider.qml \ 42 | flatui/SliderStyle.qml \ 43 | flatui/BoxSwitch.qml \ 44 | flatui/NavButton.qml \ 45 | flatui/ImageCircle.qml \ 46 | flatui/IconNavBar.qml \ 47 | flatui/NumberNavBar.qml \ 48 | flatui/NumberNavButton.qml \ 49 | flatui/PillNavBar.qml \ 50 | flatui/ProgressBar.qml \ 51 | flatui/ProgressCircle.qml \ 52 | flatui/SearchInput.qml \ 53 | flatui/Sidebar.qml \ 54 | flatui/ToolTip.qml \ 55 | flatui/TopNavBar.qml \ 56 | flatui/NavDropdown.qml 57 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Lee Lazarecky 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Flat UI Controls for QML 2 | =================== 3 | 4 | This is an unofficial QML module that aims to replicate the look-and-feel and behavior of the [Flat UI Toolkit](http://designmodo.github.io/Flat-UI/). This repository is an improvement over Druage's repository (https://github.com/Druage/FlatUI-Controls-QML). 5 | 6 | **NOTE: Requires Qt 5.7.** 7 | 8 | 9 | ![ScreenShot](https://github.com/obeezzy/FlatUI/blob/master/screenshots/screenshot_top.jpg) 10 | 11 | ![ScreenShot](https://github.com/obeezzy/FlatUI/blob/master/screenshots/screenshot_middle.jpg) 12 | 13 | ![ScreenShot](https://github.com/obeezzy/FlatUI/blob/master/screenshots/screenshot_bottom.jpg) 14 | 15 | 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /flatui/BoxSwitch.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Switch { 5 | id: root 6 | } 7 | -------------------------------------------------------------------------------- /flatui/Button.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtGraphicalEffects 1.0 3 | import QtQuick.Controls 2.0 as QQControls 4 | import "." 5 | 6 | QQControls.Button { 7 | id: root 8 | text: qsTr("Button") 9 | 10 | font { 11 | family: FlatUI.latoRegularFont.name 12 | pixelSize: 16 13 | bold: true 14 | } 15 | 16 | readonly property alias style: style 17 | 18 | ButtonStyle { 19 | id: style 20 | __focused: root.activeFocus 21 | __hovered: area.containsMouse || root.activeFocus 22 | __pressed: area.pressed || root.down 23 | enabled: root.enabled 24 | 25 | icon.font.pixelSize: root.font.pixelSize 26 | } 27 | 28 | background: Rectangle { 29 | implicitWidth: 216 30 | implicitHeight: 47 31 | radius: style.radius 32 | color: style.color 33 | 34 | MouseArea { 35 | id: area 36 | anchors.fill: parent 37 | hoverEnabled: true 38 | cursorShape: Qt.PointingHandCursor 39 | 40 | onClicked: { 41 | root.focus = true 42 | root.clicked() 43 | } 44 | 45 | onDoubleClicked: root.doubleClicked() 46 | onPressAndHold: root.pressAndHold() 47 | onReleased: root.released() 48 | } 49 | } 50 | 51 | contentItem: Item { 52 | Row { 53 | anchors.centerIn: parent 54 | spacing: 8 55 | 56 | Text { 57 | id: iconText 58 | text: style.icon.text 59 | font: style.icon.font 60 | color: style.icon.color 61 | horizontalAlignment: Text.AlignHCenter 62 | verticalAlignment: Text.AlignVCenter 63 | width: contentWidth 64 | height: contentHeight 65 | } 66 | 67 | Text { 68 | text: root.text 69 | font: root.font 70 | color: style.textColor 71 | horizontalAlignment: Text.AlignHCenter 72 | verticalAlignment: Text.AlignVCenter 73 | elide: Text.ElideRight 74 | } 75 | } 76 | } 77 | } 78 | 79 | -------------------------------------------------------------------------------- /flatui/ButtonStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Style { 5 | id: root 6 | name: "primary" 7 | 8 | property int radius: 6 9 | property bool __hovered: false 10 | property bool __pressed: false 11 | property bool __checked: false 12 | readonly property bool __checkable: name == "checkable" 13 | 14 | readonly property color disabledColor: "#EAECED" 15 | 16 | property alias icon: icon 17 | 18 | Text { 19 | id: icon 20 | color: root.textColor 21 | font.family: FlatUI.fontAwesome.name 22 | } 23 | 24 | property color color: { 25 | if(!enabled) 26 | FlatUI.silver 27 | else { 28 | switch(name) { 29 | case "primary": 30 | FlatUI.turquoise 31 | break; 32 | case "warning": 33 | FlatUI.sunFlower 34 | break; 35 | case "default": 36 | FlatUI.silver; 37 | break; 38 | case "danger": 39 | FlatUI.alizarin 40 | break; 41 | case "success": 42 | FlatUI.emerald 43 | break; 44 | case "inverse": 45 | FlatUI.midnightBlue 46 | break; 47 | case "info": 48 | FlatUI.peterRiver 49 | break; 50 | case "checkable": 51 | FlatUI.silver 52 | break; 53 | case "nav_button": 54 | FlatUI.wetAsphalt 55 | break; 56 | default: 57 | break; 58 | } 59 | } 60 | } 61 | property color defaultColor: { 62 | switch(name) { 63 | case "primary": 64 | FlatUI.turquoise 65 | break; 66 | case "warning": 67 | FlatUI.sunFlower 68 | break; 69 | case "default": 70 | FlatUI.silver; 71 | break; 72 | case "danger": 73 | FlatUI.alizarin 74 | break; 75 | case "success": 76 | FlatUI.emerald 77 | break; 78 | case "inverse": 79 | FlatUI.midnightBlue 80 | break; 81 | case "info": 82 | FlatUI.peterRiver 83 | break; 84 | case "checkable": 85 | FlatUI.silver 86 | break; 87 | case "nav_button": 88 | FlatUI.wetAsphalt 89 | break; 90 | default: 91 | FlatUI.silver 92 | break; 93 | } 94 | } 95 | property color pressColor: { 96 | switch(name) { 97 | case "primary": 98 | FlatUI.greenSea; 99 | break; 100 | case "warning": 101 | "#cda70d"; 102 | break; 103 | case "default": 104 | "#a1a6a9"; 105 | break; 106 | case "danger": 107 | "#c44133" 108 | break; 109 | case "success": 110 | "#27AD60" 111 | break; 112 | case "inverse": 113 | "#2C3E50" 114 | break; 115 | case "info": 116 | "#2C81BA" 117 | break; 118 | case "disabled": 119 | break; 120 | case "checkable": 121 | FlatUI.turquoise 122 | break; 123 | case "nav_button": 124 | FlatUI.wetAsphalt 125 | break; 126 | default: 127 | FlatUI.greenSea; 128 | break; 129 | } 130 | } 131 | property color highlightColor: { 132 | switch(name) { 133 | case "primary": 134 | "#48c9b0"; 135 | break; 136 | case "warning": 137 | "#f4d313" 138 | break; 139 | case "default": 140 | "#cacfd2"; 141 | break; 142 | case "danger": 143 | "#ec7063" 144 | break; 145 | case "success": 146 | "#58D68D" 147 | break; 148 | case "inverse": 149 | "#415B76" 150 | break; 151 | case "info": 152 | "#5DADE2" 153 | break; 154 | case "disabled": 155 | break; 156 | case "checkable": 157 | FlatUI.turquoise 158 | break; 159 | case "nav_button": 160 | FlatUI.wetAsphalt 161 | break; 162 | default: 163 | "#48c9b0"; 164 | break; 165 | } 166 | } 167 | property color checkedColor: { 168 | switch(name) { 169 | case "primary": 170 | FlatUI.greenSea 171 | break; 172 | case "warning": 173 | FlatUI.sunFlower 174 | break; 175 | case "default": 176 | FlatUI.silver 177 | break; 178 | case "danger": 179 | FlatUI.alizarin 180 | break; 181 | case "success": 182 | FlatUI.emerald 183 | break; 184 | case "inverse": 185 | FlatUI.midnightBlue 186 | break; 187 | case "info": 188 | FlatUI.peterRiver 189 | break; 190 | case "disabled": 191 | break; 192 | case "checkable": 193 | FlatUI.turquoise 194 | break; 195 | default: 196 | FlatUI.greenSea 197 | break; 198 | } 199 | } 200 | 201 | property color textColor: { 202 | if(name == "checkable" && root.enabled) 203 | { 204 | if(root.__focused) 205 | FlatUI.turquoise 206 | else 207 | FlatUI.midnightBlue 208 | } 209 | else if(root.enabled) 210 | "white" 211 | else 212 | "#EAECED" 213 | } 214 | property color textPressColor: { 215 | if(name == "nav_button" && root.enabled) 216 | FlatUI.turquoise 217 | else 218 | textColor 219 | } 220 | property color textHighlightColor: { 221 | if(name == "nav_button" && root.enabled) 222 | FlatUI.turquoise 223 | else 224 | textColor 225 | } 226 | property color textCheckedColor: { 227 | if(name == "nav_button" && root.enabled) 228 | FlatUI.turquoise 229 | else 230 | textColor 231 | } 232 | 233 | property color iconColor: "white" 234 | 235 | states: [ 236 | State { 237 | name: "" 238 | when: !root.enabled 239 | PropertyChanges { 240 | target: root 241 | color: root.defaultColor 242 | } 243 | }, 244 | 245 | State { 246 | name: "HOVERED" 247 | when: root.__hovered && !root.__pressed 248 | PropertyChanges { 249 | target: root 250 | color: root.highlightColor 251 | } 252 | }, 253 | 254 | State { 255 | name: "PRESSED" 256 | when: root.__pressed 257 | PropertyChanges { 258 | target: root 259 | color: root.pressColor 260 | } 261 | }, 262 | 263 | State { 264 | name: "CHECKED" 265 | when: root.__checked && root.__checkable 266 | PropertyChanges { 267 | target: root 268 | color: root.checkedColor 269 | } 270 | } 271 | ] 272 | 273 | transitions: Transition {ColorAnimation { duration: 250 } } 274 | 275 | SequentialAnimation on textColor { 276 | running: root.__focused && root.name != "checkable" 277 | loops: Animation.Infinite 278 | 279 | ColorAnimation { 280 | to: "#eeeeee" 281 | duration: 700 282 | } 283 | 284 | ColorAnimation { 285 | to: "white" 286 | duration: 700 287 | } 288 | 289 | onRunningChanged: { 290 | if(!running) 291 | textColor = "white" 292 | } 293 | } 294 | } 295 | -------------------------------------------------------------------------------- /flatui/CheckBox.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtQuick.Controls 2.0 as QQControls 3 | import "." 4 | 5 | QQControls.CheckBox { 6 | id: root 7 | text: qsTr("Checkbox") 8 | 9 | font { 10 | family: FlatUI.latoRegularFont.name 11 | pixelSize: 14 12 | } 13 | 14 | ButtonStyle { 15 | id: style 16 | name: "checkable" 17 | __focused: root.activeFocus 18 | __checked: root.checked 19 | leftPadding: 12 20 | topPadding: 8 21 | } 22 | 23 | indicator: Text { 24 | font.family: FlatUI.glyphFont.name 25 | font.pixelSize: 18 26 | text: area.containsMouse || root.checked ? FlatUI.glyphFont.markedCheckBox : FlatUI.glyphFont.unmarkedCheckBox 27 | horizontalAlignment: Text.AlignHCenter 28 | verticalAlignment: Text.AlignVCenter 29 | leftPadding: style.leftPadding 30 | topPadding: style.topPadding 31 | color: style.color 32 | 33 | MouseArea { 34 | id: area 35 | anchors.fill: parent 36 | hoverEnabled: true 37 | cursorShape: Qt.PointingHandCursor 38 | 39 | onClicked: root.checked = !root.checked 40 | } 41 | } 42 | 43 | contentItem: Text { 44 | text: root.text 45 | font: root.font 46 | color: style.textColor 47 | horizontalAlignment: Text.AlignHCenter 48 | verticalAlignment: Text.AlignVCenter 49 | leftPadding: root.indicator.width + root.spacing 50 | } 51 | } 52 | 53 | -------------------------------------------------------------------------------- /flatui/DangerButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import "." 3 | 4 | Button { 5 | style.name: "danger" 6 | text: "Danger Button" 7 | } 8 | 9 | -------------------------------------------------------------------------------- /flatui/DefaultButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import "." 3 | 4 | Button { 5 | style.name: "default" 6 | text: "Default Button"; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /flatui/Dropdown.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtQuick.Controls 2.0 as QQControls 3 | import "." 4 | 5 | QQControls.ComboBox { 6 | id: root 7 | model: ["First", "Second", "Third"] 8 | 9 | font { 10 | family: FlatUI.latoRegularFont.name 11 | pixelSize: 16 12 | bold: true 13 | } 14 | 15 | ButtonStyle { 16 | id: style 17 | __focused: area.activeFocus 18 | __hovered: area.containsMouse || root.activeFocus 19 | __pressed: area.pressed 20 | enabled: root.enabled 21 | } 22 | 23 | delegate: QQControls.ItemDelegate { 24 | width: root.width 25 | text: item 26 | font.weight: root.currentIndex === index ? Font.DemiBold : Font.Normal 27 | highlighted: root.highlightedIndex == index 28 | } 29 | 30 | indicator: Text { 31 | x: root.width - width - root.rightPadding 32 | y: root.topPadding + (root.availableHeight - height) / 2 33 | width: 12 34 | height: 4 35 | text: FlatUI.fontAwesome.fa_caret_down 36 | font.family: FlatUI.fontAwesome.name 37 | font.pixelSize: 16 38 | color: style.iconColor 39 | } 40 | 41 | contentItem: Text { 42 | leftPadding: 0 43 | rightPadding: root.indicator.width + root.spacing 44 | 45 | text: root.displayText 46 | font: root.font 47 | color: style.textColor 48 | horizontalAlignment: Text.AlignLeft 49 | verticalAlignment: Text.AlignVCenter 50 | elide: Text.ElideRight 51 | } 52 | 53 | background: Rectangle { 54 | implicitWidth: 120 55 | implicitHeight: 40 56 | color: style.color 57 | radius: style.radius 58 | 59 | MouseArea { 60 | id: area 61 | hoverEnabled: true 62 | anchors.fill: parent 63 | cursorShape: Qt.PointingHandCursor 64 | 65 | onClicked: { 66 | if(!root.popup.visible) 67 | root.popup.open() 68 | else 69 | root.popup.close() 70 | } 71 | } 72 | } 73 | } 74 | 75 | -------------------------------------------------------------------------------- /flatui/FlatUI.qml: -------------------------------------------------------------------------------- 1 | pragma Singleton 2 | 3 | import QtQuick 2.4 4 | import "." 5 | 6 | 7 | Item { 8 | readonly property color alizarin: "#e74c3c"; 9 | readonly property color amethyst: "#9b59b6"; 10 | readonly property color asbestos: "#7f8c8d"; 11 | readonly property color belize_hole: "#2980b9"; 12 | readonly property color carrot: "#e67e22"; 13 | readonly property color clouds: "#ecf0f1"; 14 | readonly property color concrete: "#95a5a6"; 15 | readonly property color emerald: "#2ecc71"; 16 | readonly property color greenSea: "#16A085"; 17 | readonly property color midnightBlue : "#2c3e50" 18 | readonly property color nephritis : "#27ae60" 19 | readonly property color orange : "#f39c12" 20 | readonly property color peterRiver : "#3498db" 21 | readonly property color pomegranate : "#c0392b" 22 | readonly property color pumpkin : "#d35400" 23 | readonly property color silver : "#bdc3c7" 24 | readonly property color sunFlower : "#f1c40f" 25 | readonly property string turquoise: "#1ABC9C"; 26 | readonly property color wetAsphalt : "#34495e" 27 | readonly property color wisteria : "#8e44ad" 28 | 29 | readonly property color strongCyan: "#20C09C" 30 | 31 | 32 | // Grays 33 | readonly property color gray : concrete 34 | readonly property color grayLight : silver 35 | readonly property color inverse : "white" 36 | 37 | // Brand colors 38 | readonly property color primary : wetAsphalt 39 | readonly property color secondary : turquoise 40 | readonly property color success : emerald 41 | readonly property color warning : sunFlower 42 | readonly property color danger : alizarin 43 | readonly property color info : peterRiver 44 | 45 | // Settings for some of the most global styles. 46 | readonly property color body_bg : "#ffffff" 47 | readonly property color textColor : primary 48 | 49 | // Global textual link color. 50 | readonly property color link_color : greenSea 51 | readonly property color link_hover_color : turquoise 52 | 53 | // Fonts 54 | readonly property alias latoRegularFont: latoRegularFont 55 | readonly property alias latoBlackFont: latoBlackFont 56 | readonly property alias latoBoldFont: latoBoldFont 57 | readonly property alias latoBoldItalicFont: latoBoldItalicFont 58 | readonly property alias latoItalicFont: latoItalicFont 59 | readonly property alias latoLightFont: latoLightFont 60 | readonly property alias glyphFont: glyphFont 61 | readonly property alias fontAwesome: fontAwesome 62 | 63 | // Misc 64 | readonly property int dropdownZ: 100 65 | 66 | FontLoader { 67 | id: latoRegularFont; 68 | source: "fonts/lato/lato-regular.ttf" 69 | } 70 | 71 | FontLoader { 72 | id: latoBlackFont; 73 | source: "fonts/lato/lato-black.ttf" 74 | } 75 | 76 | FontLoader { 77 | id: latoBoldFont; 78 | source: "fonts/lato/lato-bold.ttf" 79 | } 80 | 81 | FontLoader { 82 | id: latoBoldItalicFont; 83 | source: "fonts/lato/lato-bolditalic.ttf" 84 | } 85 | 86 | FontLoader { 87 | id: latoItalicFont; 88 | source: "fonts/lato/lato-italic.ttf" 89 | } 90 | 91 | FontLoader { 92 | id: latoLightFont; 93 | source: "fonts/lato/lato-light.ttf" 94 | } 95 | 96 | FontLoader { 97 | id: glyphFont; 98 | source: "fonts/glyphicons/flat-ui-icons-regular.ttf" 99 | 100 | readonly property string upArrow: "\ue600" 101 | readonly property string downArrow: "\ue601" 102 | readonly property string slimUpArrow: "\ue602" 103 | readonly property string slimDownArrow: "\ue603" 104 | readonly property string leftArrow: "\ue604" 105 | readonly property string rightArrow: "\ue605" 106 | readonly property string leftStickArrow: "\ue606" 107 | readonly property string rightStickArrow: "\ue607" 108 | readonly property string plus: "\ue608" 109 | readonly property string x: "\ue609" 110 | readonly property string check: "\ue60A" 111 | readonly property string unmarkedRadioButton: "\ue60B" 112 | readonly property string markedRadioButton: "\ue60C" 113 | readonly property string unmarkedCheckBox: "\ue60D" 114 | readonly property string markedCheckBox: "\ue60E" 115 | readonly property string information: "\ue60f" 116 | readonly property string warning: "\ue610" 117 | readonly property string question: "\ue611" 118 | readonly property string success: "\ue612" 119 | readonly property string error: "\ue613" 120 | readonly property string append: "\ue614" 121 | readonly property string pause: "\ue615" 122 | readonly property string play: "\ue616" 123 | readonly property string audible: "\ue617" 124 | readonly property string inaudible: "\ue618" 125 | readonly property string fullscreen: "\ue619" 126 | readonly property string drawer: "\ue61A" 127 | readonly property string menus: "\ue61B" 128 | readonly property string appMenu3x3: "\ue61C" 129 | readonly property string appMenu2x2: "\ue61D" 130 | 131 | //........ 132 | readonly property string heart: "\ue626" 133 | readonly property string camera: "\ue62A" 134 | readonly property string clock: "\ue62B" 135 | readonly property string eye: "\ue62C" 136 | // 137 | readonly property string search: "\ue630" 138 | readonly property string user: "\ue631" 139 | // 140 | readonly property string locked: "\ue633" 141 | } 142 | 143 | FontLoader { 144 | id: fontAwesome 145 | source: "fonts/fontawesome/fontawesome-webfont.ttf" 146 | 147 | readonly property string fa_adjust : "\uf042" 148 | readonly property string fa_adn : "\uf170" 149 | readonly property string fa_align_center : "\uf037" 150 | readonly property string fa_align_justify : "\uf039" 151 | readonly property string fa_align_left : "\uf036" 152 | readonly property string fa_align_right : "\uf038" 153 | readonly property string fa_ambulance : "\uf0f9" 154 | readonly property string fa_anchor : "\uf13d" 155 | readonly property string fa_android : "\uf17b" 156 | readonly property string fa_angellist : "\uf209" 157 | readonly property string fa_angle_double_down : "\uf103" 158 | readonly property string fa_angle_double_left : "\uf100" 159 | readonly property string fa_angle_double_right : "\uf101" 160 | readonly property string fa_angle_double_up : "\uf102" 161 | readonly property string fa_angle_down : "\uf107" 162 | readonly property string fa_angle_left : "\uf104" 163 | readonly property string fa_angle_right : "\uf105" 164 | readonly property string fa_angle_up : "\uf106" 165 | readonly property string fa_apple : "\uf179" 166 | readonly property string fa_archive : "\uf187" 167 | readonly property string fa_area_chart : "\uf1fe" 168 | readonly property string fa_arrow_circle_down : "\uf0ab" 169 | readonly property string fa_arrow_circle_left : "\uf0a8" 170 | readonly property string fa_arrow_circle_o_down : "\uf01a" 171 | readonly property string fa_arrow_circle_o_left : "\uf190" 172 | readonly property string fa_arrow_circle_o_right : "\uf18e" 173 | readonly property string fa_arrow_circle_o_up : "\uf01b" 174 | readonly property string fa_arrow_circle_right : "\uf0a9" 175 | readonly property string fa_arrow_circle_up : "\uf0aa" 176 | readonly property string fa_arrow_down : "\uf063" 177 | readonly property string fa_arrow_left : "\uf060" 178 | readonly property string fa_arrow_right : "\uf061" 179 | readonly property string fa_arrow_up : "\uf062" 180 | readonly property string fa_arrows : "\uf047" 181 | readonly property string fa_arrows_alt : "\uf0b2" 182 | readonly property string fa_arrows_h : "\uf07e" 183 | readonly property string fa_arrows_v : "\uf07d" 184 | readonly property string fa_asterisk : "\uf069" 185 | readonly property string fa_at : "\uf1fa" 186 | readonly property string fa_automobile : "\uf1b9" 187 | readonly property string fa_backward : "\uf04a" 188 | readonly property string fa_ban : "\uf05e" 189 | readonly property string fa_bank : "\uf19c" 190 | readonly property string fa_bar_chart_o : "\uf080" 191 | readonly property string fa_barcode : "\uf02a" 192 | readonly property string fa_bars : "\uf0c9" 193 | readonly property string fa_beer : "\uf0fc" 194 | readonly property string fa_behance : "\uf1b4" 195 | readonly property string fa_behance_square : "\uf1b5" 196 | readonly property string fa_bell : "\uf0f3" 197 | readonly property string fa_bell_o : "\uf0a2" 198 | readonly property string fa_bell_slash : "\uf1f6" 199 | readonly property string fa_bell_slash_o : "\uf1f7" 200 | readonly property string fa_bicycle : "\uf206" 201 | readonly property string fa_binoculars : "\uf1e5" 202 | readonly property string fa_birthday_cake : "\uf1fd" 203 | readonly property string fa_bitbucket : "\uf171" 204 | readonly property string fa_bitbucket_square : "\uf172" 205 | readonly property string fa_bitcoin : "\uf15a" 206 | readonly property string fa_bold : "\uf032" 207 | readonly property string fa_bolt : "\uf0e7" 208 | readonly property string fa_bomb : "\uf1e2" 209 | readonly property string fa_book : "\uf02d" 210 | readonly property string fa_bookmark : "\uf02e" 211 | readonly property string fa_bookmark_o : "\uf097" 212 | readonly property string fa_briefcase : "\uf0b1" 213 | readonly property string fa_btc : "\uf15a" 214 | readonly property string fa_bug : "\uf188" 215 | readonly property string fa_building : "\uf1ad" 216 | readonly property string fa_building_o : "\uf0f7" 217 | readonly property string fa_bullhorn : "\uf0a1" 218 | readonly property string fa_bullseye : "\uf140" 219 | readonly property string $fa_bus : "\uf207" 220 | readonly property string fa_cab : "\uf1ba" 221 | readonly property string $fa_calculator : "\uf1ec" 222 | readonly property string fa_calendar : "\uf073" 223 | readonly property string fa_calendar_o : "\uf133" 224 | readonly property string fa_camera : "\uf030" 225 | readonly property string fa_camera_retro : "\uf083" 226 | readonly property string fa_car : "\uf1b9" 227 | readonly property string fa_caret_down : "\uf0d7" 228 | readonly property string fa_caret_left : "\uf0d9" 229 | readonly property string fa_caret_right : "\uf0da" 230 | readonly property string fa_caret_square_o_down : "\uf150" 231 | readonly property string fa_caret_square_o_left : "\uf191" 232 | readonly property string fa_caret_square_o_right : "\uf152" 233 | readonly property string fa_caret_square_o_up : "\uf151" 234 | readonly property string fa_caret_up : "\uf0d8" 235 | readonly property string fa_cc : "\uf20a" 236 | readonly property string fa_cc_amex : "\uf1f3" 237 | readonly property string fa_cc_discover : "\uf1f2" 238 | readonly property string fa_cc_mastercard : "\uf1f1" 239 | readonly property string fa_cc_paypal : "\uf1f4" 240 | readonly property string fa_cc_stripe : "\uf1f5" 241 | readonly property string fa_cc_visa : "\uf1f0" 242 | readonly property string fa_certificate : "\uf0a3" 243 | readonly property string fa_chain : "\uf0c1" 244 | readonly property string fa_chain_broken : "\uf127" 245 | readonly property string fa_check : "\uf00c" 246 | readonly property string fa_check_circle : "\uf058" 247 | readonly property string fa_check_circle_o : "\uf05d" 248 | readonly property string fa_check_square : "\uf14a" 249 | readonly property string fa_check_square_o : "\uf046" 250 | readonly property string fa_chevron_circle_down : "\uf13a" 251 | readonly property string fa_chevron_circle_left : "\uf137" 252 | readonly property string fa_chevron_circle_right : "\uf138" 253 | readonly property string fa_chevron_circle_up : "\uf139" 254 | readonly property string fa_chevron_down : "\uf078" 255 | readonly property string fa_chevron_left : "\uf053" 256 | readonly property string fa_chevron_right : "\uf054" 257 | readonly property string fa_chevron_up : "\uf077" 258 | readonly property string fa_child : "\uf1ae" 259 | readonly property string fa_circle : "\uf111" 260 | readonly property string fa_circle_o : "\uf10c" 261 | readonly property string fa_circle_o_notch : "\uf1ce" 262 | readonly property string fa_circle_thin : "\uf1db" 263 | readonly property string fa_clipboard : "\uf0ea" 264 | readonly property string fa_clock_o : "\uf017" 265 | readonly property string fa_cloud : "\uf0c2" 266 | readonly property string fa_cloud_download : "\uf0ed" 267 | readonly property string fa_cloud_upload : "\uf0ee" 268 | readonly property string fa_cny : "\uf157" 269 | readonly property string fa_code : "\uf121" 270 | readonly property string fa_code_fork : "\uf126" 271 | readonly property string fa_codepen : "\uf1cb" 272 | readonly property string fa_coffee : "\uf0f4" 273 | readonly property string fa_cog : "\uf013" 274 | readonly property string fa_cogs : "\uf085" 275 | readonly property string fa_columns : "\uf0db" 276 | readonly property string fa_comment : "\uf075" 277 | readonly property string fa_comment_o : "\uf0e5" 278 | readonly property string fa_comments : "\uf086" 279 | readonly property string fa_comments_o : "\uf0e6" 280 | readonly property string fa_compass : "\uf14e" 281 | readonly property string fa_compress : "\uf066" 282 | readonly property string fa_copy : "\uf0c5" 283 | readonly property string fa_copyright : "\uf1f9" 284 | readonly property string fa_credit_card : "\uf09d" 285 | readonly property string fa_crop : "\uf125" 286 | readonly property string fa_crosshairs : "\uf05b" 287 | readonly property string fa_css3 : "\uf13c" 288 | readonly property string fa_cube : "\uf1b2" 289 | readonly property string fa_cubes : "\uf1b3" 290 | readonly property string fa_cut : "\uf0c4" 291 | readonly property string fa_cutlery : "\uf0f5" 292 | readonly property string fa_dashboard : "\uf0e4" 293 | readonly property string fa_database : "\uf1c0" 294 | readonly property string fa_dedent : "\uf03b" 295 | readonly property string fa_delicious : "\uf1a5" 296 | readonly property string fa_desktop : "\uf108" 297 | readonly property string fa_deviantart : "\uf1bd" 298 | readonly property string fa_digg : "\uf1a6" 299 | readonly property string fa_dollar : "\uf155" 300 | readonly property string fa_dot_circle_o : "\uf192" 301 | readonly property string fa_download : "\uf019" 302 | readonly property string fa_dribbble : "\uf17d" 303 | readonly property string fa_dropbox : "\uf16b" 304 | readonly property string fa_drupal : "\uf1a9" 305 | readonly property string fa_edit : "\uf044" 306 | readonly property string fa_eject : "\uf052" 307 | readonly property string fa_ellipsis_h : "\uf141" 308 | readonly property string fa_ellipsis_v : "\uf142" 309 | readonly property string fa_empire : "\uf1d1" 310 | readonly property string fa_envelope : "\uf0e0" 311 | readonly property string fa_envelope_o : "\uf003" 312 | readonly property string fa_envelope_square : "\uf199" 313 | readonly property string fa_eraser : "\uf12d" 314 | readonly property string fa_eur : "\uf153" 315 | readonly property string fa_euro : "\uf153" 316 | readonly property string fa_exchange : "\uf0ec" 317 | readonly property string fa_exclamation : "\uf12a" 318 | readonly property string fa_exclamation_circle : "\uf06a" 319 | readonly property string fa_exclamation_triangle : "\uf071" 320 | readonly property string fa_expand : "\uf065" 321 | readonly property string fa_external_link : "\uf08e" 322 | readonly property string fa_external_link_square : "\uf14c" 323 | readonly property string fa_eye : "\uf06e" 324 | readonly property string fa_eye_slash : "\uf070" 325 | readonly property string fa_eyedropper : "\uf1fb" 326 | readonly property string fa_facebook : "\uf09a" 327 | readonly property string fa_facebook_square : "\uf082" 328 | readonly property string fa_fast_backward : "\uf049" 329 | readonly property string fa_fast_forward : "\uf050" 330 | readonly property string fa_fax : "\uf1ac" 331 | readonly property string fa_female : "\uf182" 332 | readonly property string fa_fighter_jet : "\uf0fb" 333 | readonly property string fa_file : "\uf15b" 334 | readonly property string fa_file_archive_o : "\uf1c6" 335 | readonly property string fa_file_audio_o : "\uf1c7" 336 | readonly property string fa_file_code_o : "\uf1c9" 337 | readonly property string fa_file_excel_o : "\uf1c3" 338 | readonly property string fa_file_image_o : "\uf1c5" 339 | readonly property string fa_file_movie_o : "\uf1c8" 340 | readonly property string fa_file_o : "\uf016" 341 | readonly property string fa_file_pdf_o : "\uf1c1" 342 | readonly property string fa_file_photo_o : "\uf1c5" 343 | readonly property string fa_file_picture_o : "\uf1c5" 344 | readonly property string fa_file_powerpoint_o : "\uf1c4" 345 | readonly property string fa_file_sound_o : "\uf1c7" 346 | readonly property string fa_file_text : "\uf15c" 347 | readonly property string fa_file_text_o : "\uf0f6" 348 | readonly property string fa_file_video_o : "\uf1c8" 349 | readonly property string fa_file_word_o : "\uf1c2" 350 | readonly property string fa_file_zip_o : "\uf1c6" 351 | readonly property string fa_files_o : "\uf0c5" 352 | readonly property string fa_film : "\uf008" 353 | readonly property string fa_filter : "\uf0b0" 354 | readonly property string fa_fire : "\uf06d" 355 | readonly property string fa_fire_extinguisher : "\uf134" 356 | readonly property string fa_flag : "\uf024" 357 | readonly property string fa_flag_checkered : "\uf11e" 358 | readonly property string fa_flag_o : "\uf11d" 359 | readonly property string fa_flash : "\uf0e7" 360 | readonly property string fa_flask : "\uf0c3" 361 | readonly property string fa_flickr : "\uf16e" 362 | readonly property string fa_floppy_o : "\uf0c7" 363 | readonly property string fa_folder : "\uf07b" 364 | readonly property string fa_folder_o : "\uf114" 365 | readonly property string fa_folder_open : "\uf07c" 366 | readonly property string fa_folder_open_o : "\uf115" 367 | readonly property string fa_font : "\uf031" 368 | readonly property string fa_forward : "\uf04e" 369 | readonly property string fa_foursquare : "\uf180" 370 | readonly property string fa_frown_o : "\uf119" 371 | readonly property string fa_futbol_o : "\uf1e3" 372 | readonly property string fa_gamepad : "\uf11b" 373 | readonly property string fa_gavel : "\uf0e3" 374 | readonly property string fa_gbp : "\uf154" 375 | readonly property string fa_ge : "\uf1d1" 376 | readonly property string fa_gear : "\uf013" 377 | readonly property string fa_gears : "\uf085" 378 | readonly property string fa_gift : "\uf06b" 379 | readonly property string fa_git : "\uf1d3" 380 | readonly property string fa_git_square : "\uf1d2" 381 | readonly property string fa_github : "\uf09b" 382 | readonly property string fa_github_alt : "\uf113" 383 | readonly property string fa_github_square : "\uf092" 384 | readonly property string fa_gittip : "\uf184" 385 | readonly property string fa_glass : "\uf000" 386 | readonly property string fa_globe : "\uf0ac" 387 | readonly property string fa_google : "\uf1a0" 388 | readonly property string fa_google_plus : "\uf0d5" 389 | readonly property string fa_google_plus_square : "\uf0d4" 390 | readonly property string fa_google_wallet : "\uf1ee" 391 | readonly property string fa_graduation_cap : "\uf19d" 392 | readonly property string fa_group : "\uf0c0" 393 | readonly property string fa_h_square : "\uf0fd" 394 | readonly property string fa_hacker_news : "\uf1d4" 395 | readonly property string fa_hand_o_down : "\uf0a7" 396 | readonly property string fa_hand_o_left : "\uf0a5" 397 | readonly property string fa_hand_o_right : "\uf0a4" 398 | readonly property string fa_hand_o_up : "\uf0a6" 399 | readonly property string fa_hdd_o : "\uf0a0" 400 | readonly property string fa_header : "\uf1dc" 401 | readonly property string fa_headphones : "\uf025" 402 | readonly property string fa_heart : "\uf004" 403 | readonly property string fa_heart_o : "\uf08a" 404 | readonly property string fa_history : "\uf1da" 405 | readonly property string fa_home : "\uf015" 406 | readonly property string fa_hospital_o : "\uf0f8" 407 | readonly property string fa_html5 : "\uf13b" 408 | readonly property string fa_ils : "\uf20b" 409 | readonly property string fa_image : "\uf03e" 410 | readonly property string fa_inbox : "\uf01c" 411 | readonly property string fa_indent : "\uf03c" 412 | readonly property string fa_info : "\uf129" 413 | readonly property string fa_info_circle : "\uf05a" 414 | readonly property string fa_inr : "\uf156" 415 | readonly property string fa_instagram : "\uf16d" 416 | readonly property string fa_institution : "\uf19c" 417 | readonly property string fa_ioxhost : "\uf208" 418 | readonly property string fa_italic : "\uf033" 419 | readonly property string fa_joomla : "\uf1aa" 420 | readonly property string fa_jpy : "\uf157" 421 | readonly property string fa_jsfiddle : "\uf1cc" 422 | readonly property string fa_key : "\uf084" 423 | readonly property string fa_keyboard_o : "\uf11c" 424 | readonly property string fa_krw : "\uf159" 425 | readonly property string fa_language : "\uf1ab" 426 | readonly property string fa_laptop : "\uf109" 427 | readonly property string fa_lastfm : "\uf202" 428 | readonly property string fa_lastfm_square : "\uf203" 429 | readonly property string fa_leaf : "\uf06c" 430 | readonly property string fa_legal : "\uf0e3" 431 | readonly property string fa_lemon_o : "\uf094" 432 | readonly property string fa_level_down : "\uf149" 433 | readonly property string fa_level_up : "\uf148" 434 | readonly property string fa_life_bouy : "\uf1cd" 435 | readonly property string fa_life_buoy : "\uf1cd" 436 | readonly property string fa_life_ring : "\uf1cd" 437 | readonly property string fa_life_saver : "\uf1cd" 438 | readonly property string fa_lightbulb_o : "\uf0eb" 439 | readonly property string fa_line_chart : "\uf201" 440 | readonly property string fa_link : "\uf0c1" 441 | readonly property string fa_linkedin : "\uf0e1" 442 | readonly property string fa_linkedin_square : "\uf08c" 443 | readonly property string fa_linux : "\uf17c" 444 | readonly property string fa_list : "\uf03a" 445 | readonly property string fa_list_alt : "\uf022" 446 | readonly property string fa_list_ol : "\uf0cb" 447 | readonly property string fa_list_ul : "\uf0ca" 448 | readonly property string fa_location_arrow : "\uf124" 449 | readonly property string fa_lock : "\uf023" 450 | readonly property string fa_long_arrow_down : "\uf175" 451 | readonly property string fa_long_arrow_left : "\uf177" 452 | readonly property string fa_long_arrow_right : "\uf178" 453 | readonly property string fa_long_arrow_up : "\uf176" 454 | readonly property string fa_magic : "\uf0d0" 455 | readonly property string fa_magnet : "\uf076" 456 | readonly property string fa_mail_forward : "\uf064" 457 | readonly property string fa_mail_reply : "\uf112" 458 | readonly property string fa_mail_reply_all : "\uf122" 459 | readonly property string fa_male : "\uf183" 460 | readonly property string fa_map_marker : "\uf041" 461 | readonly property string fa_maxcdn : "\uf136" 462 | readonly property string fa_meanpath : "\uf20c" 463 | readonly property string fa_medkit : "\uf0fa" 464 | readonly property string fa_meh_o : "\uf11a" 465 | readonly property string fa_microphone : "\uf130" 466 | readonly property string fa_microphone_slash : "\uf131" 467 | readonly property string fa_minus : "\uf068" 468 | readonly property string fa_minus_circle : "\uf056" 469 | readonly property string fa_minus_square : "\uf146" 470 | readonly property string fa_minus_square_o : "\uf147" 471 | readonly property string fa_mobile : "\uf10b" 472 | readonly property string fa_mobile_phone : "\uf10b" 473 | readonly property string fa_money : "\uf0d6" 474 | readonly property string fa_moon_o : "\uf186" 475 | readonly property string fa_mortar_board : "\uf19d" 476 | readonly property string fa_music : "\uf001" 477 | readonly property string fa_navicon : "\uf0c9" 478 | readonly property string fa_newspaper_o : "\uf1ea" 479 | readonly property string fa_openid : "\uf19b" 480 | readonly property string fa_outdent : "\uf03b" 481 | readonly property string fa_pagelines : "\uf18c" 482 | readonly property string fa_paint_brush : "\uf1fc" 483 | readonly property string fa_paper_plane : "\uf1d8" 484 | readonly property string fa_paper_plane_o : "\uf1d9" 485 | readonly property string fa_paperclip : "\uf0c6" 486 | readonly property string fa_paragraph : "\uf1dd" 487 | readonly property string fa_paste : "\uf0ea" 488 | readonly property string fa_pause : "\uf04c" 489 | readonly property string fa_paw : "\uf1b0" 490 | readonly property string fa_paypal : "\uf1ed" 491 | readonly property string fa_pencil : "\uf040" 492 | readonly property string fa_pencil_square : "\uf14b" 493 | readonly property string fa_pencil_square_o : "\uf044" 494 | readonly property string fa_phone : "\uf095" 495 | readonly property string fa_phone_square : "\uf098" 496 | readonly property string fa_photo : "\uf03e" 497 | readonly property string fa_picture_o : "\uf03e" 498 | readonly property string fa_pie_chart : "\uf200" 499 | readonly property string fa_pied_piper : "\uf1a7" 500 | readonly property string fa_pied_piper_alt : "\uf1a8" 501 | readonly property string fa_pinterest : "\uf0d2" 502 | readonly property string fa_pinterest_square : "\uf0d3" 503 | readonly property string fa_plane : "\uf072" 504 | readonly property string fa_play : "\uf04b" 505 | readonly property string fa_play_circle : "\uf144" 506 | readonly property string fa_play_circle_o : "\uf01d" 507 | readonly property string fa_plug : "\uf1e6" 508 | readonly property string fa_plus : "\uf067" 509 | readonly property string fa_plus_circle : "\uf055" 510 | readonly property string fa_plus_square : "\uf0fe" 511 | readonly property string fa_plus_square_o : "\uf196" 512 | readonly property string fa_power_off : "\uf011" 513 | readonly property string fa_print : "\uf02f" 514 | readonly property string fa_puzzle_piece : "\uf12e" 515 | readonly property string fa_qq : "\uf1d6" 516 | readonly property string fa_qrcode : "\uf029" 517 | readonly property string fa_question : "\uf128" 518 | readonly property string fa_question_circle : "\uf059" 519 | readonly property string fa_quote_left : "\uf10d" 520 | readonly property string fa_quote_right : "\uf10e" 521 | readonly property string fa_ra : "\uf1d0" 522 | readonly property string fa_random : "\uf074" 523 | readonly property string fa_rebel : "\uf1d0" 524 | readonly property string fa_recycle : "\uf1b8" 525 | readonly property string fa_reddit : "\uf1a1" 526 | readonly property string fa_reddit_square : "\uf1a2" 527 | readonly property string fa_refresh : "\uf021" 528 | readonly property string fa_remove : "\uf00d" 529 | readonly property string fa_renren : "\uf18b" 530 | readonly property string fa_reorder : "\uf0c9" 531 | readonly property string fa_repeat : "\uf01e" 532 | readonly property string fa_reply : "\uf112" 533 | readonly property string fa_reply_all : "\uf122" 534 | readonly property string fa_retweet : "\uf079" 535 | readonly property string fa_rmb : "\uf157" 536 | readonly property string fa_road : "\uf018" 537 | readonly property string fa_rocket : "\uf135" 538 | readonly property string fa_rotate_left : "\uf0e2" 539 | readonly property string fa_rotate_right : "\uf01e" 540 | readonly property string fa_rouble : "\uf158" 541 | readonly property string fa_rss : "\uf09e" 542 | readonly property string fa_rss_square : "\uf143" 543 | readonly property string fa_rub : "\uf158" 544 | readonly property string fa_ruble : "\uf158" 545 | readonly property string fa_rupee : "\uf156" 546 | readonly property string fa_save : "\uf0c7" 547 | readonly property string fa_scissors : "\uf0c4" 548 | readonly property string fa_search : "\uf002" 549 | readonly property string fa_search_minus : "\uf010" 550 | readonly property string fa_search_plus : "\uf00e" 551 | readonly property string fa_send : "\uf1d8" 552 | readonly property string fa_send_o : "\uf1d9" 553 | readonly property string fa_share : "\uf064" 554 | readonly property string fa_share_alt : "\uf1e0" 555 | readonly property string fa_share_alt_square : "\uf1e1" 556 | readonly property string fa_share_square : "\uf14d" 557 | readonly property string fa_share_square_o : "\uf045" 558 | readonly property string fa_shekel : "\uf20b" 559 | readonly property string fa_sheqel : "\uf20b" 560 | readonly property string fa_shield : "\uf132" 561 | readonly property string fa_shopping_cart : "\uf07a" 562 | readonly property string fa_sign_in : "\uf090" 563 | readonly property string fa_sign_out : "\uf08b" 564 | readonly property string fa_signal : "\uf012" 565 | readonly property string fa_sitemap : "\uf0e8" 566 | readonly property string fa_skype : "\uf17e" 567 | readonly property string fa_slack : "\uf198" 568 | readonly property string fa_sliders : "\uf1de" 569 | readonly property string fa_slideshare : "\uf1e7" 570 | readonly property string fa_smile_o : "\uf118" 571 | readonly property string fa_soccer_ball_o : "\uf1e3" 572 | readonly property string fa_sort : "\uf0dc" 573 | readonly property string fa_sort_alpha_asc : "\uf15d" 574 | readonly property string fa_sort_alpha_desc : "\uf15e" 575 | readonly property string fa_sort_amount_asc : "\uf160" 576 | readonly property string fa_sort_amount_desc : "\uf161" 577 | readonly property string fa_sort_asc : "\uf0de" 578 | readonly property string fa_sort_desc : "\uf0dd" 579 | readonly property string fa_sort_down : "\uf0dd" 580 | readonly property string fa_sort_numeric_asc : "\uf162" 581 | readonly property string fa_sort_numeric_desc : "\uf163" 582 | readonly property string fa_sort_up : "\uf0de" 583 | readonly property string fa_soundcloud : "\uf1be" 584 | readonly property string fa_space_shuttle : "\uf197" 585 | readonly property string fa_spinner : "\uf110" 586 | readonly property string fa_spoon : "\uf1b1" 587 | readonly property string fa_spotify : "\uf1bc" 588 | readonly property string fa_square : "\uf0c8" 589 | readonly property string fa_square_o : "\uf096" 590 | readonly property string fa_stack_exchange : "\uf18d" 591 | readonly property string fa_stack_overflow : "\uf16c" 592 | readonly property string fa_star : "\uf005" 593 | readonly property string fa_star_half : "\uf089" 594 | readonly property string fa_star_half_empty : "\uf123" 595 | readonly property string fa_star_half_full : "\uf123" 596 | readonly property string fa_star_half_o : "\uf123" 597 | readonly property string fa_star_o : "\uf006" 598 | readonly property string fa_steam : "\uf1b6" 599 | readonly property string fa_steam_square : "\uf1b7" 600 | readonly property string fa_step_backward : "\uf048" 601 | readonly property string fa_step_forward : "\uf051" 602 | readonly property string fa_stethoscope : "\uf0f1" 603 | readonly property string fa_stop : "\uf04d" 604 | readonly property string fa_strikethrough : "\uf0cc" 605 | readonly property string fa_stumbleupon : "\uf1a4" 606 | readonly property string fa_stumbleupon_circle : "\uf1a3" 607 | readonly property string fa_subscript : "\uf12c" 608 | readonly property string fa_suitcase : "\uf0f2" 609 | readonly property string fa_sun_o : "\uf185" 610 | readonly property string fa_superscript : "\uf12b" 611 | readonly property string fa_support : "\uf1cd" 612 | readonly property string fa_table : "\uf0ce" 613 | readonly property string fa_tablet : "\uf10a" 614 | readonly property string fa_tachometer : "\uf0e4" 615 | readonly property string fa_tag : "\uf02b" 616 | readonly property string fa_tags : "\uf02c" 617 | readonly property string fa_tasks : "\uf0ae" 618 | readonly property string fa_taxi : "\uf1ba" 619 | readonly property string fa_tencent_weibo : "\uf1d5" 620 | readonly property string fa_terminal : "\uf120" 621 | readonly property string fa_text_height : "\uf034" 622 | readonly property string fa_text_width : "\uf035" 623 | readonly property string fa_th : "\uf00a" 624 | readonly property string fa_th_large : "\uf009" 625 | readonly property string fa_th_list : "\uf00b" 626 | readonly property string fa_thumb_tack : "\uf08d" 627 | readonly property string fa_thumbs_down : "\uf165" 628 | readonly property string fa_thumbs_o_down : "\uf088" 629 | readonly property string fa_thumbs_o_up : "\uf087" 630 | readonly property string fa_thumbs_up : "\uf164" 631 | readonly property string fa_ticket : "\uf145" 632 | readonly property string fa_times : "\uf00d" 633 | readonly property string fa_times_circle : "\uf057" 634 | readonly property string fa_times_circle_o : "\uf05c" 635 | readonly property string fa_tint : "\uf043" 636 | readonly property string fa_toggle_down : "\uf150" 637 | readonly property string fa_toggle_left : "\uf191" 638 | readonly property string fa_toggle_off : "\uf204" 639 | readonly property string fa_toggle_on : "\uf205" 640 | readonly property string fa_toggle_right : "\uf152" 641 | readonly property string fa_toggle_up : "\uf151" 642 | readonly property string fa_trash : "\uf1f8" 643 | readonly property string fa_trash_o : "\uf014" 644 | readonly property string fa_tree : "\uf1bb" 645 | readonly property string fa_trello : "\uf181" 646 | readonly property string fa_trophy : "\uf091" 647 | readonly property string fa_truck : "\uf0d1" 648 | readonly property string fa_try : "\uf195" 649 | readonly property string fa_tty : "\uf1e4" 650 | readonly property string fa_tumblr : "\uf173" 651 | readonly property string fa_tumblr_square : "\uf174" 652 | readonly property string fa_turkish_lira : "\uf195" 653 | readonly property string fa_twitch : "\uf1e8" 654 | readonly property string fa_twitter : "\uf099" 655 | readonly property string fa_twitter_square : "\uf081" 656 | readonly property string fa_umbrella : "\uf0e9" 657 | readonly property string fa_underline : "\uf0cd" 658 | readonly property string fa_undo : "\uf0e2" 659 | readonly property string fa_university : "\uf19c" 660 | readonly property string fa_unlink : "\uf127" 661 | readonly property string fa_unlock : "\uf09c" 662 | readonly property string fa_unlock_alt : "\uf13e" 663 | readonly property string fa_unsorted : "\uf0dc" 664 | readonly property string fa_upload : "\uf093" 665 | readonly property string fa_usd : "\uf155" 666 | readonly property string fa_user : "\uf007" 667 | readonly property string fa_user_md : "\uf0f0" 668 | readonly property string fa_users : "\uf0c0" 669 | readonly property string fa_video_camera : "\uf03d" 670 | readonly property string fa_vimeo_square : "\uf194" 671 | readonly property string fa_vine : "\uf1ca" 672 | readonly property string fa_vk : "\uf189" 673 | readonly property string fa_volume_down : "\uf027" 674 | readonly property string fa_volume_off : "\uf026" 675 | readonly property string fa_volume_up : "\uf028" 676 | readonly property string fa_warning : "\uf071" 677 | readonly property string fa_wechat : "\uf1d7" 678 | readonly property string fa_weibo : "\uf18a" 679 | readonly property string fa_weixin : "\uf1d7" 680 | readonly property string fa_wheelchair : "\uf193" 681 | readonly property string fa_wifi : "\uf1eb" 682 | readonly property string fa_windows : "\uf17a" 683 | readonly property string fa_won : "\uf159" 684 | readonly property string fa_wordpress : "\uf19a" 685 | readonly property string fa_wrench : "\uf0ad" 686 | readonly property string fa_xing : "\uf168" 687 | readonly property string fa_xing_square : "\uf169" 688 | readonly property string fa_yahoo : "\uf19e" 689 | readonly property string fa_yelp : "\uf1e9" 690 | readonly property string fa_yen : "\uf157" 691 | readonly property string fa_youtube : "\uf167" 692 | readonly property string fa_youtube_play : "\uf16a" 693 | readonly property string fa_youtube_square : "\uf166" 694 | } 695 | } 696 | -------------------------------------------------------------------------------- /flatui/HorizontalScrollBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | 3 | Item { 4 | id: scrollBar 5 | height: background.height 6 | visible: (flickable.visibleArea.widthRatio < 1) || scrollBar.alwaysVisible ? true : false 7 | 8 | // The properties that define the scrollbar's state. 9 | // position and pageSize are in the range 0.0 - 1.0. They are relative to the 10 | // height of the page, i.e. a pageSize of 0.5 means that you can see 50% 11 | // of the height of the view. 12 | // orientation can be either Qt.Vertical or Qt.Horizontal 13 | readonly property real position: flickable.visibleArea.xPosition 14 | readonly property real pageSize: flickable.visibleArea.widthRatio 15 | readonly property int minimumWidth: 20 16 | 17 | property Flickable flickable 18 | property bool alwaysVisible: false 19 | 20 | 21 | property alias backgroundColor: background.color 22 | property alias handleColor: handle.color 23 | 24 | // A light, semi-transparent background 25 | Rectangle { 26 | id: background 27 | anchors.fill: parent 28 | radius: (height / 2 - 1) 29 | color: Qt.rgba(.9, .9, .9, .5) 30 | height: 6 31 | } 32 | 33 | // Size the bar to the required size, depending upon the orientation. 34 | //x: scrollBar.position * (scrollBar.width-2) + 1 35 | Rectangle { 36 | id: handle 37 | y: 0 38 | width: { 39 | if(scrollBar.pageSize * (scrollBar.width - 2) < scrollBar.minimumWidth) 40 | scrollBar.minimumWidth 41 | else 42 | scrollBar.pageSize * (scrollBar.width - 2) 43 | } 44 | height: parent.height 45 | radius: height/2 - 1 46 | color: Qt.rgba(.5, .5, .5, .5) 47 | 48 | Binding { 49 | target: handle 50 | property: "x" 51 | value: { 52 | if(!isNaN(flickable.visibleArea.widthRatio)) 53 | (area.drag.maximumX * flickable.contentX) / (flickable.contentWidth * (1 - flickable.visibleArea.widthRatio)) 54 | else 55 | 0 56 | } 57 | when: !area.drag.active 58 | } 59 | 60 | Binding { 61 | target: flickable 62 | property: "contentX" 63 | value: ((flickable.contentWidth * (1 - flickable.visibleArea.widthRatio)) * handle.x) / area.drag.maximumX 64 | when: area.drag.active && flickable !== undefined 65 | } 66 | 67 | MouseArea { 68 | id: area 69 | anchors.fill: parent 70 | hoverEnabled: true 71 | drag.target: parent 72 | drag.axis: Drag.XAxis 73 | drag.minimumX: 0 74 | drag.maximumX: scrollBar.width - handle.width//flk.height - scrl.height 75 | preventStealing: true 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /flatui/IconButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtGraphicalEffects 1.0 3 | import "." 4 | 5 | Button { 6 | id: root 7 | width: 40 8 | height: 40 9 | style.radius: 4 10 | text: "" 11 | } 12 | 13 | -------------------------------------------------------------------------------- /flatui/IconInput.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtQuick.Controls 2.0 as QQControls 3 | import "." 4 | 5 | Input { 6 | id: root 7 | } 8 | -------------------------------------------------------------------------------- /flatui/IconNavBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import "." 3 | 4 | Rectangle { 5 | id: root 6 | width: 100 7 | height: 45 8 | radius: 6 9 | color: "#15BF9B" 10 | 11 | property bool searchBarVisible: false 12 | } 13 | -------------------------------------------------------------------------------- /flatui/ImageCircle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import "." 3 | 4 | Rectangle { 5 | width: 200 6 | height: 200 7 | 8 | color: "transparent" 9 | 10 | property alias source: image.source 11 | 12 | //this Rectangle is needed to keep the source image's fillMode 13 | Rectangle { 14 | id: imageSource 15 | 16 | anchors.fill: parent 17 | Image { 18 | id: image 19 | anchors.fill: parent 20 | fillMode: Image.PreserveAspectCrop 21 | } 22 | visible: false 23 | 24 | layer.enabled: true 25 | } 26 | 27 | Rectangle { 28 | id: maskLayer 29 | anchors.fill: parent 30 | radius: 6 //parent.width / 2 31 | 32 | color: "red" 33 | 34 | border.color: "black" 35 | 36 | layer.enabled: true 37 | layer.samplerName: "maskSource" 38 | layer.effect: ShaderEffect { 39 | 40 | property var colorSource: imageSource 41 | fragmentShader: " 42 | uniform lowp sampler2D colorSource; 43 | uniform lowp sampler2D maskSource; 44 | uniform lowp float qt_Opacity; 45 | varying highp vec2 qt_TexCoord0; 46 | void main() { 47 | gl_FragColor = 48 | texture2D(colorSource, qt_TexCoord0) 49 | * texture2D(maskSource, qt_TexCoord0).a 50 | * qt_Opacity; 51 | } 52 | " 53 | } 54 | 55 | } 56 | 57 | // only draw border line 58 | // Rectangle { 59 | // anchors.fill: parent 60 | 61 | // radius: parent.width / 2 62 | 63 | // border.color: "black" 64 | // border.width: 2 65 | 66 | // color: "transparent" 67 | // } 68 | } 69 | -------------------------------------------------------------------------------- /flatui/InfoButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import "." 3 | 4 | Button { 5 | text: "Info Button" 6 | style.name: "info" 7 | } 8 | 9 | -------------------------------------------------------------------------------- /flatui/Input.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtQuick.Controls 2.0 as QQControls 3 | import "." 4 | 5 | QQControls.TextField { 6 | id: root 7 | placeholderText: qsTr("Inactive") 8 | leftPadding: style.leftPadding 9 | rightPadding: style.rightPadding 10 | selectionColor: style.borderColor 11 | selectedTextColor: "white" 12 | color: style.textColor 13 | 14 | font { 15 | family: FlatUI.latoRegularFont.name 16 | pixelSize: 16 17 | } 18 | 19 | readonly property alias style: style 20 | 21 | InputStyle { 22 | id: style 23 | __focused: root.activeFocus 24 | enabled: root.enabled 25 | 26 | icon.font.pixelSize: root.font.pixelSize 27 | } 28 | 29 | background: Rectangle { 30 | implicitWidth: 215 31 | implicitHeight: 47 32 | color: style.color 33 | border.color: style.borderColor 34 | border.width: style.borderWidth 35 | radius: style.radius 36 | 37 | Text { 38 | anchors.right: parent.right 39 | anchors.top: parent.top 40 | anchors.bottom: parent.bottom 41 | width: style.rightPadding + 4 42 | verticalAlignment: Qt.AlignVCenter 43 | font.family: style.icon.font.family 44 | font.pixelSize: style.icon.font.pixelSize 45 | text: style.icon.text 46 | color: style.icon.color 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /flatui/InputStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Style { 5 | id: root 6 | state: name 7 | leftPadding: 12 8 | rightPadding: 12 9 | 10 | property int radius: 4 11 | property int borderWidth: 2 12 | property color color: root.enabled ? "white" : '#cccccc'//"#f7f9f9" 13 | 14 | readonly property color disabledTextColor: "#e1e6e6" 15 | 16 | property alias icon: icon 17 | 18 | // For the icon 19 | Text { 20 | id: icon 21 | visible: false 22 | 23 | color: root.borderColor 24 | } 25 | 26 | property color textColor: { 27 | if(!root.enabled) 28 | root.disabledTextColor 29 | else { 30 | switch(root.state) { 31 | case "success": 32 | FlatUI.emerald; 33 | break; 34 | case "error": 35 | FlatUI.alizarin 36 | break; 37 | default: 38 | "black" 39 | break; 40 | } 41 | } 42 | } 43 | 44 | property color borderColor: { 45 | if(!root.enabled) 46 | root.disabledTextColor 47 | else if(root.__focused) { 48 | switch(root.state) { 49 | case "success": 50 | FlatUI.emerald 51 | break; 52 | case "error": 53 | FlatUI.alizarin 54 | break; 55 | default: 56 | FlatUI.turquoise 57 | break; 58 | } 59 | } 60 | else 61 | FlatUI.silver 62 | } 63 | 64 | Behavior on borderColor { ColorAnimation { } } 65 | } 66 | -------------------------------------------------------------------------------- /flatui/InverseButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import "." 3 | 4 | Button { 5 | text: "Inverse Button" 6 | style.name: "inverse" 7 | } 8 | 9 | -------------------------------------------------------------------------------- /flatui/NavButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Button { 5 | id: root 6 | text: "Flat UI" 7 | style.name: "nav_button" 8 | } 9 | -------------------------------------------------------------------------------- /flatui/NavDropdown.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | 3 | Item { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /flatui/NumberNavBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Rectangle { 5 | id: root 6 | } 7 | 8 | -------------------------------------------------------------------------------- /flatui/NumberNavButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtGraphicalEffects 1.0 3 | import "." 4 | 5 | Button { 6 | id: root 7 | style.color: "#D6DBDF" 8 | style.pressColor: FlatUI.turquoise 9 | style.highlightColor: FlatUI.turquoise 10 | style.checkedColor: FlatUI.turquoise 11 | style.radius: 0 12 | } 13 | 14 | -------------------------------------------------------------------------------- /flatui/PillNavBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Rectangle { 5 | id: root 6 | } 7 | 8 | -------------------------------------------------------------------------------- /flatui/PrimaryButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Button { 5 | text: "Primary Button" 6 | style.name: "primary" 7 | } 8 | 9 | -------------------------------------------------------------------------------- /flatui/ProgressBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 2.0 as QQControls 3 | import "." 4 | 5 | QQControls.ProgressBar { 6 | id: root 7 | width: 400 8 | height: 13 9 | } 10 | 11 | -------------------------------------------------------------------------------- /flatui/ProgressCircle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Item { 5 | id: root 6 | width: 240 7 | height: 240 8 | 9 | property real maximumValue: 1.0 10 | property real minimumValue: 0.0 11 | property real value: .5 12 | 13 | Timer { 14 | id: updateTimer 15 | repeat: true 16 | running: true 17 | interval: 50 18 | 19 | onTriggered: { 20 | //repeat = root.incrementValue() 21 | } 22 | } 23 | 24 | Rectangle { 25 | anchors.centerIn: parent 26 | width: 5 * parent.width / 8 27 | height: width 28 | radius: width / 2 29 | color: "transparent" 30 | border.width: 10 31 | border.color: FlatUI.clouds 32 | } 33 | 34 | Canvas { 35 | id: canvas 36 | anchors.fill: parent 37 | antialiasing: true 38 | 39 | onPaint: { 40 | var ctx = getContext('2d'); 41 | var imd = null; 42 | var circ = Math.PI * 2; 43 | var quart = Math.PI / 2; 44 | 45 | ctx.clearRect(0, 0, root.width, root.height) 46 | ctx.beginPath(); 47 | ctx.strokeStyle = FlatUI.emerald 48 | ctx.lineCap = 'square'; 49 | ctx.closePath(); 50 | ctx.fill(); 51 | ctx.lineWidth = 10.0; 52 | 53 | imd = ctx.getImageData(0, 0, canvas.width, canvas.height); 54 | 55 | var current = root.value 56 | ctx.putImageData(imd, 0, 0); 57 | ctx.beginPath(); 58 | //ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false); 59 | ctx.arc(canvas.width / 2, canvas.height / 2, 70, -(quart), ((circ) * current) - quart, false) 60 | ctx.stroke(); 61 | } 62 | } 63 | 64 | Text { 65 | anchors.centerIn: parent 66 | width: contentWidth 67 | height: contentHeight 68 | text: Math.floor(root.value * 100) + "%" 69 | color: FlatUI.midnightBlue 70 | font.pixelSize: 30 71 | font.family: FlatUI.latoLightFont.name 72 | } 73 | 74 | function incrementValue() { 75 | if(root.value >= root.maximumValue) 76 | return false 77 | root.value += .01 78 | canvas.requestPaint() 79 | 80 | return true 81 | } 82 | 83 | onValueChanged: canvas.requestPaint() 84 | } 85 | 86 | -------------------------------------------------------------------------------- /flatui/RadioButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtQuick.Controls 2.0 as QQControls 3 | import "." 4 | 5 | QQControls.RadioButton { 6 | id: root 7 | text: qsTr("Radio button") 8 | 9 | font { 10 | family: FlatUI.latoRegularFont.name 11 | pixelSize: 14 12 | } 13 | 14 | ButtonStyle { 15 | id: style 16 | name: "checkable" 17 | __checked: root.checked 18 | leftPadding: 12 19 | topPadding: 8 20 | } 21 | 22 | indicator: Text { 23 | font.family: FlatUI.glyphFont.name 24 | font.pixelSize: 18 25 | text: area.containsMouse || root.checked ? FlatUI.glyphFont.markedRadioButton : FlatUI.glyphFont.unmarkedRadioButton 26 | horizontalAlignment: Text.AlignHCenter 27 | verticalAlignment: Text.AlignVCenter 28 | leftPadding: style.leftPadding 29 | topPadding: style.topPadding 30 | color: style.color 31 | 32 | MouseArea { 33 | id: area 34 | anchors.fill: parent 35 | hoverEnabled: true 36 | cursorShape: Qt.PointingHandCursor 37 | 38 | onClicked: root.checked = !root.checked 39 | } 40 | } 41 | 42 | contentItem: Text { 43 | text: root.text 44 | font: root.font 45 | color: style.textColor 46 | horizontalAlignment: Text.AlignHCenter 47 | verticalAlignment: Text.AlignVCenter 48 | leftPadding: root.indicator.width + root.spacing 49 | } 50 | } 51 | 52 | -------------------------------------------------------------------------------- /flatui/SearchInput.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 1.2 3 | import QtQuick.Controls.Styles 1.2 4 | import "." 5 | 6 | Rectangle { 7 | id: root 8 | width: 150 9 | height: 20 10 | border.width: 2 11 | border.color: textField.activeFocus ? root.activeColor : root.defaultColor 12 | color: root.defaultColor 13 | radius: 4 14 | 15 | property color defaultColor: "#293A4A" 16 | property color activeColor: FlatUI.turquoise 17 | property color inactiveColor: "#4D5E72" 18 | property color selectedTextColor: "#7F96FF" 19 | 20 | Behavior on border.color { ColorAnimation { duration: 250 } } 21 | 22 | TextField { 23 | id: textField 24 | placeholderText: "Search" 25 | font.family: FlatUI.latoRegularFont.name 26 | font.pixelSize: 12 27 | anchors.left: parent.left 28 | anchors.right: iconRect.left 29 | anchors.margins: 2 30 | anchors.rightMargin: 0 31 | anchors.top: parent.top 32 | anchors.bottom: parent.bottom 33 | 34 | style: TextFieldStyle { 35 | background: Rectangle { 36 | color: root.defaultColor 37 | radius: 4 38 | } 39 | 40 | placeholderTextColor: root.inactiveColor 41 | textColor: control.activeFocus ? root.activeColor : root.inactiveColor 42 | selectionColor: "white" 43 | selectedTextColor: root.selectedTextColor 44 | } 45 | } 46 | 47 | Rectangle { 48 | id: iconRect 49 | anchors.right: parent.right 50 | anchors.top: parent.top 51 | anchors.bottom: parent.bottom 52 | anchors.margins: 2 53 | width: 30 54 | color: root.defaultColor 55 | border.color: area.pressed ? FlatUI.belize_hole : "" 56 | border.width: area.pressed ? 2 : 0 57 | 58 | Text { 59 | id: searchIcon 60 | font.family: FlatUI.glyphFont.name 61 | font.pixelSize: 12 62 | anchors.centerIn: parent 63 | text: FlatUI.glyphFont.search 64 | verticalAlignment: Qt.AlignVCenter 65 | horizontalAlignment: Qt.AlignHCenter 66 | width: contentWidth 67 | height: contentHeight 68 | color: textField.activeFocus ? root.activeColor : root.inactiveColor 69 | 70 | Behavior on color { ColorAnimation { duration: 250 } } 71 | } 72 | 73 | MouseArea { 74 | id: area 75 | anchors.fill: parent 76 | cursorShape: Qt.PointingHandCursor 77 | hoverEnabled: true 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /flatui/Select.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtQuick.Controls 2.0 as QQControls 3 | import "." 4 | 5 | QQControls.ComboBox { 6 | id: root 7 | model: ["First", "Second", "Third"] 8 | 9 | font { 10 | family: FlatUI.latoRegularFont.name 11 | pixelSize: 16 12 | bold: true 13 | } 14 | 15 | property alias style: style 16 | 17 | ButtonStyle { 18 | id: style 19 | __focused: area.activeFocus 20 | __hovered: area.containsMouse || root.activeFocus 21 | __pressed: area.pressed 22 | enabled: root.enabled 23 | } 24 | 25 | delegate: QQControls.ItemDelegate { 26 | width: root.width 27 | text: modelData 28 | font.weight: root.currentIndex === index ? Font.DemiBold : Font.Normal 29 | highlighted: root.highlightedIndex == index 30 | } 31 | 32 | indicator: Text { 33 | x: root.width - width - root.rightPadding 34 | y: root.topPadding + (root.availableHeight - height) / 2 35 | width: 12 36 | height: 4 37 | text: FlatUI.fontAwesome.fa_caret_down 38 | font.family: FlatUI.fontAwesome.name 39 | font.pixelSize: 16 40 | color: style.iconColor 41 | } 42 | 43 | contentItem: Text { 44 | leftPadding: 0 45 | rightPadding: root.indicator.width + root.spacing 46 | 47 | text: root.displayText 48 | font: root.font 49 | color: style.textColor 50 | horizontalAlignment: Text.AlignLeft 51 | verticalAlignment: Text.AlignVCenter 52 | elide: Text.ElideRight 53 | } 54 | 55 | background: Rectangle { 56 | implicitWidth: 120 57 | implicitHeight: 40 58 | color: style.color 59 | radius: style.radius 60 | 61 | MouseArea { 62 | id: area 63 | hoverEnabled: true 64 | anchors.fill: parent 65 | cursorShape: Qt.PointingHandCursor 66 | 67 | onClicked: { 68 | if(!root.popup.visible) 69 | root.popup.open() 70 | else 71 | root.popup.close() 72 | } 73 | } 74 | } 75 | } 76 | 77 | -------------------------------------------------------------------------------- /flatui/Sidebar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "." 3 | 4 | Rectangle { 5 | width: 100 6 | height: 62 7 | } 8 | 9 | -------------------------------------------------------------------------------- /flatui/Slider.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Controls 2.0 as QQControls 3 | import "." 4 | 5 | QQControls.Slider { 6 | id: root 7 | 8 | property alias style: style 9 | 10 | SliderStyle { 11 | id: style 12 | name: "primary" 13 | radius: handle.implicitWidth / 2 14 | 15 | //__hovered: area.containsMouse 16 | __focused: root.activeFocus 17 | 18 | } 19 | 20 | background: Rectangle { 21 | x: root.leftPadding 22 | y: root.topPadding + root.availableHeight / 2 - height / 2 23 | implicitWidth: 200 24 | implicitHeight: 12 25 | width: root.availableWidth 26 | height: implicitHeight 27 | radius: 12 28 | color: style.grooveColor 29 | 30 | Rectangle { 31 | width: root.visualPosition * parent.width 32 | height: parent.height 33 | color: style.progressColor 34 | radius: 12 35 | } 36 | } 37 | 38 | handle: Rectangle { 39 | x: root.leftPadding + root.visualPosition * (root.availableWidth - width) 40 | y: root.topPadding + root.availableHeight / 2 - height / 2 41 | color: style.color 42 | radius: width / 2 43 | implicitWidth: 20 44 | implicitHeight: implicitWidth 45 | 46 | // MouseArea { 47 | // anchors.fill: parent 48 | // cursorShape: Qt.PointingHandCursor 49 | // hoverEnabled: true 50 | 51 | // } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /flatui/SliderStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | ButtonStyle { 5 | property color handleColor: FlatUI.turquoise 6 | property color grooveColor: FlatUI.clouds 7 | property color progressColor: handleColor 8 | } 9 | -------------------------------------------------------------------------------- /flatui/Style.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | 3 | Item { 4 | property string name: "" 5 | property bool __focused: false 6 | property int leftPadding: 0 7 | property int rightPadding: 0 8 | property int topPadding: 0 9 | property int bottomPadding: 0 10 | } 11 | -------------------------------------------------------------------------------- /flatui/SuccessButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Button { 5 | text: "Success Button" 6 | style.name: "success" 7 | } 8 | 9 | -------------------------------------------------------------------------------- /flatui/Switch.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtGraphicalEffects 1.0 3 | import QtQuick.Controls 2.0 as QQControls 4 | import "." 5 | 6 | QQControls.Switch { 7 | id: root 8 | text: qsTr("Switch") 9 | 10 | font { 11 | family: FlatUI.latoRegularFont.name 12 | pixelSize: 14 13 | bold: true 14 | } 15 | 16 | property alias style: style 17 | 18 | SwitchStyle { 19 | id: style 20 | radius: indicator.implicitHeight 21 | } 22 | 23 | indicator: Item { 24 | implicitWidth: 80 25 | implicitHeight: 30 26 | 27 | // The content to be displayed 28 | Rectangle { 29 | id: indicatorContent 30 | anchors.fill: parent 31 | visible: false // to make the mask show 32 | radius: style.radius 33 | color: offPortion.color 34 | 35 | // Off portion 36 | Rectangle { 37 | id: offPortion 38 | anchors.left: parent.left 39 | anchors.right: parent.right 40 | anchors.top: parent.top 41 | anchors.bottom: parent.bottom 42 | width: parent.width 43 | color: style.offColor 44 | } 45 | 46 | Text { 47 | id: offText 48 | anchors.verticalCenter: parent.verticalCenter 49 | anchors.left: handle.right 50 | anchors.leftMargin: 10 51 | font: root.font 52 | text: style.offText 53 | color: style.offTextColor 54 | } 55 | 56 | // On portion 57 | Rectangle { 58 | id: onPortion 59 | anchors.top: parent.top 60 | anchors.bottom: parent.bottom 61 | anchors.right: offPortion.left 62 | anchors.left: undefined 63 | width: parent.width 64 | color: style.onColor 65 | } 66 | 67 | // ON text 68 | Text { 69 | id: onText 70 | anchors.verticalCenter: parent.verticalCenter 71 | anchors.right: handle.left 72 | anchors.rightMargin: 10 73 | text: style.onText 74 | color: style.onTextColor 75 | font: root.font 76 | } 77 | 78 | Rectangle { 79 | id: handle 80 | anchors.left: parent.left 81 | anchors.leftMargin: 6 82 | anchors.rightMargin: 6 83 | anchors.verticalCenter: parent.verticalCenter 84 | height: parent.height - 8 85 | width: height 86 | radius: width / 2 87 | color: root.checked ? style.handleOnColor : style.handleOffColor 88 | 89 | Behavior on color {ColorAnimation {} } 90 | } 91 | 92 | states: [ 93 | State { 94 | when: !root.checked 95 | name: "" 96 | 97 | AnchorChanges { 98 | target: offPortion 99 | anchors.left: indicatorContent.left 100 | anchors.right: indicatorContent.right 101 | } 102 | 103 | AnchorChanges { 104 | target: onPortion 105 | anchors.left: undefined 106 | anchors.right: offPortion.left 107 | } 108 | 109 | AnchorChanges { 110 | target: handle 111 | anchors.left: indicatorContent.left 112 | anchors.right: undefined 113 | } 114 | 115 | PropertyChanges { 116 | target: handle 117 | color: style.handleOffColor 118 | } 119 | }, 120 | 121 | State { 122 | name: "ON" 123 | when: root.checked 124 | 125 | AnchorChanges { 126 | target: offPortion 127 | anchors.left: onPortion.right 128 | anchors.right: undefined 129 | } 130 | 131 | AnchorChanges { 132 | target: onPortion 133 | anchors.left: indicatorContent.left 134 | anchors.right: indicatorContent.right 135 | } 136 | 137 | AnchorChanges { 138 | target: handle 139 | anchors.left: undefined 140 | anchors.right: indicatorContent.right 141 | } 142 | 143 | PropertyChanges { 144 | target: handle 145 | color: style.handleOnColor 146 | } 147 | } 148 | ] 149 | 150 | transitions: [ 151 | Transition { 152 | AnchorAnimation { duration: 250 } 153 | } 154 | ] 155 | } 156 | 157 | // Mask that provides the rounded edges 158 | Rectangle { 159 | id: mask 160 | x: indicatorContent.x 161 | y: indicatorContent.y 162 | width: indicatorContent.width 163 | height: indicatorContent.height 164 | color: "black" 165 | radius: indicatorContent.radius 166 | clip: true 167 | visible: false // to make the mask show 168 | opacity: opacityMask.opacity 169 | } 170 | 171 | // Object that does the actual masking 172 | OpacityMask { 173 | id: opacityMask 174 | anchors.fill: mask 175 | source: indicatorContent 176 | maskSource: mask 177 | opacity: indicator.opacity 178 | z: parent.z - 1 179 | } 180 | 181 | MouseArea { 182 | anchors.fill: parent 183 | cursorShape: Qt.PointingHandCursor 184 | onClicked: root.checked = !root.checked 185 | } 186 | } 187 | 188 | contentItem: Item {} 189 | } 190 | -------------------------------------------------------------------------------- /flatui/SwitchStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Style { 5 | property int radius: 40 6 | property color offColor: FlatUI.silver 7 | property color offTextColor: "white" 8 | property string offText: "OFF" 9 | 10 | property color onColor: FlatUI.wetAsphalt 11 | property color onTextColor: FlatUI.turquoise 12 | property string onText: "ON" 13 | 14 | property color handleOnColor: FlatUI.turquoise 15 | property color handleOffColor: FlatUI.asbestos 16 | } 17 | -------------------------------------------------------------------------------- /flatui/ToolTip.qml: -------------------------------------------------------------------------------- 1 | import QtQuick.Controls 2.0 as QQControls 2 | import "." 3 | 4 | QQControls.ToolTip { 5 | id: root 6 | } 7 | -------------------------------------------------------------------------------- /flatui/TooltipCreator.js: -------------------------------------------------------------------------------- 1 | .pragma library 2 | 3 | var component = Qt.createComponent("Tooltip.qml"); 4 | 5 | var count = 0 6 | 7 | function create(text, parent, properties) { 8 | if (typeof properties === "undefined") { 9 | properties = { 10 | anchors: { 11 | horizontalCenter: parent.horizontalCenter, 12 | top: parent.bottom, 13 | topMargin: parent.height / 8 14 | } 15 | }; 16 | } 17 | 18 | properties.text = text; 19 | var tooltip = component.createObject(parent, properties); 20 | 21 | if (tooltip === null) { 22 | console.error("error creating tooltip: " + component.errorString()); 23 | } 24 | else if (properties.anchors) { 25 | // manual anchor mapping necessary 26 | for (var anchor in properties.anchors) { 27 | tooltip.anchors[anchor] = properties.anchors[anchor] 28 | } 29 | } 30 | 31 | count++ 32 | return tooltip 33 | } 34 | 35 | function destroy() { 36 | if(count > 0) 37 | count-- 38 | } 39 | 40 | function isIdle() { 41 | return count == 0 42 | } 43 | -------------------------------------------------------------------------------- /flatui/TopNavBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Rectangle { 5 | id: root 6 | width: 500 7 | height: 55 8 | radius: 6 9 | color: FlatUI.wetAsphalt 10 | } 11 | 12 | -------------------------------------------------------------------------------- /flatui/VerticalScrollBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | 3 | Item { 4 | id: scrollBar 5 | width: background.width 6 | visible: (flickable.visibleArea.heightRatio < 1) || scrollBar.alwaysVisible ? true : false 7 | 8 | // The properties that define the scrollbar's state. 9 | // position and pageSize are in the range 0.0 - 1.0. They are relative to the 10 | // height of the page, i.e. a pageSize of 0.5 means that you can see 50% 11 | // of the height of the view. 12 | // orientation can be either Qt.Vertical or Qt.Horizontal 13 | readonly property real position: flickable.visibleArea.yPosition 14 | readonly property real pageSize: flickable.visibleArea.heightRatio 15 | readonly property int minimumHeight: 20 16 | property Flickable flickable 17 | 18 | property bool alwaysVisible: false 19 | property int expandedOffset: 8 20 | 21 | 22 | property alias backgroundColor: background.color 23 | property alias handleColor: handle.color 24 | 25 | // A light, semi-transparent background 26 | Rectangle { 27 | id: background 28 | anchors.fill: parent 29 | radius: (width / 2 - 1) 30 | color: Qt.rgba(.9, .9, .9, .5) 31 | width: 5 32 | 33 | property int defaultWidth 34 | 35 | Behavior on x {NumberAnimation {}} 36 | Behavior on width {NumberAnimation {}} 37 | } 38 | 39 | // Size the bar to the required size, depending upon the orientation. 40 | //y: (scrollBar.position * (scrollBar.height - 2) + 1) // "y" is handled by bindings below 41 | Rectangle { 42 | id: handle 43 | x: 0 44 | radius: width / 2 - 1 45 | color: Qt.rgba(.5, .5, .5, .5) 46 | width: parent.width 47 | height: { 48 | if(scrollBar.pageSize * (scrollBar.height - 2) < scrollBar.minimumHeight) 49 | scrollBar.minimumHeight 50 | else 51 | scrollBar.pageSize * (scrollBar.height - 2) 52 | } 53 | 54 | 55 | Binding { 56 | target: handle 57 | property: "y" 58 | value: { 59 | if(!isNaN(flickable.visibleArea.heightRatio)) 60 | (area.drag.maximumY * flickable.contentY) / (flickable.contentHeight * (1 - flickable.visibleArea.heightRatio)) 61 | else 62 | 0 63 | } 64 | when: !area.drag.active 65 | } 66 | 67 | Binding { 68 | target: flickable 69 | property: "contentY" 70 | value: ((flickable.contentHeight * (1 - flickable.visibleArea.heightRatio)) * handle.y) / area.drag.maximumY 71 | when: area.drag.active && flickable !== undefined 72 | } 73 | 74 | MouseArea { 75 | id: area 76 | anchors.fill: parent 77 | hoverEnabled: true 78 | drag.target: parent 79 | drag.axis: Drag.YAxis 80 | drag.minimumY: 0 81 | drag.maximumY: scrollBar.height - handle.height 82 | preventStealing: true 83 | 84 | onContainsMouseChanged: { 85 | if(containsMouse) { 86 | background.width = background.defaultWidth + scrollBar.expandedOffset 87 | background.x -= scrollBar.expandedOffset 88 | } 89 | else { 90 | background.width = background.defaultWidth 91 | background.x += scrollBar.expandedOffset 92 | } 93 | } 94 | } 95 | } 96 | 97 | Component.onCompleted: background.defaultWidth = scrollBar.width 98 | } 99 | -------------------------------------------------------------------------------- /flatui/WarningButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import "." 3 | 4 | Button { 5 | text: "Warning Button" 6 | style.name: "warning" 7 | } 8 | 9 | -------------------------------------------------------------------------------- /flatui/fonts/fontawesome/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/fontawesome/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /flatui/fonts/fontawesome/icon/font-awesome-qml.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/fontawesome/icon/font-awesome-qml.icns -------------------------------------------------------------------------------- /flatui/fonts/fontawesome/icon/font-awesome-qml.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/fontawesome/icon/font-awesome-qml.ico -------------------------------------------------------------------------------- /flatui/fonts/fontawesome/icon/font-awesome-qml.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/fontawesome/icon/font-awesome-qml.png -------------------------------------------------------------------------------- /flatui/fonts/fontawesome/icon/font-awesome-qml@2x.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/fontawesome/icon/font-awesome-qml@2x.ico -------------------------------------------------------------------------------- /flatui/fonts/fontawesome/icon/font-awesome-qml@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/fontawesome/icon/font-awesome-qml@2x.png -------------------------------------------------------------------------------- /flatui/fonts/fontawesome/screenshot/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/fontawesome/screenshot/screenshot.png -------------------------------------------------------------------------------- /flatui/fonts/glyphicons/flat-ui-icons-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/glyphicons/flat-ui-icons-regular.eot -------------------------------------------------------------------------------- /flatui/fonts/glyphicons/flat-ui-icons-regular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | { 7 | "fontFamily": "flat-ui-icons", 8 | "majorVersion": 1, 9 | "minorVersion": 1, 10 | "fontURL": "http://designmodo.com/flat", 11 | "designer": "Sergey Shmidt", 12 | "designerURL": "http://designmodo.com", 13 | "license": "Attribution-NonCommercial-NoDerivs 3.0 Unported", 14 | "licenseURL": "http://creativecommons.org/licenses/by-nc-nd/3.0/", 15 | "version": "Version 1.1", 16 | "fontId": "flat-ui-icons", 17 | "psName": "flat-ui-icons", 18 | "subFamily": "Regular", 19 | "fullName": "flat-ui-icons", 20 | "description": "Generated by IcoMoon" 21 | } 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /flatui/fonts/glyphicons/flat-ui-icons-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/glyphicons/flat-ui-icons-regular.ttf -------------------------------------------------------------------------------- /flatui/fonts/glyphicons/flat-ui-icons-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/glyphicons/flat-ui-icons-regular.woff -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-black.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-black.eot -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-black.ttf -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-black.woff -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-bold.eot -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-bold.ttf -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-bold.woff -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-bolditalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-bolditalic.eot -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-bolditalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-bolditalic.ttf -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-bolditalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-bolditalic.woff -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-italic.eot -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-italic.ttf -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-italic.woff -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-light.eot -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-light.ttf -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-light.woff -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-regular.eot -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-regular.ttf -------------------------------------------------------------------------------- /flatui/fonts/lato/lato-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/fonts/lato/lato-regular.woff -------------------------------------------------------------------------------- /flatui/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/favicon.ico -------------------------------------------------------------------------------- /flatui/img/icons/png/Book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Book.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Calendar.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Chat.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Clipboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Clipboard.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Compas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Compas.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Gift-Box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Gift-Box.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Infinity-Loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Infinity-Loop.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Mail.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Map.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Pensils.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Pensils.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Pocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Pocket.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Retina-Ready.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Retina-Ready.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Toilet-Paper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Toilet-Paper.png -------------------------------------------------------------------------------- /flatui/img/icons/png/Watches.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/icons/png/Watches.png -------------------------------------------------------------------------------- /flatui/img/icons/svg/book.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/chat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/clipboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/clocks.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/compas.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/gift-box.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/loop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/map.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/paper-bag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/pencils.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/retina.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/ribbon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | POPULAR 9 | 10 | 14 | 21 | 25 | 29 | 30 | 33 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /flatui/img/icons/svg/toilet-paper.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flatui/img/login/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/login/icon.png -------------------------------------------------------------------------------- /flatui/img/login/imac-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/login/imac-2x.png -------------------------------------------------------------------------------- /flatui/img/login/imac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/login/imac.png -------------------------------------------------------------------------------- /flatui/img/tile/ribbon-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/tile/ribbon-2x.png -------------------------------------------------------------------------------- /flatui/img/tile/ribbon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/img/tile/ribbon.png -------------------------------------------------------------------------------- /flatui/qmldir: -------------------------------------------------------------------------------- 1 | ### qmldir --- 2 | ## 3 | ## Author: obeezzy 4 | ## Created: Thu Oct 8 1:00:46 2015 (+0100) 5 | ## Version: 6 | ## Last-Updated: 7 | ## By: 8 | ## Update #: 45 9 | ###################################################################### 10 | ## 11 | ### Change Log: 12 | ## 13 | ###################################################################### 14 | 15 | module FlatUI 16 | 17 | singleton FlatUI 1.0 FlatUI.qml 18 | FlatRadioButton 1.0 FlatRadioButton.qml 19 | FlatSlider 1.0 FlatSlider.qml 20 | FlatNavButton 1.0 FlatNavButton.qml 21 | FlatImage 1.0 FlatImage.qml 22 | FlatIconNavBar 1.0 FlatIconNavBar.qml 23 | FlatIconButton 1.0 FlatIconButton.qml 24 | FlatNumberNavBar 1.0 FlatNumberNavBar.qml 25 | FlatButton 1.0 FlatButton.qml 26 | FlatNumberNavButton 1.0 FlatNumberNavButton.qml 27 | FlatPillNavBar 1.0 FlatPillNavBar.qml 28 | FlatTopNavBar 1.0 FlatTopNavBar.qml 29 | FlatCheckBox 1.0 FlatCheckBox.qml 30 | FlatSwitch 1.0 FlatSwitch.qml 31 | FlatBoxSwitch 1.0 FlatBoxSwitch.qml 32 | FlatPrimaryButton 1.0 FlatPrimaryButton.qml 33 | FlatWarningButton 1.0 FlatWarningButton.qml 34 | FlatDefaultButton 1.0 FlatDefaultButton.qml 35 | FlatDangerButton 1.0 FlatDangerButton.qml 36 | FlatSuccessButton 1.0 FlatSuccessButton.qml 37 | FlatInverseButton 1.0 FlatInverseButton.qml 38 | FlatInfoButton 1.0 FlatInfoButton.qml 39 | FlatDropdown 1.0 FlatDropdown.qml 40 | HorizontalScrollBar 1.0 HorizontalScrollBar.qml 41 | VerticalScrollBar 1.0 VerticalScrollBar.qml 42 | FlatSelect 1.0 FlatSelect.qml 43 | FlatNavDropdown 1.0 FlatNavDropdown.qml 44 | FlatProgressBar 1.0 FlatProgressBar.qml 45 | FlatProgressCircle 1.0 FlatProgressCircle.qml 46 | FlatInput 1.0 FlatInput.qml 47 | FlatConstants 1.0 FlatConstants.qml 48 | FlatIconInput 1.0 FlatIconInput.qml 49 | FlatSearchInput 1.0 FlatSearchInput.qml -------------------------------------------------------------------------------- /flatui/src/android-clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/android-clock.png -------------------------------------------------------------------------------- /flatui/src/android-contact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/android-contact.png -------------------------------------------------------------------------------- /flatui/src/arrow-down-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/arrow-down-b.png -------------------------------------------------------------------------------- /flatui/src/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/camera.png -------------------------------------------------------------------------------- /flatui/src/checkmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/checkmark.png -------------------------------------------------------------------------------- /flatui/src/chevron-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/chevron-left.png -------------------------------------------------------------------------------- /flatui/src/chevron-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/chevron-right.png -------------------------------------------------------------------------------- /flatui/src/close-round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/close-round.png -------------------------------------------------------------------------------- /flatui/src/eye.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/eye.png -------------------------------------------------------------------------------- /flatui/src/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/heart.png -------------------------------------------------------------------------------- /flatui/src/ios7-checkmark-outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/ios7-checkmark-outline.png -------------------------------------------------------------------------------- /flatui/src/navicon-round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/flatui/src/navicon-round.png -------------------------------------------------------------------------------- /main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QGuiApplication app(argc, argv); 7 | 8 | QQmlApplicationEngine engine; 9 | engine.load(QUrl(QStringLiteral("main.qml"))); 10 | 11 | return app.exec(); 12 | } 13 | -------------------------------------------------------------------------------- /main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Window 2.2 3 | import "flatui" as Flat 4 | import QtQuick.Controls 2.0 5 | import QtQuick.Controls 1.4 as OldControls 6 | 7 | ApplicationWindow { 8 | id: window 9 | visible: true 10 | width: 680 11 | height: 480 12 | 13 | OldControls.ScrollView { 14 | width: mainContent.width 15 | height: window.height 16 | 17 | Item { 18 | id: mainContent 19 | width: window.width 20 | height: header.height + mainLayout.height + 200 21 | 22 | readonly property int marginWidth: 100 23 | Item { 24 | id: leftMargin 25 | anchors.left: parent.left 26 | anchors.top: parent.top 27 | anchors.bottom: parent.bottom 28 | width: parent.marginWidth 29 | } 30 | 31 | Item { 32 | id: rightMargin 33 | anchors.right: parent.right 34 | anchors.top: parent.top 35 | anchors.bottom: parent.bottom 36 | width: parent.marginWidth 37 | } 38 | 39 | Text { 40 | id: header 41 | anchors.horizontalCenter: parent.horizontalCenter 42 | anchors.top: parent.top 43 | anchors.bottomMargin: 20 44 | 45 | text: "Flat UI" 46 | width: contentWidth 47 | height: contentHeight 48 | color: Flat.FlatUI.midnightBlue 49 | font { 50 | family: Flat.FlatUI.latoBlackFont.name 51 | bold: true 52 | pointSize: 50 53 | } 54 | } 55 | 56 | Column { 57 | id: mainLayout 58 | anchors.top: header.bottom 59 | anchors.topMargin: 30 60 | anchors.left: leftMargin.right 61 | anchors.right: rightMargin.left 62 | spacing: 25 63 | 64 | Text { 65 | text: "Basic elements" 66 | width: contentWidth 67 | height: contentHeight 68 | color: Flat.FlatUI.midnightBlue 69 | font { 70 | family: Flat.FlatUI.latoRegularFont.name 71 | bold: true 72 | pointSize: 30 73 | } 74 | } 75 | 76 | Text { 77 | text: "Buttons" 78 | width: contentWidth 79 | height: contentHeight 80 | color: Flat.FlatUI.midnightBlue 81 | font { 82 | family: Flat.FlatUI.latoRegularFont.name 83 | bold: true 84 | pointSize: 18 85 | } 86 | } 87 | 88 | Grid { 89 | columns: 4 90 | rows: 4 91 | rowSpacing: 40 92 | columnSpacing: 40 93 | 94 | Flat.PrimaryButton {} 95 | Flat.WarningButton {} 96 | Flat.DefaultButton {} 97 | Flat.DangerButton {} 98 | Flat.SuccessButton {} 99 | Flat.InverseButton {} 100 | Flat.InfoButton {} 101 | Flat.PrimaryButton {enabled: false; text: "Disabled Button"} 102 | } 103 | 104 | Text { 105 | text: "Input" 106 | width: contentWidth 107 | height: contentHeight 108 | color: Flat.FlatUI.midnightBlue 109 | font { 110 | family: Flat.FlatUI.latoRegularFont.name 111 | bold: true 112 | pointSize: 18 113 | } 114 | } 115 | 116 | Row { 117 | spacing: 20 118 | 119 | Flat.Input {placeholderText: "Inactive"} 120 | Flat.Input {style.name: "error"; text: "Error"} 121 | Flat.Input {style.name: "success"; text: "Success"} 122 | Flat.Input {enabled: false; text: "Disabled"} 123 | } 124 | 125 | Row { 126 | spacing: 200 127 | 128 | Column { 129 | spacing: 30 130 | Text { 131 | text: "Dropdown" 132 | width: contentWidth 133 | height: contentHeight 134 | color: Flat.FlatUI.midnightBlue 135 | font { 136 | family: Flat.FlatUI.latoRegularFont.name 137 | bold: true 138 | pointSize: 18 139 | } 140 | } 141 | 142 | Flat.Dropdown { 143 | // text: "Default"; 144 | // dropdownHeight: 150 145 | 146 | model: ListModel { 147 | ListElement {item: "Action"; separator: false} 148 | ListElement {item: "Another action"; separator: false} 149 | ListElement {item: "Something else here"; separator: false} 150 | ListElement {item: "Separated link"; separator: true} 151 | } 152 | } 153 | } 154 | 155 | Column { 156 | spacing: 30 157 | Text { 158 | text: "Select" 159 | width: contentWidth 160 | height: contentHeight 161 | color: Flat.FlatUI.midnightBlue 162 | font { 163 | family: Flat.FlatUI.latoRegularFont.name 164 | bold: true 165 | pointSize: 18 166 | } 167 | } 168 | 169 | Flat.Select { 170 | model: ["Spider-man", "Superman", "Batman"] 171 | } 172 | } 173 | } 174 | 175 | 176 | Text { 177 | text: "Navbar" 178 | width: contentWidth 179 | height: contentHeight 180 | color: Flat.FlatUI.midnightBlue 181 | font { 182 | family: Flat.FlatUI.latoRegularFont.name 183 | bold: true 184 | pointSize: 18 185 | } 186 | } 187 | 188 | Flat.TopNavBar { 189 | anchors.left: parent.left 190 | anchors.right: parent.right 191 | //searchBarVisible: true 192 | 193 | Row { 194 | anchors.top: parent.top 195 | anchors.bottom: parent.bottom 196 | 197 | Flat.NavButton { 198 | text: "Flat UI" 199 | anchors.top: parent.top 200 | anchors.bottom: parent.bottom 201 | style.icon.font.pointSize: 18 202 | //pointSize: 18 203 | } 204 | 205 | Flat.NavButton { 206 | text: "Menu item" 207 | anchors.top: parent.top 208 | anchors.bottom: parent.bottom 209 | //indicatorVisible: true 210 | } 211 | 212 | Flat.NavDropdown { 213 | //text: "Messages" 214 | anchors.top: parent.top 215 | anchors.bottom: parent.bottom 216 | //dropdownHeight: 150 217 | //width: textWidth + 30 218 | } 219 | 220 | Flat.NavButton { 221 | text: "About us" 222 | anchors.top: parent.top 223 | anchors.bottom: parent.bottom 224 | } 225 | } 226 | } 227 | 228 | Item { 229 | // spacer 230 | anchors.left: parent.left 231 | anchors.right: parent.right 232 | height: 50 233 | } 234 | 235 | Row { 236 | spacing: 200 237 | Column { 238 | spacing: 30 239 | Text { 240 | text: "Progress bars & Sliders" 241 | width: contentWidth 242 | height: contentHeight 243 | color: Flat.FlatUI.midnightBlue 244 | font { 245 | family: Flat.FlatUI.latoRegularFont.name 246 | bold: true 247 | pointSize: 18 248 | } 249 | } 250 | 251 | Flat.ProgressBar { 252 | value: slider.value / 100 253 | } 254 | 255 | Flat.Slider { 256 | id: slider 257 | //tickCount: 0 258 | } 259 | 260 | Flat.ProgressCircle { 261 | value: slider.value / 100 262 | } 263 | } 264 | 265 | Column { 266 | spacing: 50 267 | Text { 268 | text: "Navigation" 269 | width: contentWidth 270 | height: contentHeight 271 | color: Flat.FlatUI.midnightBlue 272 | font { 273 | family: Flat.FlatUI.latoRegularFont.name 274 | bold: true 275 | pointSize: 18 276 | } 277 | } 278 | 279 | Row { 280 | spacing: 40 281 | 282 | Flat.IconNavBar { 283 | width: iconButtonRow.width 284 | Row { 285 | id: iconButtonRow 286 | anchors.top: parent.top 287 | anchors.bottom: parent.bottom 288 | 289 | Flat.IconButton { 290 | anchors.top: parent.top 291 | anchors.bottom: parent.bottom 292 | text: Flat.FlatUI.glyphFont.clock 293 | } 294 | 295 | Flat.IconButton { 296 | anchors.top: parent.top 297 | anchors.bottom: parent.bottom 298 | text: Flat.FlatUI.glyphFont.camera 299 | } 300 | 301 | Flat.IconButton { 302 | anchors.top: parent.top 303 | anchors.bottom: parent.bottom 304 | text: Flat.FlatUI.glyphFont.heart 305 | } 306 | 307 | Flat.IconButton { 308 | anchors.top: parent.top 309 | anchors.bottom: parent.bottom 310 | text: Flat.FlatUI.glyphFont.eye 311 | } 312 | } 313 | } 314 | 315 | Flat.PillNavBar {} 316 | } 317 | 318 | Flat.NumberNavBar { 319 | //count: 50 320 | //visibleCount: 8 321 | } 322 | } 323 | } 324 | 325 | Row { 326 | spacing: 120 327 | Column { 328 | spacing: 20 329 | 330 | Text { 331 | text: "Checkboxes" 332 | width: contentWidth 333 | height: contentHeight 334 | color: Flat.FlatUI.midnightBlue 335 | font { 336 | family: Flat.FlatUI.latoRegularFont.name 337 | bold: true 338 | pointSize: 18 339 | } 340 | } 341 | 342 | Flat.CheckBox { 343 | text: "Unchecked" 344 | } 345 | 346 | Flat.CheckBox { 347 | text: "Checked" 348 | checked: true 349 | } 350 | 351 | Flat.CheckBox { 352 | text: "Disabled unchecked" 353 | enabled: false 354 | } 355 | 356 | Flat.CheckBox { 357 | text: "Disabled checked" 358 | checked: true 359 | enabled: false 360 | } 361 | } 362 | 363 | Column { 364 | spacing: 20 365 | 366 | Text { 367 | text: "Radio Buttons" 368 | width: contentWidth 369 | height: contentHeight 370 | color: Flat.FlatUI.midnightBlue 371 | font { 372 | family: Flat.FlatUI.latoRegularFont.name 373 | bold: true 374 | pointSize: 18 375 | } 376 | } 377 | 378 | ButtonGroup { id: radioGroup } 379 | 380 | Flat.RadioButton { 381 | ButtonGroup.group: radioGroup 382 | text: "Radio is off" 383 | } 384 | 385 | Flat.RadioButton { 386 | ButtonGroup.group: radioGroup 387 | text: "Radio is on" 388 | checked: true 389 | } 390 | 391 | Flat.RadioButton { 392 | ButtonGroup.group: radioGroup 393 | text: "Disabled radio is off" 394 | enabled: false 395 | } 396 | 397 | Flat.RadioButton { 398 | ButtonGroup.group: radioGroup 399 | text: "Disabled radio is on" 400 | checked: true 401 | enabled: false 402 | } 403 | } 404 | 405 | Column { 406 | spacing: 20 407 | 408 | Text { 409 | text: "Switches" 410 | width: contentWidth 411 | height: contentHeight 412 | color: Flat.FlatUI.midnightBlue 413 | font { 414 | family: Flat.FlatUI.latoRegularFont.name 415 | bold: true 416 | pointSize: 18 417 | } 418 | } 419 | 420 | Row { 421 | spacing: 100 422 | Flat.Switch {} 423 | Flat.Switch {checked: true} 424 | } 425 | 426 | Row { 427 | spacing: 100 428 | Flat.BoxSwitch {} 429 | Flat.BoxSwitch {checked: true} 430 | } 431 | 432 | Row { 433 | spacing: 100 434 | Flat.Switch {enabled: false} 435 | Flat.Switch {enabled: false} 436 | 437 | } 438 | 439 | Row { 440 | spacing: 30 441 | Flat.IconInput { 442 | placeholderText: "Enter user name" 443 | style.icon.font.family: Flat.FlatUI.glyphFont.name 444 | style.icon.text: Flat.FlatUI.glyphFont.user 445 | } 446 | 447 | Flat.IconInput { 448 | placeholderText: "Enter password" 449 | style.icon.font.family: Flat.FlatUI.glyphFont.name 450 | style.icon.text: Flat.FlatUI.glyphFont.locked 451 | echoMode: TextInput.Password 452 | } 453 | } 454 | } 455 | } 456 | } // end mainLayout 457 | } 458 | } 459 | 460 | Component.onCompleted: { 461 | window.showMaximized() 462 | } 463 | } 464 | -------------------------------------------------------------------------------- /qmldir: -------------------------------------------------------------------------------- 1 | ### qmldir --- 2 | ## 3 | ## Author: obeezzy 4 | ## Created: Thu Oct 8 1:00:46 2015 (+0100) 5 | ## Version: 6 | ## Last-Updated: 7 | ## By: 8 | ## Update #: 45 9 | ###################################################################### 10 | ## 11 | ### Change Log: 12 | ## 13 | ###################################################################### 14 | 15 | module FlatUI 16 | 17 | FlatConstants 1.0 FlatConstants.qml 18 | FlatRadioButton 1.0 FlatRadioButton.qml 19 | FlatSlider 1.0 FlatSlider.qml 20 | FlatNavButton 1.0 FlatNavButton.qml 21 | FlatImage 1.0 FlatImage.qml 22 | FlatIconNavBar 1.0 FlatIconNavBar.qml 23 | FlatIconButton 1.0 FlatIconButton.qml 24 | FlatNumberNavBar 1.0 FlatNumberNavBar.qml 25 | FlatButton 1.0 FlatButton.qml 26 | FlatNumberNavButton 1.0 FlatNumberNavButton.qml 27 | FlatPillNavBar 1.0 FlatPillNavBar.qml 28 | FlatTopNavBar 1.0 FlatTopNavBar.qml 29 | FlatCheckBox 1.0 FlatCheckBox.qml 30 | FlatSwitch 1.0 FlatSwitch.qml 31 | FlatBoxSwitch 1.0 FlatBoxSwitch.qml 32 | FlatPrimaryButton 1.0 FlatPrimaryButton.qml 33 | FlatWarningButton 1.0 FlatWarningButton.qml 34 | FlatDefaultButton 1.0 FlatDefaultButton.qml 35 | FlatDangerButton 1.0 FlatDangerButton.qml 36 | FlatSuccessButton 1.0 FlatSuccessButton.qml 37 | FlatInverseButton 1.0 FlatInverseButton.qml 38 | FlatInfoButton 1.0 FlatInfoButton.qml 39 | FlatDropdown 1.0 FlatDropdown.qml 40 | HorizontalScrollBar 1.0 HorizontalScrollBar.qml 41 | VerticalScrollBar 1.0 VerticalScrollBar.qml 42 | FlatSelect 1.0 FlatSelect.qml 43 | FlatNavDropdown 1.0 FlatNavDropdown.qml 44 | FlatProgressBar 1.0 FlatProgressBar.qml 45 | FlatProgressCircle 1.0 FlatProgressCircle.qml 46 | FlatInput 1.0 FlatInput.qml 47 | FlatIconInput 1.0 FlatIconInput.qml 48 | FlatSearchInput 1.0 FlatSearchInput.qml 49 | FlatSidebar 1.0 FlatSidebar.qml 50 | Tooltip 1.0 Tooltip.qml 51 | -------------------------------------------------------------------------------- /screenshots/screenshot_bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/screenshots/screenshot_bottom.jpg -------------------------------------------------------------------------------- /screenshots/screenshot_middle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/screenshots/screenshot_middle.jpg -------------------------------------------------------------------------------- /screenshots/screenshot_top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obeezzy/FlatUI/68a45214961fd984a616691419fceb567441419c/screenshots/screenshot_top.jpg --------------------------------------------------------------------------------