From e12b9665ab9b29c62d39321bfccc86bea9c8f188 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Wed, 22 Jun 2016 12:54:08 +0200 Subject: [PATCH 01/60] Added better ui for multiple screen resolutions, added success screens for installer, added better ui for uninstall and accept term screens --- src/Umbraco.Web.UI.Client/src/less/belle.less | 5 ++ .../components/umb-package-local-install.less | 32 +++++++---- .../src/less/components/umb-packages.less | 53 +++++++++++++++++-- .../src/less/utilities/umb-utility_flex.less | 20 +++++++ .../less/utilities/umb-utility_spacing.less | 17 ++++++ .../less/utilities/umb-utility_widths.less | 4 ++ .../views/install-local.controller.js | 19 +++---- .../views/packager/views/install-local.html | 35 +++++++++--- .../src/views/packager/views/installed.html | 18 +++---- .../views/packager/views/repo.controller.js | 35 ++++++------ .../src/views/packager/views/repo.html | 44 +++++++++++---- 11 files changed, 212 insertions(+), 70 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less create mode 100644 src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_spacing.less create mode 100644 src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 8700bb8f36..ea7f3a2354 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -120,6 +120,11 @@ @import "components/notifications/umb-notifications.less"; @import "components/umb-file-dropzone.less"; +// Utilities +@import "utilities/umb-utility_flex.less"; +@import "utilities/umb-utility_spacing.less"; +@import "utilities/umb-utility_widths.less"; + //page specific styles @import "pages/document-type-editor.less"; @import "pages/login.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less index a272a40c90..c36184394f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less @@ -7,16 +7,7 @@ color: @grayMed; } -.inline-flex { - display: inline-flex; -} - -.mt-3 { - margin-top: 30px; -} - // Upload state - .umb-upload-local, .umb-info-local { display: flex; @@ -36,6 +27,7 @@ margin: 0; max-width: 640px; + width: 100%; } .umb-upload-local__dropzone { @@ -151,3 +143,25 @@ .umb-info-local-items .umb-package-installer-label { margin-left: 10px; } + +.umb-info-success { + +} + +.umb-info-success .icon { + font-size: 62px; + + width: 35px; + height: 35px; + padding: 35px; + margin-bottom: 35px; + + background-color: #50C878; + color: white; + + border-radius: 50%; + + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less index 6c8a7156bc..caeff6507d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less @@ -52,11 +52,55 @@ .umb-package { padding: 10px; box-sizing: border-box; - width: 25%; + flex: 0 0 100%; + max-width: 100%; +} + +@media (min-width: 768px) { + .umb-package { + flex: 0 0 50%; + max-width: 50%; + } +} + +@media (min-width: 1200px) { + .umb-package { + flex: 0 0 33.33%; + max-width: 33.33%; + } +} + +@media (min-width: 1400px) { + .umb-package { + flex: 0 0 25%; + max-width: 25%; + } +} + +@media (min-width: 1700px) { + .umb-package { + flex: 0 0 20%; + max-width: 20%; + } +} + + +@media (min-width: 1900px) { + .umb-package { + flex: 0 0 16.66%; + max-width: 16.66%; + } +} + +@media (min-width: 2200px) { + .umb-package { + flex: 0 0 14.28%; + max-width: 14.28%; + } } .umb-package-link { - display: flex; + display: block; flex-wrap: wrap; flex-direction: column; justify-content: center; @@ -104,6 +148,7 @@ .umb-package-icon img { max-width: 70px; + width: 70px; height: auto; } @@ -304,6 +349,7 @@ padding: 10px 0; } + .umb-packages-category:hover, .umb-packages-category.-active { text-decoration: none; @@ -440,12 +486,13 @@ } .umb-gallery__thumbnail { - flex: 1 1 100px; + flex: 0 1 100px; border: 1px solid @grayLight; border-radius: 3px; margin: 5px; padding: 10px; box-sizing: border-box; + max-width: 100px; } .umb-gallery__thumbnail:hover { diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less new file mode 100644 index 0000000000..747b4047d0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less @@ -0,0 +1,20 @@ +// Flex +.flex { + display: flex; +} + +.flex-inline { + display: inline-flex; +} + +.flex-direction-column { + flex-direction: column; +} + +.flex-justify-center { + justify-content: center; +} + +.flex-align-center { + align-items: center; +} diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_spacing.less b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_spacing.less new file mode 100644 index 0000000000..c05dd99a2a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_spacing.less @@ -0,0 +1,17 @@ +// Margin +.ma-center { + margin-left: auto; + margin-right: auto; +} + +.mt-3 { + margin-top: 30px; +} + +.mt-2 { + margin-top: 20px; +} + +.mt-1 { + margin-top: 10px; +} diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less new file mode 100644 index 0000000000..99ae7da380 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less @@ -0,0 +1,4 @@ +// Widths +.width-100 { + width: 100%; +} diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.controller.js b/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.controller.js index c68b31038f..f96df4d2f1 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.controller.js @@ -16,6 +16,7 @@ uploadProgress: 0, serverErrorMessage: null }; + vm.reloadView = reloadView; $scope.handleFiles = function (files, event) { for (var i = 0; i < files.length; i++) { @@ -121,23 +122,17 @@ }, installError) .then(function(result) { - - if (result.postInstallationPath) { - //Put the redirect Uri in a cookie so we can use after reloading - window.localStorage.setItem("packageInstallUri", result.postInstallationPath); - } - //reload on next digest (after cookie) - $timeout(function() { - window.location.reload(true); - }); - - + vm.state = "packageInstalledSucces"; }, installError); } + function reloadView() { + window.location.reload(true); + } + function installError() { - //TODO: Need to do something about this? + //TODO: Need to do something about this? } } diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html index b25facae7f..25901d5e75 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html +++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html @@ -82,18 +82,18 @@ -
+
+ -
This package cannot be installed, it requires a minimum Umbraco version of {{vm.localPackage.umbracoVersion}} @@ -109,4 +109,27 @@
+ +
+
+ +
+ +
+ +

Packed was installed

+

+ Yippy, the package was installed successfully – now let's take it to use. +

+ + + +
+
+ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html index 403406545c..307b6fdb02 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html +++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html @@ -43,7 +43,7 @@
-
+
@@ -74,18 +74,18 @@ {{ vm.package.readme }}
-
- +
+

{{vm.installState.status}}

diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.controller.js b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.controller.js index a28f1a761b..6188f365cd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.controller.js @@ -26,11 +26,12 @@ vm.installPackage = installPackage; vm.downloadPackage = downloadPackage; vm.openLightbox = openLightbox; + vm.reloadView = reloadView; vm.closeLightbox = closeLightbox; //used to cancel any request in progress if another one needs to take it's place var canceler = null; - + function getActiveCategory() { if (vm.searchQuery !== "") { return ""; @@ -38,7 +39,7 @@ for (var i = 0; i < vm.categories.length; i++) { if (vm.categories[i].active === true) { return vm.categories[i].name; - } + } } return ""; } @@ -73,7 +74,7 @@ if (vm.searchQuery) { if (newVal !== null && newVal !== undefined && newVal !== oldVal) { vm.loading = true; - + //a canceler exists, so perform the cancelation operation and reset if (canceler) { canceler.resolve(); @@ -97,7 +98,7 @@ canceler = null; }); } - } + } }); }, 200)); @@ -121,7 +122,7 @@ searchCategory = ""; } - $q.all([ + $q.all([ ourPackageRepositoryResource.getPopular(8, searchCategory) .then(function(pack) { vm.popular = pack.packages; @@ -187,21 +188,21 @@ vm.packageViewState = "packageInstall"; vm.loading = false; vm.localPackage = pack; - vm.localPackage.allowed = true; + vm.localPackage.allowed = true; }, error); } function error(e, args) { - + } function installPackage(selectedPackage) { - + vm.installState.status = "importing..."; packageResource - .import(selectedPackage) + .import(selectedPackage) .then(function(pack) { vm.installState.status = "Installing..."; return packageResource.installFiles(pack); @@ -218,21 +219,15 @@ }, error) .then(function(result) { - - if (result.postInstallationPath) { - //Put the redirect Uri in a cookie so we can use after reloading - window.localStorage.setItem("packageInstallUri", result.postInstallationPath); - } - - //reload on next digest (after cookie) - $timeout(function () { - window.location.reload(true); - }); - + vm.packageViewState = "packageInstalledSucces"; }, error); } + function reloadView() { + window.location.reload(true); + } + function openLightbox(itemIndex, items) { vm.lightbox = { show: true, diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html index 1849b3694f..ec7c5d039b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html +++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html @@ -4,7 +4,7 @@
- +
@@ -95,7 +95,7 @@ on-go-to-page="vm.goToPage"> -
+
@@ -242,7 +242,7 @@
- +
@@ -278,18 +278,18 @@
-
- +
+
This package cannot be installed, it requires a minimum Umbraco version of {{vm.localPackage.umbracoVersion}} @@ -304,4 +304,26 @@
+ +
+
+ +
+ +
+ +

Packed was installed

+

+ Yippy, the package was installed successfully – now let's take it to use. +

+ + + +
+
+
From dbec2c207f8bce6ba5cdbce6a3c9d4b32cf0a3f7 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Wed, 22 Jun 2016 13:05:19 +0200 Subject: [PATCH 02/60] Package category navigation fixed for all screen resolutions --- .../src/less/components/umb-packages.less | 43 ++++++++++++++++++- 1 file changed, 41 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less index caeff6507d..2bff88758e 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less @@ -350,6 +350,43 @@ } +@media (max-width: 768px) { + .umb-packages-category { + width: 100%; + } +} + +@media (max-width: 992px) { + .umb-packages-category { + border: 1px solid @grayLight; + margin: 5px; + flex: 0 0 auto; + + text-align: center; + padding: 10px; + + max-width: 100%; + + border-radius: 3px; + } +} + +@media (min-width: 1100px) and (max-width: 1300px) { + .umb-packages-category { + border: 1px solid @grayLight; + margin: 5px; + flex: 0 0 auto; + + text-align: center; + padding: 10px; + + max-width: 100%; + + border-radius: 3px; + } +} + + .umb-packages-category:hover, .umb-packages-category.-active { text-decoration: none; @@ -358,12 +395,14 @@ .umb-packages-category.-first { border-left: 1px solid @grayLight; - border-radius: 3px 0 0 3px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } .umb-packages-category.-last { border-right: 1px solid @grayLight; - border-radius: 0 3px 3px 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } /* PACKAGE DETAILS */ From c280a0a5abb3db5d5483dbd94a496c122f031c90 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Wed, 22 Jun 2016 13:40:01 +0200 Subject: [PATCH 03/60] Added new utility in text-align and added empty message for search --- src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../src/less/utilities/umb-utility_text-align.less | 4 ++++ .../src/views/packager/views/repo.html | 9 ++++++++- 3 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_text-align.less diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index ea7f3a2354..c19eb4c847 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -123,6 +123,7 @@ // Utilities @import "utilities/umb-utility_flex.less"; @import "utilities/umb-utility_spacing.less"; +@import "utilities/umb-utility_text-align.less"; @import "utilities/umb-utility_widths.less"; //page specific styles diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_text-align.less b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_text-align.less new file mode 100644 index 0000000000..c25f1c5cff --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_text-align.less @@ -0,0 +1,4 @@ +// Text align +.tl { text-align: left; } +.tr { text-align: right; } +.tc { text-align: center; } diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html index ec7c5d039b..00f301f5d0 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html +++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html @@ -12,6 +12,7 @@
+
-
+

Latest

@@ -96,6 +97,12 @@
+ + +
+

We couldn't find anything for '{{ vm.searchQuery }}'

+

Please try searching for another package or browse through the categories.

+
From 9602a52801cca01d2e64058f6d4be330d5f75c42 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Wed, 22 Jun 2016 13:52:49 +0200 Subject: [PATCH 04/60] added better utility for flexbox and changed classes in views --- .../src/less/utilities/umb-utility_flex.less | 55 +++++++++++++------ .../less/utilities/umb-utility_widths.less | 23 ++++++++ .../views/packager/views/install-local.html | 4 +- .../src/views/packager/views/installed.html | 4 +- .../src/views/packager/views/repo.html | 10 ++-- 5 files changed, 70 insertions(+), 26 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less index 747b4047d0..73f58dde8d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less +++ b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less @@ -1,20 +1,39 @@ -// Flex -.flex { - display: flex; +.flex { display: flex } +.flex-inline { display: flex-inline } + +.flex-column { flex-direction: column; } +.flex-wrap { flex-wrap: wrap; } + +.items-start { align-items: flex-start; } +.items-end { align-items: flex-end; } +.items-center { align-items: center; } +.items-baseline { align-items: baseline; } +.items-stretch { align-items: stretch; } + +.self-start { align-self: flex-start; } +.self-end { align-self: flex-end; } +.self-center { align-self: center; } +.self-baseline { align-self: baseline; } +.self-stretch { align-self: stretch; } + +.justify-start { justify-content: flex-start; } +.justify-end { justify-content: flex-end; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.justify-around { justify-content: space-around; } + +.content-start { align-content: flex-start; } +.content-end { align-content: flex-end; } +.content-center { align-content: center; } +.content-between { align-content: space-between; } +.content-around { align-content: space-around; } +.content-stretch { align-content: stretch; } + +/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */ +.flex-auto { + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ } -.flex-inline { - display: inline-flex; -} - -.flex-direction-column { - flex-direction: column; -} - -.flex-justify-center { - justify-content: center; -} - -.flex-align-center { - align-items: center; -} +.flex-none { flex: none; } diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less index 99ae7da380..c9fbba3798 100644 --- a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less +++ b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less @@ -1,4 +1,27 @@ // Widths +.width-1 { width: calc(1/12 * 100%); } +.width-2 { width: calc(2/12 * 100%); } +.width-3 { width: calc(3/12 * 100%); } +.width-4 { width: calc(4/12 * 100%); } +.width-5 { width: calc(5/12 * 100%); } +.width-6 { width: calc(6/12 * 100%); } +.width-7 { width: calc(7/12 * 100%); } +.width-8 { width: calc(8/12 * 100%); } +.width-9 { width: calc(9/12 * 100%); } +.width-10 { width: calc(10/12 * 100%); } +.width-11 { width: calc(11/12 * 100%); } +.width-12 { width: 100%; } + .width-100 { width: 100%; } + +.width { + float: left; + box-sizing: border-box; +} + +.width-right { + float: right; + box-sizing: border-box; +} diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html index 25901d5e75..64e37713e9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html +++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html @@ -82,7 +82,7 @@
-
+
terms of use @@ -90,7 +90,7 @@ diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html index 307b6fdb02..25cf187e67 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html +++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html @@ -74,7 +74,7 @@ {{ vm.package.readme }}
-
+
- -
+ +

We couldn't find anything for '{{ vm.searchQuery }}'

Please try searching for another package or browse through the categories.

+ +
@@ -285,7 +287,7 @@
-
+