Merge pull request #919 from umbraco/temp-U4-4641
Fixes: U4-4641 Feature Request: template and code editors should have insert Section, Define section buttons
This commit is contained in:
Claus
@@ -133,7 +133,7 @@ h5{
|
||||
.umb-control-group label.control-label {
|
||||
text-align: left
|
||||
}
|
||||
.umb-control-group label .help-block,
|
||||
.umb-control-group label .help-block,
|
||||
.umb-control-group label small {
|
||||
font-size: 11px;
|
||||
color: #a0a0a0;
|
||||
@@ -194,7 +194,7 @@ h5{
|
||||
|
||||
.umb-dashboard-control a{text-decoration: underline;}
|
||||
|
||||
.umb-dashboard-control
|
||||
.umb-dashboard-control
|
||||
iframe{ position: absolute; display: block; width: 99%; height: 99%; overflow: auto !important;}
|
||||
|
||||
|
||||
@@ -239,16 +239,16 @@ table thead a {
|
||||
|
||||
.umb-table tbody.ui-sortable tr.ui-sortable-helper {
|
||||
background-color: @sortableHelperBg;
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
.umb-table tbody.ui-sortable tr.ui-sortable-helper td
|
||||
.umb-table tbody.ui-sortable tr.ui-sortable-helper td
|
||||
{
|
||||
border:none;
|
||||
}
|
||||
|
||||
.umb-table tbody.ui-sortable tr.ui-sortable-placeholder {
|
||||
background-color: @sortablePlaceholderBg;
|
||||
border:none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.umb-table tbody.ui-sortable tr.ui-sortable-placeholder td
|
||||
@@ -368,7 +368,7 @@ table thead a {
|
||||
background: @inputBorder;
|
||||
height: 1px;
|
||||
margin: 20px 0 0 0;
|
||||
width: 82%;
|
||||
width: 82%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@@ -437,7 +437,7 @@ table thead a {
|
||||
color:@green;
|
||||
}
|
||||
|
||||
// Loading Animation
|
||||
// Loading Animation
|
||||
// ------------------------
|
||||
|
||||
.umb-loader{
|
||||
@@ -523,11 +523,67 @@ height:1px;
|
||||
}
|
||||
|
||||
.umb-loader-wrapper {
|
||||
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: 10px 0;
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Helpers
|
||||
|
||||
.strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
// Input label styles
|
||||
// @Simon: not sure where to put this part yet
|
||||
// --- TODO Needs to be divided into the right .less directories
|
||||
|
||||
|
||||
// Titles for input fields
|
||||
.input-label--title {
|
||||
font-weight: bold;
|
||||
color: @black;
|
||||
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
|
||||
// Used for input checkmark fields
|
||||
.input-label--small {
|
||||
display: inline;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: fade(@black, 70);
|
||||
|
||||
&:hover {
|
||||
color: @black;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + .input-label--small {
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
|
||||
// Use this for headers in the panels
|
||||
.panel-dialog--header {
|
||||
border-bottom: 1px solid @gray;
|
||||
|
||||
margin: 10px 0;
|
||||
padding-bottom: 10px;
|
||||
|
||||
font-size: @fontSizeLarge;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
angular.module("umbraco").controller('Umbraco.Dialogs.Template.SnippetController',
|
||||
function($scope) {
|
||||
$scope.type = $scope.dialogOptions.type;
|
||||
$scope.section = {
|
||||
name: "",
|
||||
required: false
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
<form novalidate name="contentForm"
|
||||
ng-controller="Umbraco.Dialogs.Template.SnippetController"
|
||||
ng-submit="close()"
|
||||
val-form-manager>
|
||||
<div class="umb-panel">
|
||||
|
||||
<div class="umb-panel-header">
|
||||
<div class="panel-dialog--header" style="border-bottom: 1px solid whitesmoke">Configure the section</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-panel-body with-footer umb-querybuilder">
|
||||
<label>
|
||||
<div class="input-label--title">
|
||||
Section name:
|
||||
</div>
|
||||
<input type="text" ng-model="section.name"/>
|
||||
</label>
|
||||
<label ng-show="type === 'rendersection'">
|
||||
<input style="margin: 0;" type="checkbox" ng-checked="section.required" ng-model="section.required"/>
|
||||
<div class="input-label--small">
|
||||
<localize key="general_required">Required</localize>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="umb-panel-footer">
|
||||
<div class="umb-el-wrap umb-panel-buttons">
|
||||
<div class="btn-toolbar umb-btn-toolbar pull-right">
|
||||
<a href ng-click="close()" class="btn btn-link">
|
||||
<localize key="general_close">Close</localize>
|
||||
</a>
|
||||
<a href ng-click="submit(section)" class="btn btn-primary">Insert</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
BIN
src/Umbraco.Web.UI/Umbraco/Images/editor/renderbody.gif
Normal file
BIN
src/Umbraco.Web.UI/Umbraco/Images/editor/renderbody.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -248,29 +248,33 @@ namespace Umbraco.Web.UI.Umbraco.Settings.Views
|
||||
/// </summary>
|
||||
private void InitializeEditorForTemplate()
|
||||
{
|
||||
|
||||
//TODO: implement content placeholders, etc... just like we had in v5
|
||||
|
||||
//Panel1.Menu.InsertSplitter();
|
||||
//TODO: implement content placeholders, etc... just like we had in v5
|
||||
|
||||
//MenuIconI umbContainer = Panel1.Menu.NewIcon();
|
||||
//umbContainer.ImageURL = UmbracoPath + "/images/editor/masterpagePlaceHolder.gif";
|
||||
//umbContainer.AltText = ui.Text("template", "insertContentAreaPlaceHolder");
|
||||
//umbContainer.OnClickCommand =
|
||||
// ClientTools.Scripts.OpenModalWindow(
|
||||
// IOHelper.ResolveUrl(SystemDirectories.Umbraco) +
|
||||
// "/dialogs/insertMasterpagePlaceholder.aspx?&id=" + _template.Id,
|
||||
// ui.Text("template", "insertContentAreaPlaceHolder"), 470, 320);
|
||||
editorSource.Menu.InsertSplitter();
|
||||
|
||||
//MenuIconI umbContent = Panel1.Menu.NewIcon();
|
||||
//umbContent.ImageURL = UmbracoPath + "/images/editor/masterpageContent.gif";
|
||||
//umbContent.AltText = ui.Text("template", "insertContentArea");
|
||||
//umbContent.OnClickCommand =
|
||||
// ClientTools.Scripts.OpenModalWindow(
|
||||
// IOHelper.ResolveUrl(SystemDirectories.Umbraco) + "/dialogs/insertMasterpageContent.aspx?id=" +
|
||||
// _template.Id, ui.Text("template", "insertContentArea"), 470, 300);
|
||||
|
||||
}
|
||||
MenuIconI umbRenderBody = editorSource.Menu.NewIcon();
|
||||
umbRenderBody.ImageURL = UmbracoPath + "/images/editor/renderbody.gif";
|
||||
//umbContainer.AltText = ui.Text("template", "insertContentAreaPlaceHolder");
|
||||
umbRenderBody.AltText = "Insert @RenderBody()";
|
||||
|
||||
}
|
||||
umbRenderBody.OnClickCommand = "editViewEditor.insertRenderBody()";
|
||||
|
||||
MenuIconI umbSection = editorSource.Menu.NewIcon();
|
||||
umbSection.ImageURL = UmbracoPath + "/images/editor/masterpagePlaceHolder.gif";
|
||||
//umbContainer.AltText = ui.Text("template", "insertContentAreaPlaceHolder");
|
||||
umbSection.AltText = "Insert Section";
|
||||
|
||||
umbSection.OnClickCommand = "editViewEditor.openSnippetModal('section')";
|
||||
|
||||
MenuIconI umbRenderSection = editorSource.Menu.NewIcon();
|
||||
umbRenderSection.ImageURL = UmbracoPath + "/images/editor/masterpageContent.gif";
|
||||
//umbContainer.AltText = ui.Text("template", "insertContentAreaPlaceHolder");
|
||||
umbRenderSection.AltText = "Insert @RenderSection";
|
||||
|
||||
umbRenderSection.OnClickCommand = "editViewEditor.openSnippetModal('rendersection')";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -36,6 +36,10 @@
|
||||
|
||||
UmbEditor.Insert("@Umbraco.RenderMacro(\"" + alias + "\")", "", this._opts.codeEditorElementId);
|
||||
},
|
||||
|
||||
insertRenderBody: function() {
|
||||
UmbEditor.Insert("@RenderBody()", "", this._opts.codeEditorElementId);
|
||||
},
|
||||
|
||||
openMacroModal: function (alias) {
|
||||
/// <summary>callback used to display the modal dialog to insert a macro with parameters</summary>
|
||||
@@ -54,6 +58,37 @@
|
||||
});
|
||||
},
|
||||
|
||||
openSnippetModal: function (type) {
|
||||
/// <summary>callback used to display the modal dialog to insert a macro with parameters</summary>
|
||||
|
||||
var self = this;
|
||||
|
||||
UmbClientMgr.openAngularModalWindow({
|
||||
template: "views/common/dialogs/template/snippet.html",
|
||||
callback: function (data) {
|
||||
|
||||
var code = "";
|
||||
|
||||
if (type === 'section') {
|
||||
code = "\n@section " + data.name + "{\n";
|
||||
code += "<!-- Content here -->\n" +
|
||||
"}\n";
|
||||
}
|
||||
|
||||
if (type === 'rendersection') {
|
||||
if (data.required) {
|
||||
code = "\n@RenderSection(\"" + data.name + "\", true);\n";
|
||||
} else {
|
||||
code = "\n@RenderSection(\"" + data.name + "\" false);\n";
|
||||
}
|
||||
}
|
||||
|
||||
UmbEditor.Insert(code, '', self._opts.codeEditorElementId);
|
||||
},
|
||||
type: type
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
openQueryModal: function () {
|
||||
/// <summary>callback used to display the modal dialog to insert a macro with parameters</summary>
|
||||
|
||||
Reference in New Issue
Block a user