mirror of

Reusable Status QML components

Go to file

Pascal Precht 0a8517e8a4 chore(README): add table of components		2021-06-29 11:55:41 +02:00
sandbox	fix(StatusChatListItem): ensure chat name elides when it's too long	2021-06-29 09:46:08 +02:00
src	bug(StatusLoadingIndicator): Change Animator to Animation	2021-06-29 09:46:23 +02:00
.gitignore	fix: Add missing .qml to resources, add qmlcache to gitignore	2021-06-29 09:47:47 +02:00
README.md	chore(README): add table of components	2021-06-29 11:55:41 +02:00
statusq.qrc	fix: Add missing .qml to resources, add qmlcache to gitignore	2021-06-29 09:47:47 +02:00

README.md

StatusQ

An emerging reusable QML UI component library for Status applications.

Usage

StatusQ introduces a module namespace that semantically groups components so they can be easily imported. These modules are:

Provided components can be viewed and tested in the sandbox application that comes with this repository. Other than that, modules and components can be used as expected.

Example:

import Status.Core 0.1
import Status.Controls 0.1

StatusInput {
  ...
}

Viewing and testing components

To make viewing and testing components easy, we've added a sandbox application to this repository in which StatusQ components are being build. This is the first place where components see the light of the world and can be run in a proper application environment.

Using Qt Creator

The easiest way to run the sandbox application is to simply open the provided sandbox.pro file using Qt Creator.

Using command line interface

To run the sandbox from within a command line interface, run the following commands:

$ git clone https://github.com/status-im/StatusQ
$ cd StatusQ/sandbox
$ ./scripts/build

Once that is done, the sandbox can be started with the generated executable:

$ ./bin/sandbox

Implementation status

	Issue	Status
StatusQ.Core
`StatusBaseText`	#20	✅
`StatusIcon`	#2	✅
`StatusIconBackgroundSettings`	-	✅
`StatusIconSettings`	-	✅
`StatusImageSettings`	-	✅
`StatusModalHeaderSettings`	-	✅
StatusQ.Core.Theme
`StatusColors`	#3	✅
`StatusDarkTheme`	#3	✅
`StatusLightTheme`	#3	✅
`Theme`	#3	✅
`ThemePalette`	#3	✅
StatusQ.Components
`StatusBadge`	#15	✅
`StatusChatInfoToolBar`	#141	✅
`StatusChatList`	#100	✅
`StatusChatListAndCategories`	#133	✅
`StatusChatListCategory`	#123	✅
`StatusChatListCategoryItem`	#123	✅
`StatusChatListItem`	#65	✅
`StatusChatToolBar`	#80	✅
`StatusContactRequestsIndicatorListItem`	#175	✅
`StatusDescriptionListItem`	#73	✅
`StatusLetterIdenticon`	#28	✅
`StatusListItem`	#19	✅
`StatusListSectionHeadline`	#164	✅
`StatusLoadingIndicator`	#7	✅
`StatusNavigationListItem`	#72	✅
`StatusNavigationPanelHeadline`	#162	✅
`StatusNotification`	#104	🚫
`StatusRoundIcon`	#53	✅
`StatusRoundedImage`	#32	✅
`StatusThemeSelector`	#105	🚫
StatusQ.Controls
`StatusBaseButton`	#6	✅
`StatusBaseInput`	#106	🚧
`StatusButton`	#6	✅
`StatusChatInfoButton`	#79	✅
`StatusChatListCategoryItemButton`	#117	✅
`StatusCheckBox`	#10	✅
`StatusFlatButton`	#6	✅
`StatusFlatRoundButton`	#6	✅
`StatusIconTabButton`	#16	✅
`StatusNavBarTabButton`	#17	✅
`StatusRadioButton`	#11	✅
`StatusRoundButton`	#6	✅
`StatusSlider`	#13	✅
`StatusSwitch`	#12	✅
`StatusToolTip`	#14	✅
`StatusWalletColorButton`	#101	🚫
`StatusWalletColorSelect`	#102	🚫
StatusQ.Layout
`StatusAppLayout`	#77	✅
`StatusAppNavBar`	#18	✅
`StatusAppTwoPanelLayout`	#78	✅
StatusQ.Platform
`StatusMacTrafficLights`	#108	✅
`StatusWindowsToolBar`	#200	🚫
StatusQ.Popups
`StatusMenuItem`	#74	✅
`StatusMenuSeparator`	-	✅
`StatusModal`	#97	✅
`StatusModalDivider`	#97	✅
`StatusPopupMenu`	#96	✅
`StatusTextFormatMenu`	#103	🚫