From 2ce2a03072e49607739800c2963999a6f8a2fd12 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Wed, 1 Jun 2016 13:03:14 +0200 Subject: [PATCH] Local installer --- src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../components/umb-package-local-install.less | 150 ++++++++++++++++++ .../src/less/components/umb-packages.less | 100 +----------- .../views/install-local.controller.js | 19 +-- .../packagesNew/views/install-local.html | 120 +++++++------- .../config/ClientDependency.config | 2 +- 6 files changed, 228 insertions(+), 164 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index d00bc6021e..6be0decac3 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -109,6 +109,7 @@ @import "components/umb-property-editor.less"; @import "components/umb-iconpicker.less"; @import "components/umb-packages.less"; +@import "components/umb-package-local-install.less"; @import "components/buttons/umb-button.less"; @import "components/buttons/umb-button-group.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 new file mode 100644 index 0000000000..46fe9e2eeb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less @@ -0,0 +1,150 @@ +// +// Install local package +// + +// Helpers +.faded { + color: @grayMed; +} + +.inline-flex { + display: inline-flex; +} + +.mt-3 { + margin-top: 30px; +} + +// Upload state + +.umb-upload-local, +.umb-info-local { + display: flex; + justify-content: center; + align-items: center; + + text-align: center; + + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.umb-upload-local form, +.umb-info-local-items { + display: flex; + flex-direction: column; + + justify-content: center; + align-items: center; + + margin: 0; + + max-width: 640px; +} + +.umb-upload-field { + width: 500px; + height: 300px; + border: 2px dashed @grayLight; + border-radius: 3px; + background: @grayLighter; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + margin-bottom: 30px; + + transition: 100ms box-shadow ease, 100ms border ease; + + &:hover { + border-color: @blue; + border-style: solid; + box-shadow: 0 3px 8px rgba(0,0,0, .1); + transition: 100ms box-shadow ease, 100ms border ease; + } +} + +.umb-upload-field i { + color: @grayLight; + font-size: 110px; + line-height: 1; +} + + +// Accept terms +.umb-accept-terms { + display: flex; + align-items: center; + + font-size: 13px; +} + +.umb-package-installer-label .label-text { + margin-left: 5px; +} + +.umb-package-installer-label input[type="radio"], +.umb-package-installer-label input[type="checkbox"] { + margin-top: 0px; +} + +.umb-package-installer-label { + display: inline-flex; + align-items: center; + + font-size: 13px; + user-select: none; +} + + +// Info state +.umb-info-local-items { + border: 2px solid @grayLight; + border-radius: 3px; + background: @grayLighter; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + margin: 0 20px; + max-width: 540px; +} + +.umb-info-local-items a { + text-decoration: underline; + + &:hover { + text-decoration: none; + } +} + +.umb-info-local-item { + margin-bottom: 20px; +} + +.umb-info-local-items .umb-package-icon { + width: 100%; + box-sizing: border-box; + min-height: 150px; +} + +.umb-info-local-items .umb-package-icon img { + max-width: 100px; +} + +.umb-info-local-items .umb-package-info { + width: 100%; + box-sizing: border-box; + padding: 20px 40px; +} + +.umb-info-local-items .umb-package-installer-label { + margin-left: 10px; +} 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 903b94772a..0a6fa82315 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 @@ -194,7 +194,7 @@ font-weight: bold; height: 38px; - line-height: 38px; + line-height: 1; max-width: 100%; padding: 0 18px; @@ -210,6 +210,7 @@ border-radius: 3px; border: 0 none; + box-sizing: border-box; cursor: pointer; @@ -251,13 +252,13 @@ .umb-era-button.-inactive { cursor: not-allowed; - background: whitesmoke; - color: @grayMed; + color: #BBB; + background: #EAE7E7; } .umb-era-button.-inactive:hover { - background: whitesmoke; - color: @grayMed; + color: #BBB; + background: #EAE7E7; } @@ -515,92 +516,3 @@ display: flex; justify-content: flex-end; } - - - -// Install local package - -// Accept terms -.umb-accept-terms { - margin-bottom: 40px; - display: flex; - align-items: center; - - font-size: 13px; -} - -.umb-package-installer-label .label-text { - margin-left: 5px; -} - -.umb-package-installer-label input[type="radio"], -.umb-package-installer-label input[type="checkbox"] { - margin-top: 0px; -} - -.umb-package-installer-label { - display: flex; - align-items: center; - - font-size: 13px; - user-select: none; -} - -// Install local package -.umb-center-allthings { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - - max-width: 640px; - margin: 0 auto; - text-align: center; -} - - -// Upload state -.umb-upload-local input[type="file"] { - display: none; -} - -.umb-upload-local { - display: flex; - flex-direction: row; - align-items: flex-start; - - margin: 40px auto; -} - -.umb-upload-local .loaded { - margin-left: 10px; -} - -.umb-upload-local .upload i { - font-size: 20px; - line-height: 1; -} - -.umb-upload-local .-large { - font-size: 18px; -} - -.uploaded-file-name { - margin-left: 10px; -} - - -// Info state -.umb-info-local { - -} - -.umb-info-local-item { - margin: 10px 0; -} diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.controller.js b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.controller.js index 56a67db062..39e4f47236 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.controller.js @@ -4,17 +4,18 @@ function PackagesInstallLocalController($scope, $route, $location) { var vm = this; - vm.state = "upload"; + vm.localPackage = { - "packageName": "SvgIconPicker Version: 0.1.0", - "packageAuthor": "Søren Kottal", - "packageAuthorLink": "https://github.com/skttl/", - "packageInfo": "https://github.com/skttl/Umbraco.SvgIconPicker", - "packageLicens": "GPLv3", - "packageLicensLink": "http://www.gnu.org/licenses/quick-guide-gplv3.en.html", - "packageLicensAccept": false, - "packageReadme": false, + "icon":"https://our.umbraco.org/media/wiki/154472/635997115126742822_logopng.png?bgcolor=fff&height=154&width=281&format=png", + "name": "SvgIconPicker Version: 0.1.0", + "author": "Søren Kottal", + "authorLink": "https://github.com/skttl/", + "info": "https://github.com/skttl/Umbraco.SvgIconPicker", + "licens": "GPLv3", + "licensLink": "http://www.gnu.org/licenses/quick-guide-gplv3.en.html", + "licensAccept": false, + "readme": "Color Palettes is a simple property editor that let you define different color palettes (or get them from Adobe Kuler or COLOURlovers) and present them to the editor as a list of radio buttons.", "filePath": "", "riskAccept": false }; diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.html b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.html index 93fb7d17ff..3b3c247aa2 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.html +++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.html @@ -1,82 +1,82 @@ -
- +
-
-

Install local package

-

Browse for local packages, they usally have a ".zip" extension. You can find trusted packages on our.umbraco.com or in the package tab in Umbraco

+ -
- +
+ + Drop to upload
+

Upload package

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam +

-
-
-

{{ vm.localPackage.packageName }}

+
+
+ +
+
+ +
+ + +
+

{{ vm.localPackage.name }}

+ +
+ Author + {{ vm.localPackage.author }} +
+ +
+ Repository + {{ vm.localPackage.info }} +
+ +
+ License + {{ vm.localPackage.licens }} +
+ +
+ Read me +
+ {{ vm.localPackage.readme }} +
+ +
+ + + +
+ +
+
-
- Author - {{ vm.localPackage.packageAuthor }}
- -
- Repository - {{ vm.localPackage.packageInfo }} -
- -
- License - {{ vm.localPackage.packageLicens }} -
- -
- Accept license - -
- -
- Read me -
- -
- 
-        {{ vm.localPackage | json }}
-
-
diff --git a/src/Umbraco.Web.UI/config/ClientDependency.config b/src/Umbraco.Web.UI/config/ClientDependency.config index 2115c540b7..8663cfeae6 100644 --- a/src/Umbraco.Web.UI/config/ClientDependency.config +++ b/src/Umbraco.Web.UI/config/ClientDependency.config @@ -10,7 +10,7 @@ NOTES: * Compression/Combination/Minification is not enabled unless debug="false" is specified on the 'compiliation' element in the web.config * A new version will invalidate both client and server cache and create new persisted files --> - +