Make all layout values configurable #9

oversword · 2022-06-07T03:00:13Z

Related to #7

This PR makes all layout values, such as the offset, spacing, and padding configurable via the config. Most of the arbitrary values have been removed, and instead the size and shape of the interface elements are calculated from config values.

This has been tested and should be a pixel perfect to the original, however the power page hasn't been tested.

Arbitrary numbers reduced, and better math implemented
Padding, spacing, skew & offset configs added for each button group
New SizeScheme file added to hold new config logic
Skew changed to be a gradient instead of a distance

EricKotato · 2022-06-07T13:50:58Z

Looks interesting. I'll test it when I have time. Also a documentation should be written.

I'll list the tasks for myself:

Test changes
Fix bugs if needed
Wiki documentation
README documentation (Layer 1, linking to other layers in wiki)

oversword · 2022-06-08T20:21:22Z

Documenting the new config options now

oversword · 2022-06-08T21:57:33Z

@RadRussianRus here is a full doc for all the new options, not sure how to add this to the wiki

Area Widths

user_area_width - set the width of the user page container area
power_area_width - set the width of the power page container area

Offset

Slice Offsets
- offset_slices - set the vertical and horizontal offset simultaneously for all groups of buttons (or "slices")
- Page Selection Options Offset
  - offset_slices_top - set the vertical and horizontal offset simultaneously for the group of slices at the top of the page
  - offset_horizontal_slices_top - set the horizontal offset for the group of slices at the top of the page
  - offset_vertical_slices_top - set the vertical offset for the group of slices at the top of the page
- Date and Time Display Offset
  - offset_slices_bottom_right - set the vertical and horizontal offset simultaneously for the group of slices at the bottom-right of the page
  - offset_horizontal_slices_bottom_right - set the horizontal offset for the group of slices at the bottom-right of the page
  - offset_vertical_slices_bottom_right - set the vertical offset for the group of slices at the bottom-right of the page
- Keyboard Status Display Offset
  - offset_slices_bottom_left - set the vertical and horizontal offset simultaneously for the group of slices at the bottom-left of the page
  - offset_horizontal_slices_bottom_left - set the horizontal offset for the group of slices at the bottom-left of the page
  - offset_vertical_slices_bottom_left - set the vertical offset for the group of slices at the bottom-left of the page
- Login Buttons Offset
  - offset_slices_login_buttons - set the vertical and horizontal offset simultaneously for the login buttons
  - offset_horizontal_slices_login_buttons - set the horizontal offset for the login buttons
  - offset_vertical_slices_login_buttons - set the vertical offset for the login buttons
User List Item Username Offset
- offset_sub_head_item_user - set the vertical offset for the lowercase username of other users
- offset_lower_case_item_user - set the vertical offset for the lowercase username of the main user

Spacing

Slice Spacing
- spacing_slices - set the spacing between all slices simultaneously
- spacing_slices_top - set the spacing between the group of slices at the top of the page
- spacing_slices_bottom_right - set the spacing between the group of slices at the bottom-right of the page
- spacing_slices_bottom_left - set the spacing between the group of slices at the bottom-left of the page
- spacing_slices_login_buttons - set the spacing between the login buttons
List Item Spacing
- spacing_item - set the spacing between all types of list item simultaneously
- spacing_item_power - set the spacing between power list items
- spacing_item_user - set the spacing between user list items

Skew

skew_slices - set the skew of all slices simultaneously
skew_slices_top - set the skew of the group of slices at the top of the page
skew_slices_bottom_left - set the skew of the group of slices at the bottom-left of the page
skew_slices_bottom_right - set the skew of the group of slices at the bottom-right of the page
skew_slices_login_buttons - set the skew of login buttons

Image Padding

image_padding - set the image padding for all images simultaneously
image_padding_item_power - set the image padding for the power list item image
image_padding_item_user - set the image padding for the user list item image

Slices Padding

padding_slices - set the horizontal and vertical internal padding of all slices simultaneously
padding_horizontal_slices - set the left and right internal padding of all slices simultaneously
padding_left_slices - set the left internal padding of all slices simultaneously
padding_right_slices - set the right internal padding of all slices simultaneously
padding_vertical_slices - set the top and bottom internal padding of all slices simultaneously
padding_top_slices - set the top internal padding of all slices simultaneously
padding_bottom_slices - set the bottom internal padding of all slices simultaneously
Page Selection Options Padding
- padding_slices_top - set the horizontal and vertical internal padding of all slices in the button group at the top of the page simultaneously
- padding_horizontal_slices_top - set the left and right internal padding of all slices in the button group at the top of the page simultaneously
- padding_left_slices_top - set the left internal padding of all slices in the button group at the top of the page
- padding_right_slices_top - set the right internal padding of all slices in the button group at the top of the page
- padding_vertical_slices_top - set the top and bottom internal padding of all slices in the button group at the top of the page simultaneously
- padding_top_slices_top - set the top internal padding of all slices in the button group at the top of the page
- padding_bottom_slices_top - set the bottom internal padding of all slices in the button group at the top of the page
Date and Time Display Padding
- padding_slices_bottom_right - set the horizontal and vertical internal padding of all slices in the button group at the bottom-right of the page simultaneously
- padding_horizontal_slices_bottom_right - set the left and right internal padding of all slices in the button group at the bottom-right of the page simultaneously
- padding_left_slices_bottom_right - set the left internal padding of all slices in the button group at the bottom-right of the page
- padding_right_slices_bottom_right - set the right internal padding of all slices in the button group at the bottom-right of the page
- padding_vertical_slices_bottom_right - set the top and bottom internal padding of all slices in the button group at the bottom-right of the page simultaneously
- padding_top_slices_bottom_right - set the top internal padding of all slices in the button group at the bottom-right of the page
- padding_bottom_slices_bottom_right - set the bottom internal padding of all slices in the button group at the bottom-right of the page
Keyboard Status Display Padding
- padding_slices_bottom_left - set the horizontal and vertical internal padding of all slices in the button group at the bottom-left of the page simultaneously
- padding_horizontal_slices_bottom_left - set the left and right internal padding of all slices in the button group at the bottom-left of the page simultaneously
- padding_left_slices_bottom_left - set the left internal padding of all slices in the button group at the bottom-left of the page
- padding_right_slices_bottom_left - set the right internal padding of all slices in the button group at the bottom-left of the page
- padding_vertical_slices_bottom_left - set the top and bottom internal padding of all slices in the button group at the bottom-left of the page simultaneously
- padding_top_slices_bottom_left - set the top internal padding of all slices in the button group at the bottom-left of the page simultaneously
- padding_bottom_slices_bottom_left - set the bottom internal padding of all slices in the button group at the bottom-left of the page simultaneously
Login Buttons Padding
- padding_slices_login_buttons - set the horizontal and vertical internal padding of the login buttons simultaneously
- padding_horizontal_slices_login_buttons - set the left and right internal padding of the login buttons simultaneously
- padding_left_slices_login_buttons - set the left internal padding of the login buttons
- padding_right_slices_login_buttons - set the right internal padding of the login buttons
- padding_vertical_slices_login_buttons - set the top and bottom internal padding of the login buttons simultaneously
- padding_top_slices_login_buttons - set the top internal padding of the login buttons
- padding_bottom_slices_login_buttons - set the bottom internal padding of the login buttons

User List Item Padding

padding_item - set the horizontal and vertical internal padding of all types of list item simultaneously
padding_horizontal_item - set the left and right internal padding of all types of list item simultaneously
padding_left_item - set the left internal padding of all types of list item simultaneously
padding_right_item - set the right internal padding of all types of list item simultaneously
padding_vertical_item - set the top and bottom internal padding of all types of list item simultaneously
padding_top_item - set the top internal padding of all types of list item simultaneously
padding_bottom_item - set the bottom internal padding of all types of list item simultaneously
Power List Item Padding
- padding_item_power - set the horizontal and vertical internal padding of power list items simultaneously
- padding_horizontal_item_power - set the left and right internal padding of power list items simultaneously
- padding_left_item_power - set the left internal padding of power list items
- padding_right_item_power - set the right internal padding of power list items
- padding_vertical_item_power - set the top and bottom internal padding of power list items simultaneously
- padding_top_item_power - set the top internal padding of power list items
- padding_bottom_item_power - set the bottom internal padding of power list items
Session List Item Padding
- padding_item_session - set the horizontal and vertical internal padding of session list items simultaneously
- padding_horizontal_item_session - set the left and right internal padding of session list items simultaneously
- padding_left_item_session - set the left internal padding of session list items
- padding_right_item_session - set the right internal padding of session list items
- padding_vertical_item_session - set the top and bottom internal padding of session list items simultaneously
- padding_top_item_session - set the top internal padding of session list items
- padding_bottom_item_session - set the bottom internal padding of session list items
User List Item Padding
- padding_item_user - set the horizontal and vertical internal padding of user list items simultaneously
- padding_horizontal_item_user - set the left and right internal padding of user list items simultaneously
- padding_left_item_user - set the left internal padding of user list items
- padding_right_item_user - set the right internal padding of user list items
- padding_vertical_item_user - set the top and bottom internal padding of user list items simultaneously
- padding_top_item_user - set the top internal padding of user list items
- padding_bottom_item_user - set the bottom internal padding of user list items

CODE:


#### Area Widths
* `user_area_width` - set the width of the user page container area
* `power_area_width` - set the width of the power page container area

#### Offset
* Slice Offsets
	* `offset_slices` - set the vertical and horizontal offset simultaneously for all groups of buttons (or "slices")
	* Page Selection Options Offset
		* `offset_slices_top` - set the vertical and horizontal offset simultaneously for the group of slices at the top of the page
		* `offset_horizontal_slices_top` - set the horizontal offset for the group of slices at the top of the page
		* `offset_vertical_slices_top` - set the vertical offset for the group of slices at the top of the page
	* Date and Time Display Offset
		* `offset_slices_bottom_right` - set the vertical and horizontal offset simultaneously for the group of slices at the bottom-right of the page
		* `offset_horizontal_slices_bottom_right` - set the horizontal offset for the group of slices at the bottom-right of the page
		* `offset_vertical_slices_bottom_right` - set the vertical offset for the group of slices at the bottom-right of the page
	* Keyboard Status Display Offset
		* `offset_slices_bottom_left` - set the vertical and horizontal offset simultaneously for the group of slices at the bottom-left of the page
		* `offset_horizontal_slices_bottom_left` - set the horizontal offset for the group of slices at the bottom-left of the page
		* `offset_vertical_slices_bottom_left` - set the vertical offset for the group of slices at the bottom-left of the page
	* Login Buttons Offset
		* `offset_slices_login_buttons` - set the vertical and horizontal offset simultaneously for the login buttons
		* `offset_horizontal_slices_login_buttons` - set the horizontal offset for the login buttons
		* `offset_vertical_slices_login_buttons` - set the vertical offset for the login buttons
* User List Item Username Offset
	* `offset_sub_head_item_user` - set the vertical offset for the lowercase username of other users
	* `offset_lower_case_item_user` - set the vertical offset for the lowercase username of the main user

#### Spacing
* Slice Spacing
	* `spacing_slices` - set the spacing between all slices simultaneously
	* `spacing_slices_top` - set the spacing between the group of slices at the top of the page
	* `spacing_slices_bottom_right` - set the spacing between the group of slices at the bottom-right of the page
	* `spacing_slices_bottom_left` - set the spacing between the group of slices at the bottom-left of the page
	* `spacing_slices_login_buttons` - set the spacing between the login buttons
* List Item Spacing
	* `spacing_item` - set the spacing between all types of list item simultaneously
	* `spacing_item_power` - set the spacing between power list items
	* `spacing_item_user` - set the spacing between user list items

#### Skew
* `skew_slices` - set the skew of all slices simultaneously
* `skew_slices_top` - set the skew of the group of slices at the top of the page
* `skew_slices_bottom_left` - set the skew of the group of slices at the bottom-left of the page
* `skew_slices_bottom_right` - set the skew of the group of slices at the bottom-right of the page
* `skew_slices_login_buttons` - set the skew of login buttons

#### Image Padding
* `image_padding` - set the image padding for all images simultaneously
* `image_padding_item_power` - set the image padding for the power list item image
* `image_padding_item_user` - set the image padding for the user list item image

#### Slices Padding
* `padding_slices` - set the horizontal and vertical internal padding of all slices simultaneously
* `padding_horizontal_slices` - set the left and right internal padding of all slices simultaneously
* `padding_left_slices` - set the left internal padding of all slices simultaneously
* `padding_right_slices` - set the right internal padding of all slices simultaneously
* `padding_vertical_slices` - set the top and bottom internal padding of all slices simultaneously
* `padding_top_slices` - set the top internal padding of all slices simultaneously
* `padding_bottom_slices` - set the bottom internal padding of all slices simultaneously
* Page Selection Options Padding
	* `padding_slices_top` - set the horizontal and vertical internal padding of all slices in the button group at the top of the page simultaneously
	* `padding_horizontal_slices_top` - set the left and right internal padding of all slices in the button group at the top of the page simultaneously
	* `padding_left_slices_top` - set the left internal padding of all slices in the button group at the top of the page
	* `padding_right_slices_top` - set the right internal padding of all slices in the button group at the top of the page
	* `padding_vertical_slices_top` - set the top and bottom internal padding of all slices in the button group at the top of the page simultaneously
	* `padding_top_slices_top` - set the top internal padding of all slices in the button group at the top of the page
	* `padding_bottom_slices_top` - set the bottom internal padding of all slices in the button group at the top of the page
* Date and Time Display Padding
	* `padding_slices_bottom_right` - set the horizontal and vertical internal padding of all slices in the button group at the bottom-right of the page simultaneously
	* `padding_horizontal_slices_bottom_right` - set the left and right internal padding of all slices in the button group at the bottom-right of the page simultaneously
	* `padding_left_slices_bottom_right` - set the left internal padding of all slices in the button group at the bottom-right of the page
	* `padding_right_slices_bottom_right` - set the right internal padding of all slices in the button group at the bottom-right of the page
	* `padding_vertical_slices_bottom_right` - set the top and bottom internal padding of all slices in the button group at the bottom-right of the page simultaneously
	* `padding_top_slices_bottom_right` - set the top internal padding of all slices in the button group at the bottom-right of the page
	* `padding_bottom_slices_bottom_right` - set the bottom internal padding of all slices in the button group at the bottom-right of the page
* Keyboard Status Display Padding
	* `padding_slices_bottom_left` - set the horizontal and vertical internal padding of all slices in the button group at the bottom-left of the page simultaneously
	* `padding_horizontal_slices_bottom_left` - set the left and right internal padding of all slices in the button group at the bottom-left of the page simultaneously
	* `padding_left_slices_bottom_left` - set the left internal padding of all slices in the button group at the bottom-left of the page
	* `padding_right_slices_bottom_left` - set the right internal padding of all slices in the button group at the bottom-left of the page
	* `padding_vertical_slices_bottom_left` - set the top and bottom internal padding of all slices in the button group at the bottom-left of the page simultaneously
	* `padding_top_slices_bottom_left` - set the top internal padding of all slices in the button group at the bottom-left of the page simultaneously
	* `padding_bottom_slices_bottom_left` - set the bottom internal padding of all slices in the button group at the bottom-left of the page simultaneously
* Login Buttons Padding
	* `padding_slices_login_buttons` - set the horizontal and vertical internal padding of the login buttons simultaneously
	* `padding_horizontal_slices_login_buttons` - set the left and right internal padding of the login buttons simultaneously
	* `padding_left_slices_login_buttons` - set the left internal padding of the login buttons
	* `padding_right_slices_login_buttons` - set the right internal padding of the login buttons
	* `padding_vertical_slices_login_buttons` - set the top and bottom internal padding of the login buttons simultaneously
	* `padding_top_slices_login_buttons` - set the top internal padding of the login buttons
	* `padding_bottom_slices_login_buttons` - set the bottom internal padding of the login buttons

#### User List Item Padding
* `padding_item` - set the horizontal and vertical internal padding of all types of list item simultaneously
* `padding_horizontal_item` - set the left and right internal padding of all types of list item simultaneously
* `padding_left_item` - set the left internal padding of all types of list item simultaneously
* `padding_right_item` - set the right internal padding of all types of list item simultaneously
* `padding_vertical_item` - set the top and bottom internal padding of all types of list item simultaneously
* `padding_top_item` - set the top internal padding of all types of list item simultaneously
* `padding_bottom_item` - set the bottom internal padding of all types of list item simultaneously
* Power List Item Padding
	* `padding_item_power` - set the horizontal and vertical internal padding of power list items simultaneously
	* `padding_horizontal_item_power` - set the left and right internal padding of power list items simultaneously
	* `padding_left_item_power` - set the left internal padding of power list items
	* `padding_right_item_power` - set the right internal padding of power list items
	* `padding_vertical_item_power` - set the top and bottom internal padding of power list items simultaneously
	* `padding_top_item_power` - set the top internal padding of power list items
	* `padding_bottom_item_power` - set the bottom internal padding of power list items
* Session List Item Padding
	* `padding_item_session` - set the horizontal and vertical internal padding of session list items simultaneously
	* `padding_horizontal_item_session` - set the left and right internal padding of session list items simultaneously
	* `padding_left_item_session` - set the left internal padding of session list items
	* `padding_right_item_session` - set the right internal padding of session list items
	* `padding_vertical_item_session` - set the top and bottom internal padding of session list items simultaneously
	* `padding_top_item_session` - set the top internal padding of session list items
	* `padding_bottom_item_session` - set the bottom internal padding of session list items
* User List Item Padding
	* `padding_item_user` - set the horizontal and vertical internal padding of user list items simultaneously
	* `padding_horizontal_item_user` - set the left and right internal padding of user list items simultaneously
	* `padding_left_item_user` - set the left internal padding of user list items
	* `padding_right_item_user` - set the right internal padding of user list items
	* `padding_vertical_item_user` - set the top and bottom internal padding of user list items simultaneously
	* `padding_top_item_user` - set the top internal padding of user list items
	* `padding_bottom_item_user` - set the bottom internal padding of user list items

EricKotato · 2022-06-09T12:14:34Z

Looks like power option backgrounds are missing:

How it should be:

oversword · 2022-06-09T13:26:04Z

Looks like power option backgrounds are missing

Fixing now, I had no way of testing that, I have discovered the debug options now though

oversword · 2022-06-09T13:39:03Z

@RadRussianRus it's fixed but it's not pixel-perfect to the original. It looks fine though, just slight different positioning due to less random + 10 - 2 stuff x)

EricKotato · 2022-06-09T13:52:25Z

Looks good enough.

slice/SizeScheme.qml

* "Layout Scheme" renamed to "Size Scheme" to match internal name * Fixed typos * Added links to PR and wiki with quick description

EricKotato · 2022-06-09T14:32:34Z

I've adapted README to match its other sections.

…ze-scheme

oversword · 2022-06-09T22:47:33Z

FYI: Next step is to make a generic SlicedRectangle and replace all Rectangles (within reason) with SlicedRectangles, allowing similar config for each one. This will make the list items and the main user login panel "slicable", which can look super cool.

oversword · 2022-06-13T08:27:41Z

@RadRussianRus can we push this forward? Really want to keep adding features without having to worry about the merge

EricKotato · 2022-06-13T13:15:10Z

I understand, but currently I'm busy. Don't worry, I'll return to this PR when I have time.

EricKotato · 2023-07-02T09:32:50Z

theme.conf

+padding_vertical_slices=3
+padding_vertical_slices_login_buttons=2
+offset_vertical_slices_login_buttons=2
+offset_horizontal_slices_login_buttons=0
+
+padding_horizontal_item_session=10
+padding_vertical_item_session=5
+
+padding_horizontal_item_power=10
+padding_vertical_item_power=5
+
+padding_top_item_user=0
+padding_bottom_item_user=-4
+padding_horizontal_item_user=10
+image_padding_item_user=4
+offset_sub_head_item_user=-9
+offset_lower_case_item_user=7


theme.conf is only for required settings, however in SizeScheme.qml these settings are on higher levels, which means that they should fall back to Layer 1 values. Defining these values in theme.conf prevents falling back to Layer 1.

There are multiple ways to solve this.

These values can be moved to Layer 1 in SizeScheme.qml. However, global values may be affected not in a good way, so it needs to be checked.

Some new options may be introduced, like additional paddings or multipliers.

These values also can be removed from theme.conf and hardcoded. It may be not a good fit for layout values scheme, but it should work as a temporary solution at least.

EricKotato · 2023-07-02T09:34:06Z

Sorry for long delay, got overloaded too much, but I still intend to get this PR merged.

Make all layout values configurable

f013462

oversword added 2 commits June 8, 2022 22:33

Add Level 1 documentation for new options to readme

896ef4b

Remove unneeded 'set the'

176df39

Defaults documented

08735bb

Fix power item display

d9c4d98

EricKotato reviewed Jun 9, 2022

View reviewed changes

slice/SizeScheme.qml Outdated Show resolved Hide resolved

Fixed README

e26b81f

* "Layout Scheme" renamed to "Size Scheme" to match internal name * Fixed typos * Added links to PR and wiki with quick description

oversword added 2 commits June 9, 2022 23:42

Move Level 0 config into theme.conf

6754529

Merge branch 'size-scheme' of github.com:oversword/sddm-slice into si…

cb3ec19

…ze-scheme

EricKotato reviewed Jul 2, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make all layout values configurable #9

Make all layout values configurable #9

oversword commented Jun 7, 2022 •

edited

EricKotato commented Jun 7, 2022 •

edited

oversword commented Jun 8, 2022

oversword commented Jun 8, 2022 •

edited

EricKotato commented Jun 9, 2022

oversword commented Jun 9, 2022

oversword commented Jun 9, 2022

EricKotato commented Jun 9, 2022

EricKotato commented Jun 9, 2022

oversword commented Jun 9, 2022

oversword commented Jun 13, 2022

EricKotato commented Jun 13, 2022

EricKotato Jul 2, 2023

EricKotato commented Jul 2, 2023

Make all layout values configurable #9

Are you sure you want to change the base?

Make all layout values configurable #9

Conversation

oversword commented Jun 7, 2022 • edited

EricKotato commented Jun 7, 2022 • edited

oversword commented Jun 8, 2022

oversword commented Jun 8, 2022 • edited

Area Widths

Offset

Spacing

Skew

Image Padding

Slices Padding

User List Item Padding

EricKotato commented Jun 9, 2022

oversword commented Jun 9, 2022

oversword commented Jun 9, 2022

EricKotato commented Jun 9, 2022

EricKotato commented Jun 9, 2022

oversword commented Jun 9, 2022

oversword commented Jun 13, 2022

EricKotato commented Jun 13, 2022

EricKotato Jul 2, 2023

Choose a reason for hiding this comment

EricKotato commented Jul 2, 2023

oversword commented Jun 7, 2022 •

edited

EricKotato commented Jun 7, 2022 •

edited

oversword commented Jun 8, 2022 •

edited