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

Local installer

Browse Source
This commit is contained in:
Simon Busborg
2016-06-01 13:03:14 +02:00
parent a39150a98c
commit 2ce2a03072
6 changed files with 228 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -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";

150
src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less Normal file
View File

@@ -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;
}

100
src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
View File

@@ -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;
}

19
src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.controller.js
View File

@@ -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
};

120
src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.html
View File

@@ -1,82 +1,82 @@
<div class="clearfix" ng-controller="Umbraco.Editors.Packages.InstallLocalController as vm">
<div class="umb-packages-view-wrapper" ng-controller="Umbraco.Editors.Packages.InstallLocalController as vm">
<!-- Upload -->
<div class="umb-upload-local" ng-if="vm.state === 'upload'">
<form novalidate name="localPackageForm" class="umb-center-allthings">
<h3><strong>Install local package</strong></h3>
<p>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</p>
<form novalidate name="localPackageForm">
<div class="umb-upload-local">
<label for="body_file1">
<div class="umb-era-button -blue upload">
<i class="icon-cloud-upload large"></i>
<span class="uploaded-file-name">Choose file</span>
</div>
<input class="input-file" name="ctl00$body$file1" type="file" id="body_file1" onchange="enableButton();">
</label>
<div class="umb-upload-field">
<i class="icon-box"></i>
<small class="faded"><strong>Drop to upload</strong></small>
</div>
<h3><strong>Upload package</strong></h3>
<p class="faded">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
<label for="accept-terms" class="umb-accept-terms umb-package-installer-label">
<input type="checkbox" id="accept-terms" ng-model="vm.localPackage.riskAccept" required>
<strong class="label-text">I understand the security risks associated with installing a local package</strong>
</label>
<button type="button"
class="umb-era-button -blue loaded"
ng-class="{'-inactive' : localPackageForm.$invalid}"
ng-disabled="localPackageForm.$invalid"
ng-click="vm.loadPackage()">Load package and proceed
class="umb-era-button -blue"
ng-click="vm.loadPackage()">Next
</button>
</form>
</div>
<!-- Package details -->
<div class="umb-info-local umb-center-allthings" ng-if="vm.state === 'packageDetails'">
<h3 class="umb-info-local-item"><strong>{{ vm.localPackage.packageName }}</strong></h3>
<div class="umb-info-local" ng-if="vm.state === 'packageDetails'">
<div class="umb-info-local-items">
<form novalidate name="localPackageForm">
<div class="umb-package-icon">
<img ng-src="{{vm.localPackage.icon}}" alt="" />
</div>
<div class="umb-package-info">
<h4 class="umb-info-local-item"><strong>{{ vm.localPackage.name }}</strong></h4>
<div class="umb-info-local-item">
<strong>Author</strong>
<a href="{{ vm.localPackage.authorLink }}" target="_blank">{{ vm.localPackage.author }}</a>
</div>
<div class="umb-info-local-item">
<strong>Repository</strong>
<a href="{{ vm.localPackage.info }}" target="_blank">{{ vm.localPackage.info }}</a>
</div>
<div class="umb-info-local-item">
<strong>License</strong>
<a href="{{ vm.localPackage.licensLink }}">{{ vm.localPackage.licens }}</a>
</div>
<div class="umb-info-local-item">
<strong>Read me</strong>
<br>
<small> {{ vm.localPackage.readme }} </small>
</div>
<div class="umb-info-local-item mt-3">
<button type="button"
ng-class="{'-inactive' : localPackageForm.$invalid}"
ng-disabled="localPackageForm.$invalid"
class="umb-era-button -blue inline-flex">
Install package
</button>
<label for="licens-accept" class="umb-package-installer-label">
<input type="checkbox" id="licens-accept" ng-model="vm.localPackage.packageLicensAccept" required>
<strong class="label-text">I accept <a href="#">terms of use</a></strong>
</label>
</div>
</div>
</form>
<div class="umb-info-local-item">
<strong>Author</strong>
<a href="{{ vm.localPackage.packageAuthorLink }}" target="_blank">{{ vm.localPackage.packageAuthor }}</a>
</div>
<div class="umb-info-local-item">
<strong>Repository</strong>
<a href="{{ vm.localPackage.packageInfo }}" target="_blank">{{ vm.localPackage.packageInfo }}</a>
</div>
<div class="umb-info-local-item">
<strong>License</strong>
<a href="{{ vm.localPackage.packageLicensLink }}">{{ vm.localPackage.packageLicens }}</a>
</div>
<div class="umb-info-local-item">
<strong>Accept license</strong>
<label for="licens-accept" class="umb-package-installer-label">
<input type="checkbox" id="licens-accept" ng-model="vm.localPackage.packageLicensAccept" required>
<strong class="label-text">I accept License</strong>
</label>
</div>
<div class="umb-info-local-item">
<strong>Read me</strong>
</div>
<button type="button"
class="umb-era-button -blue">
Install package
</button>
</div>
<pre>
{{ vm.localPackage | json }}
</pre>
</div>

2
src/Umbraco.Web.UI/config/ClientDependency.config
View File

@@ -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
-->
<clientDependency version="745538204" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.UI.CdfLogger, umbraco">
<clientDependency version="427986118" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.UI.CdfLogger, umbraco">
<!--
This section is used for Web Forms only, the enableCompositeFiles="true" is optional and by default is set to true.