Added local installer
This commit is contained in:
Simon Busborg
@@ -179,12 +179,10 @@
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
|
||||
|
||||
max-width: 100%;
|
||||
padding: 0 18px;
|
||||
|
||||
@@ -200,6 +198,8 @@
|
||||
border-radius: 3px;
|
||||
border: 0 none;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: background-color 80ms ease, color 80ms ease;
|
||||
}
|
||||
|
||||
@@ -226,18 +226,34 @@
|
||||
background-color: @blueDark;
|
||||
}
|
||||
|
||||
.umb-era-button.-red-orange {
|
||||
background-color: #FF3F34;
|
||||
color: white;
|
||||
.umb-era-button.-link {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.umb-era-button.-link:hover {
|
||||
background-color: transparent;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.umb-era-button.-inactive {
|
||||
cursor: not-allowed;
|
||||
background: whitesmoke;
|
||||
color: @grayMed;
|
||||
}
|
||||
|
||||
.umb-era-button.-inactive:hover {
|
||||
background: whitesmoke;
|
||||
color: @grayMed;
|
||||
}
|
||||
|
||||
|
||||
.umb-era-button.-full-width {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* CATEGORIES */
|
||||
|
||||
.umb-packages-categories {
|
||||
@@ -499,3 +515,91 @@
|
||||
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;
|
||||
|
||||
@@ -1,7 +1,31 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function PackagesInstallLocalController($scope, $route, $location) {
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Packages.InstallLocalController");
|
||||
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,
|
||||
"filePath": "",
|
||||
"riskAccept": false
|
||||
};
|
||||
|
||||
vm.loadPackage = loadPackage;
|
||||
|
||||
function loadPackage(){
|
||||
vm.state = "packageDetails";
|
||||
}
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Packages.InstallLocalController", PackagesInstallLocalController);
|
||||
|
||||
})();
|
||||
|
||||
@@ -1,7 +1,82 @@
|
||||
<div ng-controller="Umbraco.Editors.Packages.InstallLocalController as vm" class="clearfix">
|
||||
<div class="clearfix" ng-controller="Umbraco.Editors.Packages.InstallLocalController as vm">
|
||||
|
||||
<umb-load-indicator ng-if="page.loading"></umb-load-indicator>
|
||||
|
||||
Install Local
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<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
|
||||
</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-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>
|
||||
|
||||
Reference in New Issue
Block a user