diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index 74010962f3..b0e6c8f5c3 100644 --- a/src/Umbraco.Web.UI.Client/src/less/main.less +++ b/src/Umbraco.Web.UI.Client/src/less/main.less @@ -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; +} diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/snippet.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/snippet.controller.js new file mode 100644 index 0000000000..17e593ff86 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/snippet.controller.js @@ -0,0 +1,8 @@ +angular.module("umbraco").controller('Umbraco.Dialogs.Template.SnippetController', + function($scope) { + $scope.type = $scope.dialogOptions.type; + $scope.section = { + name: "", + required: false + }; + }); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/snippet.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/snippet.html new file mode 100644 index 0000000000..7b5187303e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/snippet.html @@ -0,0 +1,37 @@ +
+
+ +
+
Configure the section
+
+ + + + +
+
diff --git a/src/Umbraco.Web.UI/Umbraco/Images/editor/renderbody.gif b/src/Umbraco.Web.UI/Umbraco/Images/editor/renderbody.gif new file mode 100644 index 0000000000..1a84493fe9 Binary files /dev/null and b/src/Umbraco.Web.UI/Umbraco/Images/editor/renderbody.gif differ diff --git a/src/Umbraco.Web.UI/umbraco/settings/views/EditView.aspx.cs b/src/Umbraco.Web.UI/umbraco/settings/views/EditView.aspx.cs index cd739711fb..c08e4ba48c 100644 --- a/src/Umbraco.Web.UI/umbraco/settings/views/EditView.aspx.cs +++ b/src/Umbraco.Web.UI/umbraco/settings/views/EditView.aspx.cs @@ -248,29 +248,33 @@ namespace Umbraco.Web.UI.Umbraco.Settings.Views /// 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')"; + + } + + } } \ No newline at end of file diff --git a/src/Umbraco.Web.UI/umbraco_client/Editors/EditView.js b/src/Umbraco.Web.UI/umbraco_client/Editors/EditView.js index 00fda4db21..509de8ed28 100644 --- a/src/Umbraco.Web.UI/umbraco_client/Editors/EditView.js +++ b/src/Umbraco.Web.UI/umbraco_client/Editors/EditView.js @@ -36,6 +36,10 @@ UmbEditor.Insert("@Umbraco.RenderMacro(\"" + alias + "\")", "", this._opts.codeEditorElementId); }, + + insertRenderBody: function() { + UmbEditor.Insert("@RenderBody()", "", this._opts.codeEditorElementId); + }, openMacroModal: function (alias) { /// callback used to display the modal dialog to insert a macro with parameters @@ -54,6 +58,37 @@ }); }, + openSnippetModal: function (type) { + /// callback used to display the modal dialog to insert a macro with parameters + + 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 += "\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 () { /// callback used to display the modal dialog to insert a macro with parameters