new design

This commit is contained in:
Jon Lambson 2017-09-28 15:10:50 -06:00
parent bccd62f679
commit 699e510a61
4 changed files with 331 additions and 109 deletions

View File

@ -458,3 +458,161 @@ ul.tree.files-only.ls-none {
.tree ul { .tree ul {
-webkit-padding-start: 0; -webkit-padding-start: 0;
} }
.websites-tile img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.websites-tile iframe {
border-width: 2px;
border-style: none;
border-color: none;
border-image: inone;
}
.websites-tile .btn {
background-color: white;
border: 1px solid #cccccc;
color: #696969;
padding: 0.5rem;
text-transform: uppercase;
}
.websites-tile .btn--block {
display: block;
width: 100%;
}
.websites-tile .cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.websites-tile .cards__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1rem;
}
@media (min-width: 40rem) {
.websites-tile .cards__item {
width: 50%;
}
}
@media (min-width: 56rem) {
.websites-tile .cards__item {
width: 33.3333%;
}
}
.websites-tile .card {
background-color: white;
border-radius: 0.25rem;
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
max-width: 350px;
min-width: 350px;
}
.websites-tile .card:hover .card__image {
-webkit-filter: contrast(100%);
filter: contrast(100%);
}
.websites-tile .card__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 1rem;
}
.websites-tile .card__image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background: rgba(0, 0, 0, 0.5);
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
-webkit-filter: contrast(70%);
filter: contrast(70%);
overflow: hidden;
position: relative;
-webkit-transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}
.websites-tile .card__title {
color: #696969;
font-size: 1.25rem;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.websites-tile .card__text {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 1.25rem;
}
.card__title.text-center {
margin-bottom: 10px;
}
a:hover, a:focus {
color: #2a6496;
text-decoration: none;
}
.square-service-block{
position:relative;
overflow:hidden;
margin:15px auto;
}
.square-service-block a {
background-color: #e74c3c;
border-radius: 5px;
display: block;
padding: 60px 20px;
text-align: center;
width: 100%;
}
.square-service-block a:hover{
background-color: rgba(231, 76, 60, 0.8);
border-radius: 5px;
}
.ssb-icon {
color: #fff;
display: inline-block;
font-size: 28px;
margin: 0 0 20px;
}
h2.ssb-title {
color: #fff;
font-size: 20px;
font-weight: 200;
margin:0;
padding:0;
text-transform: uppercase;
}

View File

@ -53,8 +53,8 @@ app.directive('fileTree', [function () {
}]); }]);
app.controller('websiteCtrl', [ app.controller('websiteCtrl', [
'$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout' '$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout', '$sce'
, function ($scope, $q, Auth, Oauth3, $timeout) { , function ($scope, $q, Auth, Oauth3, $timeout, $sce) {
var vm = this; var vm = this;
vm.domains = []; vm.domains = [];
@ -444,7 +444,6 @@ app.controller('websiteCtrl', [
}); });
}; };
vm.Shares.list = function (r) { vm.Shares.list = function (r) {
vm.showSharesList = true;
var pkg = Auth.oauth3.pkg('www@daplie.com'); var pkg = Auth.oauth3.pkg('www@daplie.com');
return pkg.listShares({ return pkg.listShares({
domain: r.domain domain: r.domain
@ -514,6 +513,10 @@ app.controller('websiteCtrl', [
console.log('[listSites] sites:'); console.log('[listSites] sites:');
console.log(sites); console.log(sites);
vm.sites = sites; vm.sites = sites;
vm.sites.forEach(function(site) {
site.urlSafeDomain = "https://" + site.domain;
site.urlSafeDomain = $sce.trustAsResourceUrl(site.urlSafeDomain);
});
}); });
}; };
@ -549,6 +552,42 @@ app.controller('websiteCtrl', [
return matches; return matches;
}; };
vm.showAction = function (action) {
switch(action) {
case 'invite':
vm.showInviteContainer = true;
vm.websiteTiles = true;
vm.showBackBtn = true;
break;
case 'shares':
vm.showSharesContainer = true;
vm.websiteTiles = true;
vm.showBackBtn = true;
break;
case 'files':
vm.showFilesContainer = true;
vm.websiteTiles = true;
vm.showBackBtn = true;
break;
case 'upload':
vm.showUploadContainer = true;
vm.websiteTiles = true;
vm.showBackBtn = true;
break;
default:
}
};
vm.closeAllOpenActions = function () {
$timeout(function() {
vm.showInviteContainer = false;
vm.showSharesContainer = false;
vm.showFilesContainer = false;
vm.websiteTiles = false;
vm.showBackBtn = false;
}, 150);
};
}]); }]);
app.filter('stringify', function() { app.filter('stringify', function() {

View File

@ -92,7 +92,7 @@
<div class="invite-card-container"> <div class="invite-card-container">
<div class="invite-option"> <div class="invite-option">
<h1>Invite Code</h1> <h1>Enter Invite Code</h1>
<hr /> <hr />
<input type="text" class="form-control" ng-model="vm.Shares.inviteToken" /> <input type="text" class="form-control" ng-model="vm.Shares.inviteToken" />
<hr /> <hr />
@ -108,105 +108,130 @@
</div> </div>
<hr> <hr>
<div class="row"> <div class="row">
<div> <div class="websites-tile">
<table class="table table-striped"> <h1>Your Websites</h1>
<thead> <ul class="cards">
<tr> <li class="cards__item" ng-repeat="r in vm.sites">
<th>Website</th> <div class="card">
<th class="text-center"></th> <div class="card__image card__image--fence">
</tr> <iframe src="{{ r.urlSafeDomain }}" width="350" height="350"></iframe>
</thead> </div>
<tr ng-repeat="r in vm.sites"> <div class="card__content">
<td><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.domain">example.com</a></td> <div class="card__title text-center"><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.domain">example.com</a></div>
<td class="text-center"> <button class="btn btn--block card__btn" data-toggle="modal" data-target=".{{ r.challenge }}" ng-click="vm.closeAllOpenActions()">Edit</button>
<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target=".{{r.challenge}}">Edit</button> </div>
<button type="button" class="btn btn-primary btn-xs" ng-click="vm.Sites.archive(r)">Download</button> </div>
<button type="button" class="btn btn-danger btn-xs" ng-click="vm.Sites.remove(r)">Delete</button> </li>
</td> </ul>
</tr>
</table>
</div> </div>
<div class="modal fade {{ r.challenge }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" ng-repeat="r in vm.sites"> <div class="modal fade {{ r.challenge }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" ng-repeat="r in vm.sites">
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ng-click="vm.showSharesList = false; vm.showListFiles = false;"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <button type="button" class="close" data-dismiss="modal" ng-click="vm.closeAllOpenActions()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.domain">example.com</a></h4> <h4 class="modal-title"><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.urlSafeDomain">example.com</a></h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form class="form-inline text-center"> <div class="website-menu container" ng-hide="vm.websiteTiles">
<h4 class="text-left">Send Invitation:</h4> <div class="row">
<div class="form-group"> <div class="col-md-3">
<input type="text" ng-model="r.shareEmail" class="form-control" placeholder="ex: john@example.com" /> <div class="square-service-block">
<a ng-click="vm.showAction('invite')" class="cp">
<div class="ssb-icon"><i class="fa fa-share-square-o" aria-hidden="true"></i></div>
<h2 class="ssb-title">Invite</h2>
</a>
</div>
</div>
<div class="col-md-3">
<div class="square-service-block">
<a ng-click="vm.showAction('shares'); vm.Shares.list(r)" class="cp">
<div class="ssb-icon"> <i class="fa fa-list-alt" aria-hidden="true"></i> </div>
<h2 class="ssb-title">Shares</h2>
</a>
</div>
</div>
<div class="col-md-3">
<div class="square-service-block">
<a ng-click="vm.showAction('files'); vm.Sites.contents(r)" class="cp">
<div class="ssb-icon"><i class="fa fa-sitemap" aria-hidden="true"></i></div>
<h2 class="ssb-title">Files</h2>
</a>
</div>
</div>
</div> </div>
<div class="form-group"> <div class="row">
<input type="text" ng-model="r.sharePath" class="form-control" placeholder="/" /> <div class="col-md-3">
</div> <div class="square-service-block">
<div class="form-group"> <a ng-href="https://{{ r.domain }}" target="_blank" class="cp">
<input type="text" ng-model="r.shareMode" class="form-control" placeholder="rwx (read, write, invite)" /> <div class="ssb-icon"><i class="fa fa-globe" aria-hidden="true"></i></div>
</div> <h2 class="ssb-title">Website</h2>
<button type="submit" class="btn btn-success" ng-click="vm.Shares.invite(r)">Invite</button> </a>
</form> </div>
<form class="form-inline text-center"> </div>
<h4 class="text-left">Shares:</h4> <div class="col-md-3">
<button class="btn btn-info" ng-click="vm.Shares.list(r)" ng-hide="vm.showSharesList">View Shared With</button> <div class="square-service-block">
<button class="btn btn-danger" ng-click="vm.showSharesList = false" ng-show="vm.showSharesList">Hide Shares</button> <a ng-click="vm.Sites.archive(r)" class="cp">
<div class="white-well" ng-show="vm.showSharesList"> <div class="ssb-icon"><i class="fa fa-file-archive-o" aria-hidden="true"></i></div>
<span class="text-muted" ng-if="r.sharedWith.length === 1">Currently not shared with anyone...</span> <h2 class="ssb-title">Download</h2>
<ul class="shares-container" ng-repeat="share in r.sharedWith" ng-if="!share.me"> </a>
<li> </div>
<div class="media"> </div>
<div class="media-left align-self-center"> <div class="col-md-3">
<img class="rounded-circle" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png"> <div class="square-service-block">
</div> <a ng-click="vm.Sites.remove(r)" class="cp">
<div class="media-body"> <div class="ssb-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
<h4 ng-bind="share.comment">friend@email.com</h4> <h2 class="ssb-title">Delete</h2>
<p><b>Share Path:</b> <span ng-bind="share.path" class="text-muted">/</span></p> </a>
<p><b>Actions Allowed:</b> <span ng-bind="share.mode" class="text-muted">rwx</span></p> </div>
<p><b>Invite:</b> <em ng-if="share.pending" class="text-muted">pending</em></p> </div>
</div>
<div class="media-right align-self-center">
<button class="btn btn-danger" ng-click="vm.Shares.remove(r, share)">Remove Access</button>
</div>
</div>
</li>
</ul>
</div>
</form>
<form class="form-inline text-center">
<h4 class="text-left">List Files:</h4>
<!-- <div class="form-group">
<input type="text" class="form-control" ng-model="r.newPath" placeholder="Ex: Directory Name" />
</div> -->
<button class="btn btn-info trigger-search" ng-click="vm.Sites.contents(r)">List Root Files</button>
<div class="white-well" ng-show="vm.showListFiles">
<file-tree r="r"></file-tree>
</div>
</form>
<div class="">
<h4 class="text-left">Upload Files:</h4>
<div>
<input type="file" ng-model="r.newFile" class="form-control" daplie-file-change="vm.Sites.setUpload(r)" />
<div ng-if="r.isZip"><label><input type="checkbox" ng-model="r.unzip" /> Unpack .zip</label></div>
<div ng-if="r.unzip"><label><input type="checkbox" ng-model="r.stripZip" /> Strip zip directory root</label></div>
<!-- div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
<div ng-if="r.uploadTotal"><span ng-bind="r.uploadPercent">99</span>% | <span ng-bind="r.uploadProgress">1</span> MiB / <span ng-bind="r.uploadTotal">100</span> MiB</div>
<div><label>Web path</label> <input type="text" class="form-control" ng-model="r.uploadPath" /></div>
<button ng-click="vm.Sites.upload(r)" type="button" name="button" class="btn btn-default">Add File</button>
</div> </div>
</div> </div>
<div ng-show="vm.showInviteContainer">
<h1>TODO:// FIX THIS UGLY</h1>
<form class="form-inline text-center">
<div class="form-group">
<input type="text" ng-model="r.shareEmail" class="form-control" placeholder="ex: john@example.com" />
</div>
<div class="form-group">
<input type="text" ng-model="r.sharePath" class="form-control" placeholder="/" />
</div>
<div class="form-group">
<input type="text" ng-model="r.shareMode" class="form-control" placeholder="rwx (read, write, invite)" />
</div>
<button type="submit" class="btn btn-success" ng-click="vm.Shares.invite(r)">Invite</button>
</form>
</div>
<div ng-show="vm.showSharesContainer">
<span class="text-muted" ng-if="r.sharedWith.length === 1">Currently not shared with anyone...</span>
<ul class="shares-container" ng-repeat="share in r.sharedWith" ng-if="!share.me">
<li>
<div class="media">
<div class="media-left align-self-center">
<img class="rounded-circle" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png">
</div>
<div class="media-body">
<h4 ng-bind="share.comment">friend@email.com</h4>
<p><b>Share Path:</b> <span ng-bind="share.path" class="text-muted">/</span></p>
<p><b>Actions Allowed:</b> <span ng-bind="share.mode" class="text-muted">rwx</span></p>
<p><b>Invite:</b> <em ng-if="share.pending" class="text-muted">pending</em></p>
</div>
<div class="media-right align-self-center">
<button class="btn btn-danger" ng-click="vm.Shares.remove(r, share)">Remove Access</button>
</div>
</div>
</li>
</ul>
</div>
<div ng-show="vm.showFilesContainer">
<file-tree r="r"></file-tree>
</div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer ">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.showSharesList = false; vm.showListFiles = false;">Close</button> <button type="button" class="btn btn-primary pull-left" ng-show="vm.showBackBtn" ng-click="vm.closeAllOpenActions()">Back</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.closeAllOpenActions()">Close</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,31 +1,31 @@
<div class="text-left"> <div class="text-left">
<div class="row"> <div class="row">
<ul class="breadcrumb"> <ul class="breadcrumb">
<button type="button" class="close" ng-click="vm.showListFiles = false" ng-show="vm.showListFiles"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<li ng-repeat="breadcrumb in vm.breadcrumbs track by $index" ng-click="vm.getDirectoriesFromBreadcrumbs(breadcrumb)" data="{{ breadcrumb }}" class="cp breadcrumbs-list"> <li ng-repeat="breadcrumb in vm.breadcrumbs track by $index" ng-click="vm.getDirectoriesFromBreadcrumbs(breadcrumb)" data="{{ breadcrumb }}" class="cp breadcrumbs-list">
{{ breadcrumb }} {{ breadcrumb }}
</li> </li>
</ul> </ul>
</div> </div>
<div class="row"> <div class="row">
<ul class="tree ls-none"> <div class="col-lg-6">
<li class="directories-go-here" ng-repeat="directory in vm.siteDirectories track by $index"> <ul class="tree ls-none">
<input type="checkbox" id="{{ r.challenge }}{{ $index }}" /> <li class="directories-go-here" ng-repeat="directory in vm.siteDirectories track by $index">
<label class="tree_label" for="{{ r.challenge }}{{ $index }}" ng-click="vm.getDirectories(directory)" data="{{ directory }}">{{ directory }}</label> <input type="checkbox" id="{{ r.challenge }}{{ $index }}" />
</li> <label class="tree_label" for="{{ r.challenge }}{{ $index }}" ng-click="vm.getDirectories(directory)" data="{{ directory }}">{{ directory }}</label>
</ul> </li>
<ul class="tree files-only ls-none"> </ul>
<li ng-repeat="file in vm.siteFiles track by $index"> <ul class="tree files-only ls-none">
<span class="tree_label filez">{{ file }}</span> <li ng-repeat="file in vm.siteFiles track by $index">
</li> <span class="tree_label filez">{{ file }}</span><span class="pull-right"><button type="button" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></button></span>
<li class="move-back"> </li>
<a><i class="fa fa-plus"></i> Add Files</a> <li class="move-back">
</li> <a><i class="fa fa-plus"></i> Add Files</a>
</ul> </li>
</div> </ul>
<hr> <hr>
<div class="row"> <h1>ADD UPLOAD STUFF HERE</h1>
<div class="col-lg-12"> </div>
<div class="col-lg-6">
<pre style="font-size: 10px;">{{ vm.folderStructure | stringify }}</pre> <pre style="font-size: 10px;">{{ vm.folderStructure | stringify }}</pre>
</div> </div>
</div> </div>