Skip to content

Changes

Page history
Update design_element_state authored by Pierre Lamot's avatar Pierre Lamot
Show whitespace changes
Inline Side-by-side
design_element_state.md
View page @ d8fed610
...@@ -9,7 +9,7 @@ Different states: ...@@ -9,7 +9,7 @@ Different states:
- active: some buttons acts as as a toggle, which can be activated or de-activated - active: some buttons acts as as a toggle, which can be activated or de-activated
- disabled: the button can't be accessed - disabled: the button can't be accessed
= Grid item # Grid item
| state | light | dark | | state | light | dark |
| ------ |------ | ------ | | ------ |------ | ------ |
...@@ -21,7 +21,7 @@ Different states: ...@@ -21,7 +21,7 @@ Different states:
| selected + hover/focus | ![Screenshot_20210421_165323](uploads/99662f78549dc859792a1fafe181e687/Screenshot_20210421_165323.png) | ![Screenshot_20210421_165531](uploads/e093dbdc0eaf8bbf0f5e164c0c486104/Screenshot_20210421_165531.png) | | selected + hover/focus | ![Screenshot_20210421_165323](uploads/99662f78549dc859792a1fafe181e687/Screenshot_20210421_165323.png) | ![Screenshot_20210421_165531](uploads/e093dbdc0eaf8bbf0f5e164c0c486104/Screenshot_20210421_165531.png) |
= List item # List item
| state | light | dark | | state | light | dark |
...@@ -35,7 +35,7 @@ Different states: ...@@ -35,7 +35,7 @@ Different states:
= Tab bar button # Tab bar button
| state | light | dark | | state | light | dark |
| ------ |------ | ------ | | ------ |------ | ------ |
...@@ -47,7 +47,7 @@ Different states: ...@@ -47,7 +47,7 @@ Different states:
= Playlist # Playlist
| state | dark | light | | state | dark | light |
| ------ |------ | ------ | | ------ |------ | ------ |
...@@ -59,7 +59,7 @@ Different states: ...@@ -59,7 +59,7 @@ Different states:
| selected + hover/focus |![Screenshot_20210421_171727](uploads/7d6def03a6f34846ff765265480c7471/Screenshot_20210421_171727.png) |![Screenshot_20210421_172054](uploads/745ce157e5777768223bbca199d541df/Screenshot_20210421_172054.png) | selected + hover/focus |![Screenshot_20210421_171727](uploads/7d6def03a6f34846ff765265480c7471/Screenshot_20210421_171727.png) |![Screenshot_20210421_172054](uploads/745ce157e5777768223bbca199d541df/Screenshot_20210421_172054.png)
= playlist buttons # playlist buttons
| state | light | dark | | state | light | dark |
| ------ |------ | ------ | | ------ |------ | ------ |
...@@ -70,7 +70,26 @@ Different states: ...@@ -70,7 +70,26 @@ Different states:
| disabled | ![Screenshot_20210421_180455](uploads/f7e8ebdd3aeb9d2bee9a94a96ae9530c/Screenshot_20210421_180455.png) | ![Screenshot_20210421_180657](uploads/8723a3f8957a265f9aa1e0685507746a/Screenshot_20210421_180657.png) | disabled | ![Screenshot_20210421_180455](uploads/f7e8ebdd3aeb9d2bee9a94a96ae9530c/Screenshot_20210421_180455.png) | ![Screenshot_20210421_180657](uploads/8723a3f8957a265f9aa1e0685507746a/Screenshot_20210421_180657.png)
= drop-down # player controler buttons
| state | light | dark |
| ------ |------ | ------ |
| normal (loop) | ![Screenshot_20210421_181848](uploads/e78a004be5dbd3e6a4920d47016cde34/Screenshot_20210421_181848.png) | ![Screenshot_20210421_182238](uploads/af84649e0105ca1651d59417d4249a44/Screenshot_20210421_182238.png)
| hover (loop) | ![Screenshot_20210421_181907](uploads/4618b325a977da7e21522dcdfb50be15/Screenshot_20210421_181907.png) | ![Screenshot_20210421_182306](uploads/15d995154c3cc569a3a4e55157ccbc0f/Screenshot_20210421_182306.png)
| active (loop) | ![Screenshot_20210421_181920](uploads/c5c190849f11b398e9b7155bd65981e7/Screenshot_20210421_181920.png) | ![Screenshot_20210421_182328](uploads/b78780265abdc50480b5f9ffa7574ca0/Screenshot_20210421_182328.png)
| active + hover (loop) | ![Screenshot_20210421_182013](uploads/90459357d244d7a4e0e7b3a64072123d/Screenshot_20210421_182013.png) | ![Screenshot_20210421_182341](uploads/3b6b7d12d55e32589b6d7137124517fa/Screenshot_20210421_182341.png)
| disabled (prev) | ![Screenshot_20210421_182139](uploads/fe14212b3284564069c9323fd6ededef/Screenshot_20210421_182139.png) | ![Screenshot_20210421_182328](uploads/b78780265abdc50480b5f9ffa7574ca0/Screenshot_20210421_182328.png)
# Play button
| state | light | dark |
| ------ |------ | ------ |
| normal | ![Screenshot_20210421_182716](uploads/30733617623faff87d63ba294fdf9756/Screenshot_20210421_182716.png) | ![Screenshot_20210421_182856](uploads/fffe5628f207dad2eb8954dc0a5cdad8/Screenshot_20210421_182856.png)
| hover/focused | ![Screenshot_20210421_182729](uploads/bea53f33d78224dbc37bda126cd74f8c/Screenshot_20210421_182729.png) | ![Screenshot_20210421_182913](uploads/73c800ba50b27d82e50c6056097d5e81/Screenshot_20210421_182913.png)
# drop-down
fewer state possible only active, and hovered/focused: fewer state possible only active, and hovered/focused:
...@@ -79,6 +98,19 @@ light ...@@ -79,6 +98,19 @@ light
dark dark
![Screenshot_20210421_181103](uploads/896afd04d863386c0cab12c9f3d309ce/Screenshot_20210421_181103.png) ![Screenshot_20210421_181103](uploads/896afd04d863386c0cab12c9f3d309ce/Screenshot_20210421_181103.png)
# text entry / search box
| state | light | dark |
| ------ |------ | ------ |
| normal | ![Screenshot_20210421_183201](uploads/5567ff0ee138ad57bad926de965b45a3/Screenshot_20210421_183201.png) | ![Screenshot_20210421_183317](uploads/52f93fe8bc135b9cdf50fcbe10ad736a/Screenshot_20210421_183317.png)
| hover | ![Screenshot_20210421_183241](uploads/af5552cc85381b3dd3f4e9dca28e290e/Screenshot_20210421_183241.png) | ![Screenshot_20210421_183328](uploads/2ba325874813d2f3bc40ab1b13a3ebfa/Screenshot_20210421_183328.png)
| focused | ![Screenshot_20210421_183251](uploads/bc20dde2fdf0165b649481271815c4ab/Screenshot_20210421_183251.png) | ![Screenshot_20210421_183338](uploads/9d28c16f37c212271c61a5ae23f82259/Screenshot_20210421_183338.png)
# track selection menu
| state | light | dark | | state | light | dark |
... ...
......

VideoLAN code repository instance