mirror of
https://github.com/OrchardCMS/Orchard.git
synced 2025-10-14 10:54:50 +08:00
Untabified module manifests according to #6072.
This commit is contained in:
@@ -1,105 +0,0 @@
|
|||||||
|
|
||||||
STATES:
|
|
||||||
|
|
||||||
The following classes are used:
|
|
||||||
* layout-canvas: the root canvas that hosts layout elements
|
|
||||||
* layout-container: an element that can contain other elements, such as the canvas, grid, row and column
|
|
||||||
* layout-child-wrapper: a div used to wrap each one of a containers children
|
|
||||||
* layout-element: a layout element
|
|
||||||
* layout-grid: a layout grid element; can contain rows
|
|
||||||
* layout-row: a layout row element; can contain columns
|
|
||||||
* layout-column: a layout column element; can contain any other element
|
|
||||||
* layout-column-span-*: denotes the width of a column element
|
|
||||||
* layout-panel: a docked UI panel for interacting with an element (invoking its actions)
|
|
||||||
* layout-panel-item: an item on a UI panel; can be one of the following:
|
|
||||||
- layout-panel-action: an icon button for invoking an element action such as edit, delete or split; only shown when an element is focused
|
|
||||||
- layout-panel-label: a label for showing the type of an element (such as "row" or "column"); only shown when an element is active or focused
|
|
||||||
* layout-popup: a floating UI popup for interacting with an element (invoking its actions)
|
|
||||||
* layout-popup-item: an item on a UI popup; can be one of the following:
|
|
||||||
- layout-popup-action: a button for invoking a choice
|
|
||||||
- layout-popup-label: a static label
|
|
||||||
|
|
||||||
Elements have four states:
|
|
||||||
* Default: none of the other states apply
|
|
||||||
* Active: the user hovers over the element; represented by the layout-element-active class
|
|
||||||
* Selected: either the element itself or one of its descendant elements is focused; represented by the layout-element-selected class
|
|
||||||
* Focused: the user has clicked on the element and it can now be edited; represented by the layout-element-focused class
|
|
||||||
|
|
||||||
When an element becomes focused, all other elements automatically become unfocused.
|
|
||||||
Selected elements can never be active, i.e. hovering over them has no additional effect.
|
|
||||||
|
|
||||||
|
|
||||||
MANIPULATION MY HANDLE:
|
|
||||||
|
|
||||||
You can always drag an edge.
|
|
||||||
Right edge to increase/decrease width.
|
|
||||||
Left edge to increase/decrease offset AND width.
|
|
||||||
Visually and "mechanically" intuitive.
|
|
||||||
|
|
||||||
If there is an adjacent neighbor on the side being dragged:
|
|
||||||
The near edge of the neigbor column follows.
|
|
||||||
Neighbor gets inversely manipulated.
|
|
||||||
Movement is limited by MIN width of both columns.
|
|
||||||
|
|
||||||
If there is no adjacent neighbor on the side being dragged:
|
|
||||||
Movement is limited by MIN width of current column AND available space beside it.
|
|
||||||
Two operations required to a) fill the gap to nearest neighbor and b) grow even further shrinking the nearest neighbor.
|
|
||||||
|
|
||||||
MANIPULATION BY BUTTONS:
|
|
||||||
|
|
||||||
Grow and shrink cannot be done - no buttons for that.
|
|
||||||
|
|
||||||
Split:
|
|
||||||
Always even parts when possible (divisible by two).
|
|
||||||
Otherwise left part is bigger by one.
|
|
||||||
|
|
||||||
Offset increase:
|
|
||||||
Move if space is available to the right.
|
|
||||||
Otherwise move AND shrink.
|
|
||||||
|
|
||||||
Offset decrease:
|
|
||||||
Only if space is available to the left.
|
|
||||||
The corresponding offset is added on the next column to the right (movement appears "independent" of other columns in the row).
|
|
||||||
|
|
||||||
Move left/right (reorder).
|
|
||||||
|
|
||||||
KEYBOARD SHORTCUTS:
|
|
||||||
|
|
||||||
DEL deletes the element.
|
|
||||||
SPACE invokes properties popup.
|
|
||||||
ENTER invokes edit element button (content elements only).
|
|
||||||
INS invokes the add button (containers only).
|
|
||||||
ALT+DOWN focuses first child (containers only).
|
|
||||||
ALT+UP focuses parent.
|
|
||||||
- For columns:
|
|
||||||
SHIFT+LEFT/RIGHT contracts/expands column using the right edge.
|
|
||||||
ALT+LEFT/RIGHT expands/contracts column using the left edge.
|
|
||||||
NOTE:
|
|
||||||
- SHIFT+ALT can be combined to simultaneously manipulate both edges (i.e. "moving" the column within the row).
|
|
||||||
- By default when resizing columns any immediately adjacent columns will follow along (and be inversely resized).
|
|
||||||
- CTRL can be added to NOT inversely manipulate the mirroring edge of an immediately adjacent column. CTRL can also be added while mouse dragging a column edge for the same purpose.
|
|
||||||
- For children in horizontal containers:
|
|
||||||
- LEFT/RIGHT moves focus to next/previous sibling (no wrap-around)
|
|
||||||
- CTRL+LEFT/RIGHT reorders the item among siblings
|
|
||||||
- For children in vertical containers:
|
|
||||||
- UP/DOWN moves focus to next/previous sibling (no wrap-around)
|
|
||||||
- CTRL+UP/DOWN reorders the item among siblings
|
|
||||||
(No keyboard shortcut for splitting columns)
|
|
||||||
|
|
||||||
OTHER THOUGHTS:
|
|
||||||
|
|
||||||
Adding a new row should show dropdown for number of columns (only evenly divisible numbers).
|
|
||||||
Adding a new element to a container should show dropdown for selectable element types (not a dialog).
|
|
||||||
|
|
||||||
BUTTONS:
|
|
||||||
|
|
||||||
Edit <i class="fa fa-edit"></i>
|
|
||||||
Delete <i class="fa fa-remove"></i>
|
|
||||||
Move up <i class="fa fa-chevron-up"></i>
|
|
||||||
Move down <i class="fa fa-chevron-down"></i>
|
|
||||||
Move left <i class="fa fa-chevron-left"></i>
|
|
||||||
Move right <i class="fa fa-chevron-right"></i>
|
|
||||||
Split <i class="fa fa-pause"></i>
|
|
||||||
Increase offset <i class="fa fa-indent"></i>
|
|
||||||
Decrease offset <i class="fa fa-outdent"></i>
|
|
||||||
|
|
@@ -168,7 +168,6 @@
|
|||||||
<Content Include="Styles\admin-dialog.css" />
|
<Content Include="Styles\admin-dialog.css" />
|
||||||
<Content Include="Styles\split-arrow-down.png" />
|
<Content Include="Styles\split-arrow-down.png" />
|
||||||
<Content Include="Styles\split-arrow-up.png" />
|
<Content Include="Styles\split-arrow-up.png" />
|
||||||
<Content Include="Notes.txt" />
|
|
||||||
<Content Include="Views\BlueprintAdmin\Edit.cshtml">
|
<Content Include="Views\BlueprintAdmin\Edit.cshtml">
|
||||||
<SubType>Code</SubType>
|
<SubType>Code</SubType>
|
||||||
</Content>
|
</Content>
|
||||||
|
Reference in New Issue
Block a user