mirror of
https://github.com/OrchardCMS/Orchard.git
synced 2025-10-14 02:44:52 +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\split-arrow-down.png" />
|
||||
<Content Include="Styles\split-arrow-up.png" />
|
||||
<Content Include="Notes.txt" />
|
||||
<Content Include="Views\BlueprintAdmin\Edit.cshtml">
|
||||
<SubType>Code</SubType>
|
||||
</Content>
|
||||
|
Reference in New Issue
Block a user