Untabified module manifests according to #6072.

This commit is contained in:
Daniel Stolt
2016-01-22 20:46:45 +01:00
parent abaef1d765
commit 80a9cc73b8
19 changed files with 115 additions and 221 deletions

View File

@@ -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>

View File

@@ -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>