meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
section:section-layout-landing [2026/07/24 16:09] – dorepssection:section-layout-landing [2026/07/26 13:19] (current) – doreps
Line 1: Line 1:
 ====== Total Launcher Layout Objects ====== ====== Total Launcher Layout Objects ======
  
-Custom layouts are fundamental building blocks within the Total Launcher ecosystem, providing the primary mechanism for organizing clickable graphic objects, shortcuts, and widgets. Unlike simple free-form object placement, applying a specialized Layout Object automatically imposes a set of alignment and spacing rules on the content it contains. This guide explains the shared design fundamentals applicable to all layout types, followed by specific guides for unique list (linear), circle (radial), and grid (matrix) configurations.+Custom layouts are fundamental building blocks within the Total Launcher ecosystem, providing the primary mechanism for organizing clickable graphic objects, shortcuts, and widgets. Unlike simple free-form object placement, applying a specialized Layout Object automatically imposes a set of alignment and spacing rules on the content it contains. This guide explains the: 
 +  * **Adding a layout** to the page 
 +  * **Shared design fundamentals** applicable to all layout types 
 +  * **Unique layouts** specific guides: 
 +    * **List (linear)** 
 +    * **Circle (radial)** 
 +    * **Grid (matrix)** 
 + 
 +===== Adding A Layout To The Page ===== 
 +A list layout (linear) is added to a page and modified in the following process: 
 +  - Enter [[:section:section-basic_editing#to_enter_edit_mode|Edit Mode]]. Tap the ++''Edit Off'' icon|{{:ui:ui-icon_edit_mode-edit_off-v4.webp?direct&100}}++ in the lower right to change it to an ++''Edit On'' icon|{{:ui:ui-icon_edit_mode-edit_on-v4.webp?direct&35}}++ 
 +    - Tap-hold the list object to select it. 
 +    - In the ++Object Design Menu (top)|{{:ui:ui-icon_object_design_menu_top-v4.webp?direct&150}}++ select the ++Option icon|{{ :ui:ui-icon_option-25-v4.webp}}++. 
 +  - Review the menu panels indicated at the bottom of the interface. 
 +    - Select ''OPTIONS'' to modify its options. 
 +    - Select ''ANIMATION'' to adjust the dynamic behaviors. 
 +  - Apply the desired variable changes within the respective menus.
  
 ===== Understanding Layout Properties ===== ===== Understanding Layout Properties =====
Line 10: Line 26:
  
 Each layout configuration dialog includes the following four tabs for uniform object styling: Each layout configuration dialog includes the following four tabs for uniform object styling:
- 
-   *  **Icon:** Controls visual attributes of contained image graphics. Note that this often adjusts the internal space surrounding the icons (Icon padding), global visibility (opacity and saturation), and applies color overlays uniformly to create cohesive themes. 
 <WRAP hscroll_box> <WRAP hscroll_box>
-<WRAP center> 
-{{:ui:ui-layout-icon-v4.webp?direct&200}} 
-</WRAP> 
 <WRAP> <WRAP>
-==== Options - Icon ====+=== Icon === 
 +Controls visual attributes of contained image graphics. Note that this often adjusts the internal space surrounding the icons (Icon padding), global visibility (opacity and saturation), and applies color overlays uniformly to create cohesive themes. 
 +<WRAP> 
 +=== Options - Icon ===
 Modify the visual attributes of the icon images contained within the grid. Modify the visual attributes of the icon images contained within the grid.
   * **Icon size:** - Adjust the overall size (scale) of the icons.   * **Icon size:** - Adjust the overall size (scale) of the icons.
Line 24: Line 38:
   * **Icon saturation (%):** - Modify the color intensity, where ''100%'' represents natural colors and reduced values approach grayscale.   * **Icon saturation (%):** - Modify the color intensity, where ''100%'' represents natural colors and reduced values approach grayscale.
   * **Icon color filter:** - Apply a specific color overlay or tint to all icons uniformly.   * **Icon color filter:** - Apply a specific color overlay or tint to all icons uniformly.
 +</WRAP>
 +<WRAP>
 +{{:ui:ui-layout-icon-v4.webp?direct&200}}
 </WRAP> </WRAP>
 </WRAP> </WRAP>
-   *  **Label:** Dictates the typography for text descriptions associated with contained items. This encompasses typeface selection, vertical wrapping (Label lines), sizing, scaling, and the transition of color when an object is pressed or interacted with.  
 <WRAP hscroll_box> <WRAP hscroll_box>
 <WRAP> <WRAP>
-{{:ui:ui-layout-label-v4.webp?direct&200}} +=== Label === 
-</WRAP> +Dictates the typography for text descriptions associated with contained items. This encompasses typeface selection, vertical wrapping (Label lines), sizing, scaling, and the transition of color when an object is pressed or interacted with.  
-<WRAP> +=== Options - Label ===
-==== Options - Label ====+
 Control the display parameters and typography of the text associated with each grid item. Control the display parameters and typography of the text associated with each grid item.
   * **Show label:** - Toggle the visibility state of the text labels to On or Off.   * **Show label:** - Toggle the visibility state of the text labels to On or Off.
Line 42: Line 57:
   * **Text color (pressed):** - Same as ''Text color'' above, but changes the text color as the object is 'pressed' or tapped.   * **Text color (pressed):** - Same as ''Text color'' above, but changes the text color as the object is 'pressed' or tapped.
 </WRAP> </WRAP>
-</WRAP> 
-   *  **Shadow:** Provides dedicated drop shadow controls specifically for item labels. Detailed specifications regarding how to utilize Shadows can be referenced **[[section:section-shadow|here]]**. 
-<WRAP hscroll_box> 
 <WRAP> <WRAP>
-{{:ui:ui-layout-shadow-v4.webp?direct&200}}+{{:ui:ui-layout-label-v4.webp?direct&200}}
 </WRAP> </WRAP>
 +</WRAP>
 +<WRAP hscroll_box>
 <WRAP> <WRAP>
 +=== Shadow ===
 +Provides dedicated drop shadow controls specifically for item labels. Detailed specifications regarding how to utilize Shadows can be referenced **[[section:section-shadow|here]]**.
 === Options - Shadow === === Options - Shadow ===
 Apply drop shadows to text labels for enhanced contrast against varied backgrounds. See [[:section:section-shadow|here]] for more detail on how to use Shadows. Apply drop shadows to text labels for enhanced contrast against varied backgrounds. See [[:section:section-shadow|here]] for more detail on how to use Shadows.
Line 56: Line 72:
   * **Shadow offset Y:** - Shift the shadow position along the vertical axis.   * **Shadow offset Y:** - Shift the shadow position along the vertical axis.
 </WRAP> </WRAP>
 +<WRAP>
 +{{:ui:ui-layout-shadow-v4.webp?direct&200}}
 </WRAP> </WRAP>
-   *  **Background:** Configures the styling of the overall layout container and the individual background states (resting, pressed, focused) for items contained within. Standard **margins** and **item spacing** properties are also defined within this section. 
-<WRAP hscroll_box> 
-<WRAP > 
-{{:ui:ui-layout-background-v4.webp?direct&200}} 
 </WRAP> </WRAP>
 +<WRAP hscroll_box>
 <WRAP> <WRAP>
 +=== Background ===
 +Configures the styling of the overall layout container and the individual background states (resting, pressed, focused) for items contained within. Standard **margins** and **item spacing** properties are also defined within this section.
 === Options - Background === === Options - Background ===
 Configure the container styling, individual item backgrounds, and spacing options. Configure the container styling, individual item backgrounds, and spacing options.
Line 71: Line 88:
   * **Item background (focused):** - Set the background visual for individual grid items when navigated to via hardware controls or focus states.   * **Item background (focused):** - Set the background visual for individual grid items when navigated to via hardware controls or focus states.
   * **Item spacing:** - Adjust the internal gap distance between individual items placed within the grid structure.   * **Item spacing:** - Adjust the internal gap distance between individual items placed within the grid structure.
 +</WRAP>
 +<WRAP>
 +{{:ui:ui-layout-background-v4.webp?direct&200}}
 </WRAP> </WRAP>
 </WRAP> </WRAP>
Line 81: Line 101:
  
 Select a layout type to review its dedicated unique options: Select a layout type to review its dedicated unique options:
-<WRAP hscroll_box> 
 <WRAP> <WRAP>
 [[:section:section-layout-list|{{:ui:ui-layout-list-v4.webp?direct&150}}]]\\ ➡️[[:section:section-layout-list|List Layout]] - (Linear) [[:section:section-layout-list|{{:ui:ui-layout-list-v4.webp?direct&150}}]]\\ ➡️[[:section:section-layout-list|List Layout]] - (Linear)
Line 90: Line 109:
 <WRAP> <WRAP>
 [[:section:section-layout-circle|{{:ui:ui-layout-circle-v4.webp?direct&150}}]]\\ ➡️[[:section:section-layout-circle|Circle Layout]] - (Radial) [[:section:section-layout-circle|{{:ui:ui-layout-circle-v4.webp?direct&150}}]]\\ ➡️[[:section:section-layout-circle|Circle Layout]] - (Radial)
-</WRAP> 
 </WRAP> </WRAP>