From d004d529b7e8fa22659af7eb9d006fb4131e3b85 Mon Sep 17 00:00:00 2001 From: perploug Date: Fri, 30 Aug 2013 10:17:46 +0200 Subject: [PATCH] New dashboard using angular --- .../directives/resizeToContent.directive.js | 30 +++ .../common/resources/dashboard.resource.js | 22 ++ .../src/common/services/util.service.js | 7 +- src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../src/less/font-awesome.min.less | 2 +- src/Umbraco.Web.UI.Client/src/less/panel.less | 14 +- .../src/less/variables.less | 5 +- src/Umbraco.Web.UI.Client/src/routes.js | 2 +- .../src/views/common/dashboard.controller.js | 12 +- .../src/views/common/dashboard.html | 40 ++-- .../dialogs/contentpicker.controller.js | 4 +- .../dashboard/StartupDashboardIntro.html | 33 +++ .../views/dashboard/StartupDashboardKits.html | 15 ++ .../dashboard/StartupDashboardVideos.html | 15 ++ .../dashboard/dashboard.tabs.controller.js | 20 ++ .../dashboard/settingsdashboardintro.html | 1 + .../mediapicker/mediapicker.html | 10 +- .../App_Plugins/MyPackage/Package.manifest | 5 +- src/Umbraco.Web.UI/Umbraco.Web.UI.csproj | 8 + .../Umbraco/dashboard/UserControlProxy.aspx | 16 ++ .../dashboard/UserControlProxy.aspx.cs | 43 ++++ .../UserControlProxy.aspx.designer.cs | 33 +++ src/Umbraco.Web.UI/config/Dashboard.config | 10 +- .../umbraco/Views/common/dashboard.html | 39 +++- .../Editors/BackOfficeController.cs | 1 + .../Editors/dashboardcontroller.cs | 217 ++++++++++++++++++ .../Models/ContentEditing/Control.cs | 28 +++ src/Umbraco.Web/Umbraco.Web.csproj | 2 + .../umbraco/dashboard.aspx.cs | 7 +- 29 files changed, 591 insertions(+), 51 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/resizeToContent.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/common/resources/dashboard.resource.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardIntro.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardKits.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardVideos.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/dashboard/settingsdashboardintro.html create mode 100644 src/Umbraco.Web.UI/Umbraco/dashboard/UserControlProxy.aspx create mode 100644 src/Umbraco.Web.UI/Umbraco/dashboard/UserControlProxy.aspx.cs create mode 100644 src/Umbraco.Web.UI/Umbraco/dashboard/UserControlProxy.aspx.designer.cs create mode 100644 src/Umbraco.Web/Editors/dashboardcontroller.cs create mode 100644 src/Umbraco.Web/Models/ContentEditing/Control.cs diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/resizeToContent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/resizeToContent.directive.js new file mode 100644 index 0000000000..6f1d8ce237 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/resizeToContent.directive.js @@ -0,0 +1,30 @@ +/** + * @ngdoc directive + * @name umbraco.directives.directive:resizeToContent + * @element div + * @function + * + * @description + * Resize iframe's automatically to fit to the content they contain + * + * @example + + + + + + */ +angular.module("umbraco.directives") + .directive('resizeToContent', function ($window, $timeout) { + return function (scope, el, attrs) { + var iframe = el[0]; + var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; + if (iframeWin.document.body) { + + $timeout(function(){ + var height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; + el.height(height); + }, 2000); + } + }; + }); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/dashboard.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/dashboard.resource.js new file mode 100644 index 0000000000..0eef79c326 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/resources/dashboard.resource.js @@ -0,0 +1,22 @@ +/** + * @ngdoc service + * @name umbraco.resources.dashboardResource + * @description Handles loading the dashboard manifest + **/ +function dashboardResource($q, $http, umbRequestHelper) { + //the factory object returned + return { + getDashboard: function (section) { + + return umbRequestHelper.resourcePromise( + $http.get( + umbRequestHelper.getApiUrl( + "dashboardApiBaseUrl", + "GetDashboard", + [{ section: section }])), + 'Failed to get dashboard ' + section); + } + }; +} + +angular.module('umbraco.resources').factory('dashboardResource', dashboardResource); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js b/src/Umbraco.Web.UI.Client/src/common/services/util.service.js index 59ff8acbb4..0547eb0a40 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/util.service.js @@ -382,7 +382,7 @@ angular.module('umbraco.services').factory('iconHelper', iconHelper); * @description * Used to convert legacy xml data to json and back again */ -function xmlhelper() { +function xmlhelper($http) { /* Copyright 2011 Abdulla Abdurakhmanov Original sources are available at https://code.google.com/p/x2js/ @@ -748,7 +748,10 @@ function xmlhelper() { fromJson: function(json) { var xml = x2js.json2xml_str( json ); return xml; - } + }, + parseFeed: function (url) { + return $http.jsonp('//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=' + encodeURIComponent(url)); + } }; } angular.module('umbraco.services').factory('xmlhelper', xmlhelper); diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index ae1f67aea3..59ea263146 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -44,6 +44,7 @@ @import "../../lib/bootstrap/less/pagination.less"; @import "../../lib/bootstrap/less/pager.less"; + // Components: Popovers @import "../../lib/bootstrap/less/modals.less"; @import "../../lib/bootstrap/less/tooltip.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/font-awesome.min.less b/src/Umbraco.Web.UI.Client/src/less/font-awesome.min.less index ef974f0808..4804042555 100644 --- a/src/Umbraco.Web.UI.Client/src/less/font-awesome.min.less +++ b/src/Umbraco.Web.UI.Client/src/less/font-awesome.min.less @@ -28,7 +28,7 @@ @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome/fontawesome-webfont.eot?v=3.2.1'); - src: url('../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../fonts/fontawesome/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../fonts/fontawesome/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../fonts/fontawesome/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); + src: url('../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../fonts/fontawesome/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../fonts/fontawesome/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); font-weight: normal; font-style: normal; } diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less index e146b57826..7d64cd3065 100644 --- a/src/Umbraco.Web.UI.Client/src/less/panel.less +++ b/src/Umbraco.Web.UI.Client/src/less/panel.less @@ -19,29 +19,29 @@ cursor: text; } -.umb-headline-editor-wrapper h1 { +.umb-headline-editor-wrapper{height: 50px;} +.umb-headline-editor-wrapper h1, h1.headline { margin: 0; font-size: @fontSizeLarge; font-weight: 400; } -.umb-panel-header h1 { +.umb-panel-header h1, { margin: 0; font-size: @fontSizeLarge; font-weight: 400; color: @gray; + padding: 4px 0px 4px 6px; + line-height: 22px; + width: 100%; } .umb-headline-editor-wrapper input{ display: none; } -.umb-headline-editor-wrapper h1:hover, .umb-headline-editor-wrapper input { +.umb-headline-editor-wrapper h1.umb-headline-editor:hover, .umb-headline-editor-wrapper input { border-bottom: 1px dashed @grayLight; - padding: 4px 0px 4px 6px; - line-height: 22px; - margin: 4px 0 0 -7px; - width: 100%; } .umb-headline-editor-wrapper input:focus { diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index 9a04612402..8cfa8b7337 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -42,10 +42,9 @@ @linkColor: @black; @linkColorHover: darken(@linkColor, 15%); - // Typography // ------------------------- -@sansFontFamily: 'Open Sans', sans-serif; +@sansFontFamily: "'Helvetica Neue', 'Open Sans', Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; @@ -55,7 +54,7 @@ @altFontFamily: @serifFontFamily; @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily -@headingsFontWeight: bold; // instead of browser default, bold +@headingsFontWeight: 500; // instead of browser default, bold @headingsColor: inherit; // empty to use BS default, @textColor diff --git a/src/Umbraco.Web.UI.Client/src/routes.js b/src/Umbraco.Web.UI.Client/src/routes.js index d26a5ae4a8..603948984b 100644 --- a/src/Umbraco.Web.UI.Client/src/routes.js +++ b/src/Umbraco.Web.UI.Client/src/routes.js @@ -8,7 +8,7 @@ app.config(function ($routeProvider) { } rp.url = "dashboard.aspx?app=" + rp.section; - return 'views/common/legacy.html'; + return 'views/common/dashboard.html'; } }) .when('/framed/:url', { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dashboard.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dashboard.controller.js index 9c95dcddcc..b3de721ec8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dashboard.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dashboard.controller.js @@ -7,8 +7,16 @@ * Controls the dashboards of the application * */ -function DashboardController($scope, $routeParams) { - $scope.name = $routeParams.section; + +function DashboardController($scope, $routeParams, dashboardResource) { + $scope.dashboard = {}; + $scope.dashboard.name = $routeParams.section; + + dashboardResource.getDashboard($scope.dashboard.name).then(function(tabs){ + $scope.dashboard.tabs = tabs; + }); } + + //register it angular.module('umbraco').controller("Umbraco.DashboardController", DashboardController); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dashboard.html b/src/Umbraco.Web.UI.Client/src/views/common/dashboard.html index e9d4ac1df5..1d30bdceb8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dashboard.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dashboard.html @@ -1,16 +1,30 @@ -
+
+ + +
+

{{dashboard.name}}

+
+ + + +
+
-
-
-
-
+
+

{{property.caption}}

+
+
-
+
+

{{property.caption}}

+ +
-
-
-
-
-
- -
\ No newline at end of file +
+
+ + + + \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.controller.js index 9203a38e3c..fd16759876 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.controller.js @@ -4,12 +4,10 @@ angular.module("umbraco").controller("Umbraco.Dialogs.ContentPickerController", var dialogOptions = $scope.$parent.dialogOptions; $scope.dialogTreeEventHandler = $({}); - $log.log($scope); - $scope.dialogTreeEventHandler.bind("treeNodeSelect", function(ev, args){ args.event.preventDefault(); args.event.stopPropagation(); - + eventsService.publish("Umbraco.Dialogs.ContentPickerController.Select", args, "hello").then(function(args){ if(dialogOptions && dialogOptions.multipicker){ diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardIntro.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardIntro.html new file mode 100644 index 0000000000..0b96dffb2a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardIntro.html @@ -0,0 +1,33 @@ +

Thank you for choosing Umbraco!

+

We think this could be the beginning of something beautiful. You have made a great choice, to help you get started here are some links to addtional information:

+ +
+
+

New to Umbraco

+ +
+
+

Go further

+ +
+
+

Get support

+ +
+
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardKits.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardKits.html new file mode 100644 index 0000000000..726dd8d8a1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardKits.html @@ -0,0 +1,15 @@ +

Install a Starter Site and Skin

+

If you haven't already installed one of our Starter Kits, we think you should do that now. This is one of the best ways to start working with Umbraco. After you install a Starter Kit, you can select a skin to make it look great and customize the kit to your liking.

+

Starter Kits:

+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardVideos.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardVideos.html new file mode 100644 index 0000000000..69503a965f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/StartupDashboardVideos.html @@ -0,0 +1,15 @@ +

Hours of Umbraco training videos are only a click away

+

Want to master Umbraco? Spend a couple of minutes learning some best practices by watching one of these videos about using Umbraco. And visit umbraco.tv for even more Umbraco videos

+

To get you started:

+ +
+ +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js new file mode 100644 index 0000000000..0d894946ba --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js @@ -0,0 +1,20 @@ +function startUpVideosDashboardController($scope, xmlhelper, $log, $http) { + + + //xmlHelper.parseFeed("http://umbraco.org/feeds/videos/getting-started").then(function(feed){ + + //}); + $scope.videos = []; + $http.get("dashboard/feedproxy.aspx?url=http://umbraco.org/feeds/videos/getting-started").then(function(data){ + var feed = $(data.data); + $('item', feed).each(function (i, item) { + var video = {}; + video.thumbnail = $(item).find('thumbnail').attr('url'); + video.title = $("title", item).text(); + video.link = $("guid", item).text(); + $scope.videos.push(video); + }); + }); +} + +angular.module("umbraco").controller("Umbraco.Dashboard.StartupVideosController", startUpVideosDashboardController); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/settingsdashboardintro.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/settingsdashboardintro.html new file mode 100644 index 0000000000..3b2634d541 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/settingsdashboardintro.html @@ -0,0 +1 @@ +

Hello

\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html index b4930bd3f5..0d90298811 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html @@ -4,7 +4,7 @@
- +
@@ -14,6 +14,14 @@
+ +