mirror of
https://github.com/OrchardCMS/Orchard.git
synced 2025-10-15 19:54:57 +08:00
Added keyboard shortcut reference to layout editor.
This commit is contained in:
Daniel Stolt
@@ -1,5 +1,4 @@
|
||||
(function ($) {
|
||||
|
||||
var LayoutDesignerHost = function (element) {
|
||||
var self = this;
|
||||
this.element = element;
|
||||
@@ -125,5 +124,16 @@
|
||||
|
||||
$(function () {
|
||||
var host = new LayoutDesignerHost($(".layout-designer"));
|
||||
$(".layout-designer").each(function (e) {
|
||||
var designer = $(this);
|
||||
var dialog = designer.find(".layout-editor-help-dialog");
|
||||
designer.find(".layout-editor-help-link").click(function (e) {
|
||||
dialog.dialog({
|
||||
modal: true,
|
||||
width: 840
|
||||
});
|
||||
e.preventDefault();
|
||||
});
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,5 +1,20 @@
|
||||
@import "Variables.less";
|
||||
|
||||
.layout-editor-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
|
||||
.layout-editor-toolbar-group {
|
||||
display: flex;
|
||||
|
||||
> li + li {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-editor {
|
||||
display: flex;
|
||||
margin-top: 1em;
|
||||
@@ -26,3 +41,53 @@
|
||||
background: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-editor-help-dialog {
|
||||
display: none;
|
||||
|
||||
.help-row {
|
||||
&:before, &:after {
|
||||
content: " "; // 1
|
||||
display: table; // 2
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
> .help-column-full, > .help-column-half {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
> .help-column-half {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
&:nth-child(2n) {
|
||||
padding-right: 10px;
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
+ .help-row {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 4px;
|
||||
background-color: #f3f4f5;
|
||||
padding: 2px 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
table > tbody > tr > td:first-child {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,13 +9,14 @@
|
||||
// Ideally the MediaLibrary is refactored such that each media item type provides its own set of styles, enabling extensibility of the set of media item types.
|
||||
// In turn we could get rid of this cross-module reference.
|
||||
Style.Include("~/Modules/Orchard.MediaLibrary/Styles/media-library-picker-admin.css");
|
||||
|
||||
|
||||
Script.Require("jQueryCookie");
|
||||
Script.Require("jQueryUI_Draggable");
|
||||
Script.Require("jQueryUI_Droppable");
|
||||
Script.Require("jQueryUI_Sortable");
|
||||
Script.Require("jQueryUI_Resizable");
|
||||
Script.Require("jQueryUI_Position");
|
||||
Script.Require("jQueryUI_Dialog");
|
||||
Script.Require("TinyMce");
|
||||
Script.Require("Layouts.LayoutEditor");
|
||||
Script.Include("jquery.deserialize.js");
|
||||
@@ -35,11 +36,11 @@
|
||||
angular
|
||||
.module("LayoutEditor")
|
||||
.constant("environment", {
|
||||
templateUrl: function(templateName) {
|
||||
templateUrl: function (templateName) {
|
||||
return "@Url.Action("Get", "Template", new { area = "Orchard.Layouts" })" + "/" + templateName;
|
||||
}
|
||||
});
|
||||
(function() {
|
||||
});
|
||||
(function () {
|
||||
var editorConfig = JSON.parse(LayoutEditor.decode("@Html.Raw(Url.Encode(Model.ConfigurationData))"));
|
||||
var editorCanvasData = JSON.parse(LayoutEditor.decode("@Html.Raw(Url.Encode(Model.Data))"));
|
||||
|
||||
@@ -52,44 +53,171 @@
|
||||
var contentType = Model.Content != null ? Model.Content.ContentItem.ContentType : default(string);
|
||||
}
|
||||
|
||||
<div class="layout-designer"
|
||||
data-modelstate-valid="@ViewData.ModelState.IsValid.ToString().ToLower()"
|
||||
data-display-type="Design"
|
||||
data-edit-url="@Url.Action("Edit", "Element", new { session = Model.SessionKey, contentId = contentId, contentType = contentType, area = "Orchard.Layouts" })"
|
||||
data-add-url="@Url.Action("Add", "Element", new {session = Model.SessionKey, contentId = contentId, contentType = contentType, area = "Orchard.Layouts"})"
|
||||
data-add-direct-url="@Url.Action("CreateDirect", "Element", new { contentId = contentId, contentType = contentType, area = "Orchard.Layouts" })"
|
||||
data-apply-template-url="@Url.Action("ApplyTemplate", "Layout", new { contentId = contentId, contentType = contentType, area = "Orchard.Layouts" })"
|
||||
data-confirm-delete-prompt="@T("Are you sure you want to delete this element?")"
|
||||
data-editor-dialog-title-format="@T("$1 Properties")"
|
||||
data-editor-dialog-name="Layout"
|
||||
data-anti-forgery-token="@Html.AntiForgeryTokenValueOrchard()"
|
||||
data-session-key="@Model.SessionKey">
|
||||
<fieldset>
|
||||
<div class="layout-designer"
|
||||
data-modelstate-valid="@ViewData.ModelState.IsValid.ToString().ToLower()"
|
||||
data-display-type="Design"
|
||||
data-edit-url="@Url.Action("Edit", "Element", new { session = Model.SessionKey, contentId = contentId, contentType = contentType, area = "Orchard.Layouts" })"
|
||||
data-add-url="@Url.Action("Add", "Element", new {session = Model.SessionKey, contentId = contentId, contentType = contentType, area = "Orchard.Layouts"})"
|
||||
data-add-direct-url="@Url.Action("CreateDirect", "Element", new { contentId = contentId, contentType = contentType, area = "Orchard.Layouts" })"
|
||||
data-apply-template-url="@Url.Action("ApplyTemplate", "Layout", new { contentId = contentId, contentType = contentType, area = "Orchard.Layouts" })"
|
||||
data-confirm-delete-prompt="@T("Are you sure you want to delete this element?")"
|
||||
data-editor-dialog-title-format="@T("$1 Properties")"
|
||||
data-editor-dialog-name="Layout"
|
||||
data-anti-forgery-token="@Html.AntiForgeryTokenValueOrchard()"
|
||||
data-session-key="@Model.SessionKey">
|
||||
|
||||
@Html.HiddenFor(m => m.SessionKey)
|
||||
@Html.HiddenFor(m => m.Data, new { @class = "layout-data-field" })
|
||||
<fieldset>
|
||||
<label>@T("Layout")</label>
|
||||
<div class="group canvas-toolbar">
|
||||
<div class="pull-right">
|
||||
<ol class="group">
|
||||
@if (Model.Templates.Any()) {
|
||||
var options = Model.Templates.Select(x => new SelectListItem { Text = Html.ItemDisplayText(x).ToString(), Value = x.Id.ToString(CultureInfo.InvariantCulture), Selected = x.Id == Model.TemplateId });
|
||||
<li>
|
||||
<div class="template-picker">
|
||||
<label>
|
||||
@T("Use existing layout:")
|
||||
@Html.DropDownListFor(x => x.TemplateId, options, T("(None)").Text)
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
</div>
|
||||
@Html.HiddenFor(m => m.SessionKey)
|
||||
@Html.HiddenFor(m => m.Data, new { @class = "layout-data-field" })
|
||||
<div class="layout-editor-toolbar">
|
||||
<ol class="layout-editor-toolbar-group">
|
||||
<li>
|
||||
<label>@T("Layout")</label>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="layout-editor-toolbar-group">
|
||||
<li>
|
||||
<a class="layout-editor-help-link" href="#"><i class="fa fa-info-circle"></i> Clipboard, keyboard shortcuts, etc.</a>
|
||||
</li>
|
||||
@if (Model.Templates.Any()) {
|
||||
var options = Model.Templates.Select(x => new SelectListItem { Text = Html.ItemDisplayText(x).ToString(), Value = x.Id.ToString(CultureInfo.InvariantCulture), Selected = x.Id == Model.TemplateId });
|
||||
<li>
|
||||
<div class="template-picker">
|
||||
<label>
|
||||
@T("Use existing layout:")
|
||||
@Html.DropDownListFor(x => x.TemplateId, options, T("(None)").Text)
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
</div>
|
||||
<div class="layout-editor-holder">
|
||||
<orc-layout-editor model="window.layoutEditor" ng-app="LayoutEditor" />
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="trash"></div>
|
||||
@Display.DialogTemplate(Name: "Layout")
|
||||
</div>
|
||||
@*<div class="trash"></div>*@
|
||||
@Display.DialogTemplate(Name: "Layout")
|
||||
<div class="layout-editor-help-dialog" title="Layout editor help">
|
||||
<div class="help-row">
|
||||
<h3>Clipboard</h3>
|
||||
<div class="help-column-full">
|
||||
<p>Elements (including containers) can be cut, copied and pasted using the standard clipboard shortcuts (<code>Ctrl+X</code> / <code>Ctrl+C</code> / <code>Ctrl-V</code> on Windows, <code>⌘+X</code> / <code>⌘+C</code> / <code>⌘+V</code> on Mac OS).</p>
|
||||
<p>On browsers that support native clipboard events, clipboard operations can be performed across different layout editor instances, in different tabs or browser windows. Text content can also be pasted into other applications.</p>
|
||||
<p>On other browsers, clipboard operations work only within the same layout editor instance.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-row">
|
||||
<h3>Keyboard shortcuts</h3>
|
||||
<div class="help-column-half">
|
||||
<h4>Resizing columns</h4>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>Alt+Left</code></td>
|
||||
<td>Moves the left edge of the focused column left</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Alt+Right</code></td>
|
||||
<td>Moves the left edge of the focused column right</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Shift+Left</code></td>
|
||||
<td>Moves the right edge of the focused column left</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Shift+Right</code></td>
|
||||
<td>Moves the right edge of the focused column right</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>The <code>Alt</code> and <code>Shift</code> keys can also be combined to move both edges simultaneously.</p>
|
||||
</div>
|
||||
<div class="help-column-half">
|
||||
<h4>Focus</h4>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>Up</code></td>
|
||||
<td>Moves focus to the previous element (above)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Down</code></td>
|
||||
<td>Moves focus to the next element (below)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Left</code></td>
|
||||
<td>Moves focus to the previous column (to the left)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Right</code></td>
|
||||
<td>Moves focus to the next column (to the right)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Alt+Up</code></td>
|
||||
<td>Moves focus to the parent element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Alt+Down</code></td>
|
||||
<td>Moves focus to the first child element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="help-column-half">
|
||||
<h4>Editing</h4>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>Enter</code></td>
|
||||
<td>Opens the content editor of the focused element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Space</code></td>
|
||||
<td>Opens the properties popup of the focused element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Esc</code></td>
|
||||
<td>Closes the properties popup of the focused element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Del</code></td>
|
||||
<td>Deletes the focused element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="help-column-half">
|
||||
<h4>Moving</h4>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>Ctrl+Up</code></td>
|
||||
<td>Moves (reorders) the focused element up</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Ctrl+Down</code></td>
|
||||
<td>Moves (reorders) the focused element down</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Ctrl+Left</code></td>
|
||||
<td>Moves (reorders) the focused column left</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Ctrl+Right</code></td>
|
||||
<td>Moves (reorders) the focused column right</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-row">
|
||||
<h3>Drag and drop</h3>
|
||||
<section class="help-column-full">
|
||||
<p>Drag any existing element to reorder within its parent.</p>
|
||||
<p>Drag a new element from the toolbox and drop it within a compatible container.</p>
|
||||
<p>Drag the left and right edges of a focused column to resize the column. By default any adjacent column will be attached and resized accordingly; holding down the <code>Alt</code> key while resizing unattaches from the adjacent column and instead modifies the offset between.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@@ -15,8 +15,8 @@
|
||||
/* Component containers
|
||||
----------------------------------*/
|
||||
.ui-widget {
|
||||
font-family: Verdana,Arial,sans-serif;
|
||||
font-size: 1.1em;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
.ui-widget .ui-widget {
|
||||
font-size: 1em;
|
||||
@@ -25,7 +25,7 @@
|
||||
.ui-widget select,
|
||||
.ui-widget textarea,
|
||||
.ui-widget button {
|
||||
font-family: Verdana,Arial,sans-serif;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui-widget-content {
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user