From c8cb5b26b0e7b592a044c973f81914c2096bc506 Mon Sep 17 00:00:00 2001 From: Jeavon Leopold Date: Thu, 29 Oct 2015 17:14:45 +0000 Subject: [PATCH 01/10] Basic implementation for U4-4641 Feature Request: template and code editors should have insert Section, Define section buttons --- .../dialogs/template/snippet.controller.js | 7 +++ .../common/dialogs/template/snippet.html | 39 +++++++++++++++ .../Umbraco/Images/editor/renderbody.gif | Bin 0 -> 1336 bytes .../umbraco/settings/views/EditView.aspx.cs | 46 ++++++++++-------- .../umbraco_client/Editors/EditView.js | 35 +++++++++++++ 5 files changed, 106 insertions(+), 21 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/snippet.controller.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/snippet.html create mode 100644 src/Umbraco.Web.UI/Umbraco/Images/editor/renderbody.gif 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..dc0f2bead1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/snippet.controller.js @@ -0,0 +1,7 @@ +angular.module("umbraco").controller('Umbraco.Dialogs.Template.SnippetController', + function($scope, $http, dialogService) { + $scope.type = $scope.dialogOptions.type; + $scope.section = {}; + $scope.section.name = ""; + $scope.section.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..1414a7471c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/snippet.html @@ -0,0 +1,39 @@ +
+ + + +
+ +
+

Configure the section

+
+ +
+ + +
+ +
+
+
+ + Close + + + Insert +
+
+
+
+
\ No newline at end of file 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 0000000000000000000000000000000000000000..1a84493fe9d7668b782aee1e352f12970cc4bff2 GIT binary patch literal 1336 zcmZ?wbhEHb6k`x)I3mVy?Ha?)n+&gCGd_F9@c1#qrArL&-Z8&?$?*9z@7=o$4<0al z{K)?2&)+})|Ni)4@axat&tDCG{0jT^E9}possI1~Wnf_V|NlRb#03=pb4U0FD7Yk+ zBm!w0`-+0ZIIg#cFVINM%8)eo$(0erZv1Dp0vH$f^P>=c3falKi5O{QMkPCP( zUIa|kjQ{`r{qy_R&mZ5vef{$J)5j0*-@SeF`qj%9&!0Vg^7zri2lwyYy>t84%^TOR zUA=Po(!~qs&z(JU`qar2$B!L7a`@1}1N-;w-Lrew&K=vgZQZhY)5ZeMTG_VdAT{+S(zE>X{jm6Nr?&Zaj`McQIQehVWA9RT!WL(IBz?v24h5IWK 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..00c5b488e7 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 + "\");\n"; + } + } + + UmbEditor.Insert(code, '', self._opts.codeEditorElementId); + }, + type: type + }); + }, + openQueryModal: function () { /// callback used to display the modal dialog to insert a macro with parameters From 38b13bf6ce41e7312a06f342c8f40d180dc196d1 Mon Sep 17 00:00:00 2001 From: Jeavon Leopold Date: Thu, 29 Oct 2015 17:18:40 +0000 Subject: [PATCH 02/10] Basic implementation for U4-4641 --- src/Umbraco.Web.UI/umbraco_client/Editors/EditView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI/umbraco_client/Editors/EditView.js b/src/Umbraco.Web.UI/umbraco_client/Editors/EditView.js index 00c5b488e7..509de8ed28 100644 --- a/src/Umbraco.Web.UI/umbraco_client/Editors/EditView.js +++ b/src/Umbraco.Web.UI/umbraco_client/Editors/EditView.js @@ -79,7 +79,7 @@ if (data.required) { code = "\n@RenderSection(\"" + data.name + "\", true);\n"; } else { - code = "\n@RenderSection(\"" + data.name + "\");\n"; + code = "\n@RenderSection(\"" + data.name + "\" false);\n"; } } From 6e5329187745524f80749b758ddf5c9ac22ae953 Mon Sep 17 00:00:00 2001 From: Claus Date: Tue, 17 Nov 2015 13:42:00 +0100 Subject: [PATCH 03/10] Fixed up a few things. --- .../dialogs/template/snippet.controller.js | 9 ++-- .../common/dialogs/template/snippet.html | 50 ++++++++----------- 2 files changed, 27 insertions(+), 32 deletions(-) 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 index dc0f2bead1..17e593ff86 100644 --- 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 @@ -1,7 +1,8 @@ angular.module("umbraco").controller('Umbraco.Dialogs.Template.SnippetController', - function($scope, $http, dialogService) { + function($scope) { $scope.type = $scope.dialogOptions.type; - $scope.section = {}; - $scope.section.name = ""; - $scope.section.required = false; + $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 index 1414a7471c..61e740f109 100644 --- 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 @@ -1,39 +1,33 @@
- - +
+

Configure the section

+
-
- -
-

Configure the section

-
- -
+
-
+
-
-
-
- - Close - - +
+
+
+ + Close + Insert -
-
-
-
+
+
+
+
\ No newline at end of file From 9c027dcdbc97a703bee067e33f70eecb29672016 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Thu, 19 Nov 2015 10:32:17 +0100 Subject: [PATCH 04/10] some ui love for the panel dialogs --- src/Umbraco.Web.UI.Client/src/less/main.less | 41 +++++++++++++++---- .../common/dialogs/template/snippet.html | 14 ++++--- 2 files changed, 41 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index 74010962f3..ad07c6835e 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,34 @@ 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--title { + font-weight: bold; + color: @black; + margin-bottom: 3px; +} + +.panel-dialog--header { + font-weight: bold; + border-bottom: 1px solid @gray; + padding-bottom: 10px; +} 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 index 61e740f109..6724a183d6 100644 --- 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 @@ -5,17 +5,21 @@
-

Configure the section

+

Configure the section

@@ -30,4 +34,4 @@
- \ No newline at end of file + From 6e27caa5478381693e830234b6b95139f36c54ca Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Thu, 19 Nov 2015 11:11:09 +0100 Subject: [PATCH 05/10] Added comments and notes --- src/Umbraco.Web.UI.Client/src/less/main.less | 8 +++++++- .../src/views/common/dialogs/template/snippet.html | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index ad07c6835e..4b6388a01a 100644 --- a/src/Umbraco.Web.UI.Client/src/less/main.less +++ b/src/Umbraco.Web.UI.Client/src/less/main.less @@ -543,14 +543,20 @@ height:1px; display: inline; } +//NOTE titles for input fields .input-label--title { font-weight: bold; color: @black; margin-bottom: 3px; } +//NOTE Use this for headers in the panels .panel-dialog--header { - font-weight: bold; border-bottom: 1px solid @gray; + margin: 10px 0; padding-bottom: 10px; + + font-size: 14px * 1.25; //NOTE @font-size-h4 can't be used here for some reason. In all variables regarding font-sizes is a hassle. + font-weight: bold; + line-height: 20px; } 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 index 6724a183d6..ca2b57d618 100644 --- 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 @@ -5,7 +5,7 @@
-

Configure the section

+
Configure the section
From 2634e33f5104c153d495d3382b460d0775ef51c7 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Thu, 19 Nov 2015 11:27:56 +0100 Subject: [PATCH 06/10] Used @fontSizeLarge variable to determine font-size for panel-dialog--header --- src/Umbraco.Web.UI.Client/src/less/main.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index 4b6388a01a..fb6bcbefeb 100644 --- a/src/Umbraco.Web.UI.Client/src/less/main.less +++ b/src/Umbraco.Web.UI.Client/src/less/main.less @@ -555,8 +555,7 @@ height:1px; border-bottom: 1px solid @gray; margin: 10px 0; padding-bottom: 10px; - - font-size: 14px * 1.25; //NOTE @font-size-h4 can't be used here for some reason. In all variables regarding font-sizes is a hassle. + font-size: @fontSizeLarge; font-weight: bold; line-height: 20px; } From 397ef326657c63126ac35ce11a1892e6215e18ac Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Thu, 19 Nov 2015 11:40:29 +0100 Subject: [PATCH 07/10] Added hover & active state to input-label--small --- src/Umbraco.Web.UI.Client/src/less/main.less | 21 +++++++++++++++++-- .../common/dialogs/template/snippet.html | 4 ++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index fb6bcbefeb..2755f74e51 100644 --- a/src/Umbraco.Web.UI.Client/src/less/main.less +++ b/src/Umbraco.Web.UI.Client/src/less/main.less @@ -543,14 +543,31 @@ height:1px; display: inline; } -//NOTE titles for input fields + +//TODO Needs to be moved out in other files +// Titles for input fields .input-label--title { font-weight: bold; color: @black; margin-bottom: 3px; } -//NOTE Use this for headers in the panels +// Used for input checkmark fields +.input-label--small { + display: inline; + font-size: 12px; + color: #b3b3b3; + + &:hover { + color: @black; + } +} +// Checked state of the input-label--small +input:checked + .input-label--small { + color: @blue; +} + +// Use this for headers in the panels .panel-dialog--header { border-bottom: 1px solid @gray; margin: 10px 0; 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 index ca2b57d618..7b5187303e 100644 --- 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 @@ -17,9 +17,9 @@
From 5bf8b8ecba6c719fdd89254d9a74150e80eb8690 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Thu, 19 Nov 2015 11:44:33 +0100 Subject: [PATCH 08/10] Used less function 'fade' instead of random color --- src/Umbraco.Web.UI.Client/src/less/main.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index 2755f74e51..c7411ac9a3 100644 --- a/src/Umbraco.Web.UI.Client/src/less/main.less +++ b/src/Umbraco.Web.UI.Client/src/less/main.less @@ -555,8 +555,10 @@ height:1px; // Used for input checkmark fields .input-label--small { display: inline; + font-size: 12px; - color: #b3b3b3; + color: fade(@black, 70); + font-weight: bold; &:hover { color: @black; From 775a6f80eae2557d1dcff047cb67b07fa30a4395 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Thu, 19 Nov 2015 11:47:49 +0100 Subject: [PATCH 09/10] Added comments to support the changes --- src/Umbraco.Web.UI.Client/src/less/main.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index c7411ac9a3..572afb8f30 100644 --- a/src/Umbraco.Web.UI.Client/src/less/main.less +++ b/src/Umbraco.Web.UI.Client/src/less/main.less @@ -544,7 +544,10 @@ height:1px; } -//TODO Needs to be moved out in other files +// Input label styles +// @Simon: not sure where to put this part yet +// --- TODO Needs to be divided into the right .less files + // Titles for input fields .input-label--title { font-weight: bold; @@ -564,6 +567,7 @@ height:1px; color: @black; } } + // Checked state of the input-label--small input:checked + .input-label--small { color: @blue; From 8053db32b6fc1e781aed4feec6fc0ac449b63a3b Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Thu, 19 Nov 2015 15:40:38 +0100 Subject: [PATCH 10/10] code comments --- src/Umbraco.Web.UI.Client/src/less/main.less | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index 572afb8f30..b0e6c8f5c3 100644 --- a/src/Umbraco.Web.UI.Client/src/less/main.less +++ b/src/Umbraco.Web.UI.Client/src/less/main.less @@ -546,38 +546,43 @@ height:1px; // Input label styles // @Simon: not sure where to put this part yet -// --- TODO Needs to be divided into the right .less files +// --- 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; - color: fade(@black, 70); font-weight: bold; + color: fade(@black, 70); &:hover { color: @black; } } -// Checked state of the input-label--small -input:checked + .input-label--small { +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;