swcs/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic editor + macro dialog implemented

Browse Source
This commit is contained in:
Per Ploug
2016-06-12 18:48:46 +02:00
parent 7dfc288f93
commit ebd2bf149c
11 changed files with 286 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/bower.json
+2 -1
View File
@@ -27,6 +27,7 @@
"tinymce": "~4.1.10",
"codemirror": "~5.3.0",
"angular-local-storage": "~0.2.3",
"moment": "~2.10.3"
"moment": "~2.10.3",
"ace-builds": "^1.2.3"
}
}
src/Umbraco.Web.UI.Client/lib/ace-razor-mode/theme/razor_chrome.css
+161
View File
@@ -0,0 +1,161 @@
.ace-chrome .ace_gutter {
background: white !important;
color: #ccc !important;
overflow : hidden;
}
.ace-chrome .ace_print-margin {
}
.ace-chrome {
background-color: #FFFFFF;
color: black;
}
.ace-chrome .ace_cursor {
color: black;
}
.ace-chrome .ace_invisible {
color: rgb(191, 191, 191);
}
.ace-chrome .ace_constant.ace_buildin {
color: rgb(88, 72, 246);
}
.ace-chrome .ace_constant.ace_language {
color: rgb(88, 92, 246);
}
.ace-chrome .ace_constant.ace_library {
color: rgb(6, 150, 14);
}
.ace-chrome .ace_invalid {
background-color: rgb(153, 0, 0);
color: white;
}
.ace_punctuation.ace_short.ace_razor{
background: yellow;
}
.ace-chrome .ace_fold {
}
.ace-chrome .ace_support.ace_function {
color: rgb(60, 76, 114);
}
.ace-chrome .ace_support.ace_constant {
color: rgb(6, 150, 14);
}
.ace-chrome .ace_support.ace_type,
.ace-chrome .ace_support.ace_class
.ace-chrome .ace_support.ace_other {
color: rgb(109, 121, 222);
}
.ace-chrome .ace_variable.ace_parameter {
font-style:italic;
color:#FD971F;
}
.ace-chrome .ace_keyword.ace_operator {
color: rgb(104, 118, 135);
}
.ace-chrome .ace_comment {
color: #236e24;
}
.ace-chrome .ace_comment.ace_doc {
color: #236e24;
}
.ace-chrome .ace_comment.ace_doc.ace_tag {
color: #236e24;
}
.ace-chrome .ace_constant.ace_numeric {
color: rgb(0, 0, 205);
}
.ace-chrome .ace_variable {
color: rgb(49, 132, 149);
}
.ace-chrome .ace_xml-pe {
color: rgb(104, 104, 91);
}
.ace-chrome .ace_entity.ace_name.ace_function {
color: #0000A2;
}
.ace-chrome .ace_heading {
color: rgb(12, 7, 255);
}
.ace-chrome .ace_list {
color:rgb(185, 6, 144);
}
.ace-chrome .ace_marker-layer .ace_selection {
background: rgb(181, 213, 255);
}
.ace-chrome .ace_marker-layer .ace_step {
background: rgb(252, 255, 0);
}
.ace-chrome .ace_marker-layer .ace_stack {
background: rgb(164, 229, 101);
}
.ace-chrome .ace_marker-layer .ace_bracket {
margin: -1px 0 0 -1px;
border: 1px solid rgb(192, 192, 192);
}
.ace-chrome .ace_marker-layer .ace_active-line {
background: rgba(0, 0, 0, 0.07) !important;
}
.ace-chrome .ace_gutter-active-line {
background: rgba(0, 0, 0, 0.07) !important;
}
.ace-chrome .ace_marker-layer .ace_selected-word {
background: rgb(250, 250, 255);
border: 1px solid rgb(200, 200, 250);
}
.ace-chrome .ace_storage,
.ace-chrome .ace_keyword,
.ace-chrome .ace_meta.ace_tag {
color: rgb(147, 15, 128);
}
.ace-chrome .ace_string.ace_regex {
color: rgb(255, 0, 0)
}
.ace-chrome .ace_string {
color: #1A1AA6;
}
.ace-chrome .ace_entity.ace_other.ace_attribute-name {
color: #994409;
}
.ace-chrome .ace_indent-guide {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
}
.ace-chrome .ace_razor {
background: yellow;
}
src/Umbraco.Web.UI.Client/lib/ace/ace-src-min-noconflict.js
-10
View File
File diff suppressed because one or more lines are too long
src/Umbraco.Web.UI.Client/lib/ace/mode-css.js
-1
View File
File diff suppressed because one or more lines are too long
src/Umbraco.Web.UI.Client/lib/ace/mode-javascript.js
-1
View File
File diff suppressed because one or more lines are too long
src/Umbraco.Web.UI.Client/lib/ace/mode-razor.js
-1
View File
File diff suppressed because one or more lines are too long
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="umb-panel-header-content-wrapper">
<div class="umb-panel-header-content" ng-class="{'-top-position': tabs || !icon }">
<div class="umb-panel-header-content" ng-class="{'-top-position': tabs || !icon || !description }">
<div class="umb-panel-header-left-side">
src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
+76 -27
View File
@@ -1,47 +1,96 @@
(function () {
"use strict";
function TemplatesEditController($scope) {
function TemplatesEditController($scope, $routeParams, templateResource, assetsService, notificationsService, editorState, navigationService, appState, macroService) {
var vm = this;
vm.page = {};
vm.page.loading = false;
vm.page.loading = true;
//menu
vm.page.menu = {};
vm.page.menu.currentSection = appState.getSectionState("currentSection");
vm.page.menu.currentNode = null;
vm.mode = "css";
vm.aceOption = {
mode: vm.mode.toLowerCase(),
onLoad: function(ace) {
console.log(ace);
// HACK to have the ace instance in the scope...
/*
$scope.modeChanged = function() {
_ace.getSession().setMode("ace/mode/" + $scope.mode.toLowerCase());
};
*/
}
vm.insert = function(str){
vm.editor.insert(str);
vm.editor.focus();
};
vm.aceModel = ';; Scheme code in here.\n' +
'(define (double x)\n\t(* x x))\n\n\n' +
'<!-- XML code in here. -->\n' +
'<root>\n\t<foo>\n\t</foo>\n\t<bar/>\n</root>\n\n\n' +
'// Javascript code in here.\n' +
'function foo(msg) {\n\tvar r = Math.random();\n\treturn "" + r + " : " + msg;\n}';
vm.save = function(){
vm.page.saveButtonState = "busy";
vm.template.content = vm.editor.getValue();
templateResource.save(vm.template).then(function(saved){
notificationsService.success("Template saved")
vm.page.saveButtonState = "success";
vm.template = saved;
//sync state
editorState.set(vm.template);
navigationService.syncTree({ tree: "templates", path: vm.template.path, forceReload: true }).then(function (syncArgs) {
vm.page.menu.currentNode = syncArgs.node;
});
}, function(err){
notificationsService.error("Template save failed")
vm.page.saveButtonState = "error";
});
};
vm.init = function(){
//we need to load this somewhere, for now its here.
assetsService.loadCss("lib/ace-razor-mode/theme/razor_chrome.css");
templateResource.getById($routeParams.id).then(function(template){
vm.page.loading = false;
vm.template = template;
//sync state
editorState.set(vm.template);
navigationService.syncTree({ tree: "templates", path: vm.template.path, forceReload: true }).then(function (syncArgs) {
vm.page.menu.currentNode = syncArgs.node;
});
vm.aceOption = {
mode: "razor",
theme: "chrome",
onLoad: function(_editor) {
vm.editor = _editor;
}
};
});
};
vm.openPageFieldOverlay = openPageFieldOverlay;
vm.openDictionaryItemOverlay = openDictionaryItemOverlay;
vm.openQueryBuilderOverlay = openQueryBuilderOverlay;
vm.openMacroOverlay = openMacroOverlay;
function init() {
function openMacroOverlay() {
vm.macroPickerOverlay = {
view: "macropicker",
dialogData: {},
show: true,
submit: function(model) {
var macroObject = macroService.collectValueData(model.selectedMacro, model.macroParams, "Mvc");
vm.insert(macroObject.syntax);
vm.macroPickerOverlay.show = false;
vm.macroPickerOverlay = null;
}
};
}
function openPageFieldOverlay() {
vm.pageFieldOverlay = {
view: "mediapicker",
@@ -84,7 +133,7 @@
};
}
init();
vm.init();
}
src/Umbraco.Web.UI.Client/src/views/templates/edit.html
+41 -39
View File
@@ -2,7 +2,11 @@
<umb-load-indicator ng-if="vm.page.loading"></umb-load-indicator>
<form novalidate name="contentTypeForm" val-form-manager>
<form name="contentForm"
ng-submit="vm.save()"
novalidate
val-form-manager>
<umb-editor-view ng-if="!vm.page.loading">
@@ -10,65 +14,63 @@
name="vm.template.name"
alias="vm.template.alias"
hideDescription="true"
hide-icon="true">
description="vm.template.virtualPath"
menu="vm.page.menu"
hide-icon="false">
</umb-editor-header>
<umb-editor-container>
<umb-editor-sub-header>
<div class="btn-group">
<a href ng-click="vm.openMacroOverlay()" class="btn">
<i class="icon-autofill"></i></a>
<a href ng-click="vm.insert('@RenderDictionary()')"class="btn">
<i class="icon-book-alt"></i></a>
<a href ng-click="vm.openMacroOverlay()"class="btn">
<i class="icon-settings-alt"></i></a>
</div>
<umb-editor-sub-header-content-left>
<umb-button
type="button"
button-style="link"
label="Page field"
icon="icon-merge"
action="vm.openPageFieldOverlay()">
</umb-button>
<umb-button
type="button"
button-style="link"
label="Dictionary item"
icon="icon-merge"
action="vm.openDictionaryItemOverlay()">
</umb-button>
<umb-button
type="button"
button-style="link"
label="Query builder"
icon="icon-merge"
action="vm.openQueryBuilderOverlay()">
</umb-button>
</umb-editor-sub-header-content-left>
</umb-editor-sub-header>
<div class="btn-group">
<a href class="btn"><i class="icon-checkbox-empty"></i></a>
<a href class="btn"><i class="icon-checkbox-dotted"></i></a>
</div>
<div
auto-scale="85"
umb-ace-editor="vm.aceOption"
ng-model="vm.aceModel">
ng-model="vm.template.content">
</div>
</umb-editor-container>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-editor-footer-content-right>
<umb-button
type="submit"
button-style="success"
state="vm.page.saveButtonState"
shortcut="ctrl+s"
label="Save"
label-key="buttons_save">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer-content-right>
</umb-editor-footer>
</umb-editor-footer>
</umb-editor-view>
</form>
<umb-overlay
ng-if="vm.macroPickerOverlay.show"
model="vm.macroPickerOverlay"
view="vm.macroPickerOverlay.view"
position="right">
</umb-overlay>
<umb-overlay
ng-if="vm.pageFieldOverlay.show"
src/Umbraco.Web/UI/JavaScript/JsInitialize.js
+2 -4
View File
@@ -16,10 +16,8 @@
'lib/ng-file-upload/ng-file-upload.min.js',
'lib/angular-local-storage/angular-local-storage.min.js',
'lib/ace/ace-src-min-noconflict.js',
'lib/ace/mode-javascript.js',
'lib/ace/mode-razor.js',
'lib/ace/mode-css.js',
"lib/ace-builds/src-min-noconflict/ace.js",
"lib/ace-builds/src-min-noconflict/mode-razor.js",
'lib/bootstrap/js/bootstrap.2.3.2.min.js',
'lib/bootstrap-tabdrop/bootstrap-tabdrop.js',
src/Umbraco.Web/Umbraco.Web.csproj
+3
View File
@@ -319,6 +319,7 @@
<Compile Include="Editors\EditorValidationResolver.cs" />
<Compile Include="Editors\EditorValidator.cs" />
<Compile Include="Editors\GravatarController.cs" />
<Compile Include="Editors\TemplateController.cs" />
<Compile Include="IHttpContextAccessor.cs" />
<Compile Include="Models\ContentEditing\GetAvailableCompositionsFilter.cs" />
<Compile Include="Editors\IEditorValidator.cs" />
@@ -339,9 +340,11 @@
<Compile Include="Models\ContentEditing\PropertyGroupBasic.cs" />
<Compile Include="Models\ContentEditing\PropertyTypeBasic.cs" />
<Compile Include="Models\ContentEditing\SimpleNotificationModel.cs" />
<Compile Include="Models\ContentEditing\TemplateDisplay.cs" />
<Compile Include="Models\Mapping\ContentTypeModelMapperExtensions.cs" />
<Compile Include="Models\Mapping\LockedCompositionsResolver.cs" />
<Compile Include="Models\Mapping\PropertyGroupDisplayResolver.cs" />
<Compile Include="Models\Mapping\TemplateModelMapping.cs" />
<Compile Include="Models\SetPasswordModel.cs" />
<Compile Include="Models\RequestPasswordResetModel.cs" />
<Compile Include="Models\PublishedContentWithKeyBase.cs" />