1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-21 22:29:41 +02:00

Merge pull request #46 from documize/share-login-tify-up

Share login tidy up
This commit is contained in:
Harvey Kandola 2016-10-16 17:29:06 -07:00 committed by GitHub
commit 3019c6fa61
12 changed files with 147 additions and 101 deletions

View file

@ -47,6 +47,10 @@ export default Ember.Component.extend({
// TODO: refactor to eliminate self // TODO: refactor to eliminate self
let self = this; let self = this;
if (is.null(self.get('target'))) {
return;
}
let drop = this.get('tether').createDrop({ let drop = this.get('tether').createDrop({
target: document.getElementById(self.get('target')), target: document.getElementById(self.get('target')),
content: self.$(".dropdown-dialog")[0], content: self.$(".dropdown-dialog")[0],

View file

@ -44,7 +44,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
this.set('movedFolderOptions', targets); this.set('movedFolderOptions', targets);
}, },
didRender() { didRender() {
if (this.get('hasSelectedDocuments')) { if (this.get('hasSelectedDocuments')) {
this.addTooltip(document.getElementById("move-documents-button")); this.addTooltip(document.getElementById("move-documents-button"));
this.addTooltip(document.getElementById("delete-documents-button")); this.addTooltip(document.getElementById("delete-documents-button"));
@ -57,52 +57,14 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
this.addTooltip(document.getElementById("import-document-button")); this.addTooltip(document.getElementById("import-document-button"));
} }
} }
},
if (this.get('folderService').get('canEditCurrentFolder')) { didUpdate() {
let self = this; this.setupImport();
let folderId = this.get('folder.id'); },
let url = this.get('appMeta.endpoint');
let importUrl = `${url}/import/folder/${folderId}`;
let dzone = new Dropzone("#import-document-button > i", { didInsertElement() {
headers: { // this.setupImport();
'Authorization': 'Bearer ' + self.get('session.session.content.authenticated.token')
},
url: importUrl,
method: "post",
paramName: 'attachment',
acceptedFiles: ".doc,.docx,.txt,.md,.markdown",
clickable: true,
maxFilesize: 10,
parallelUploads: 3,
uploadMultiple: false,
addRemoveLinks: false,
autoProcessQueue: true,
init: function () {
this.on("success", function (document) {
self.send('onDocumentImported', document.name, document);
});
this.on("error", function (x) {
console.log("Conversion failed for ", x.name, " obj ", x); // TODO proper error handling
});
this.on("queuecomplete", function () {});
this.on("addedfile", function (file) {
self.send('onDocumentImporting', file.name);
self.audit.record('converted-document');
});
}
});
dzone.on("complete", function (file) {
dzone.removeFile(file);
});
this.set('drop', dzone);
}
}, },
willDestroyElement() { willDestroyElement() {
@ -114,6 +76,65 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
this.destroyTooltips(); this.destroyTooltips();
}, },
setupImport() {
// guard against unecessary file upload component init
if (this.get('hasSelectedDocuments') || !this.get('folderService').get('canEditCurrentFolder')) {
return;
}
// already done init?
if (is.not.null(this.get('drop'))) {
if (is.not.null(this.get('drop'))) {
this.get('drop').destroy();
this.set('drop', null);
}
}
let self = this;
let folderId = this.get('folder.id');
let url = this.get('appMeta.endpoint');
let importUrl = `${url}/import/folder/${folderId}`;
let dzone = new Dropzone("#import-document-button > i", {
headers: {
'Authorization': 'Bearer ' + self.get('session.session.content.authenticated.token')
},
url: importUrl,
method: "post",
paramName: 'attachment',
acceptedFiles: ".doc,.docx,.txt,.md,.markdown",
clickable: true,
maxFilesize: 10,
parallelUploads: 3,
uploadMultiple: false,
addRemoveLinks: false,
autoProcessQueue: true,
init: function () {
this.on("success", function (document) {
self.send('onDocumentImported', document.name, document);
});
this.on("error", function (x) {
console.log("Conversion failed for ", x.name, " obj ", x); // TODO proper error handling
});
this.on("queuecomplete", function () {});
this.on("addedfile", function (file) {
self.send('onDocumentImporting', file.name);
self.audit.record('converted-document');
});
}
});
dzone.on("complete", function (file) {
dzone.removeFile(file);
});
this.set('drop', dzone);
},
actions: { actions: {
onDocumentImporting(filename) { onDocumentImporting(filename) {
this.send("showNotification", `Importing ${filename}`); this.send("showNotification", `Importing ${filename}`);

View file

@ -29,9 +29,9 @@ export default Ember.Component.extend({
// Stage 1 - person name keypress handler // Stage 1 - person name keypress handler
$("#stage-1-firstname, #stage-1-lastname").keyup(function() { $("#stage-1-firstname, #stage-1-lastname").keyup(function() {
if (!$("#stage-1-firstname").val() || !$("#stage-1-lastname").val()) { if (!$("#stage-1-firstname").val() || !$("#stage-1-lastname").val()) {
$(".name-status").attr("src", "assets/img/onboard/person-red.png"); $(".name-status").attr("src", "/assets/img/onboard/person-red.png");
} else { } else {
$(".name-status").attr("src", "assets/img/onboard/person-green.png"); $(".name-status").attr("src", "/assets/img/onboard/person-green.png");
} }
}); });
@ -40,14 +40,14 @@ export default Ember.Component.extend({
if (!$("#stage-1-firstname").val()) { if (!$("#stage-1-firstname").val()) {
$("#stage-1-firstname").focus(); $("#stage-1-firstname").focus();
$("#stage-1-firstname").addClass("error"); $("#stage-1-firstname").addClass("error");
$(".name-status").attr("src", "assets/img/onboard/person-red.png"); $(".name-status").attr("src", "/assets/img/onboard/person-red.png");
return; return;
} }
if (!$("#stage-1-lastname").val()) { if (!$("#stage-1-lastname").val()) {
$("#stage-1-lastname").focus(); $("#stage-1-lastname").focus();
$("#stage-1-lastname").addClass("error"); $("#stage-1-lastname").addClass("error");
$(".name-status").attr("src", "assets/img/onboard/person-red.png"); $(".name-status").attr("src", "/assets/img/onboard/person-red.png");
return; return;
} }
@ -67,9 +67,9 @@ export default Ember.Component.extend({
$("#stage-2-password-confirm").keyup(function() { $("#stage-2-password-confirm").keyup(function() {
if ($("#stage-2-password").val().length < 6 || $("#stage-2-password").val().length > 50 || if ($("#stage-2-password").val().length < 6 || $("#stage-2-password").val().length > 50 ||
($("#stage-2-password").val() !== $("#stage-2-password-confirm").val())) { ($("#stage-2-password").val() !== $("#stage-2-password-confirm").val())) {
$(".password-status").attr("src", "assets/img/onboard/lock-red.png"); $(".password-status").attr("src", "/assets/img/onboard/lock-red.png");
} else { } else {
$(".password-status").attr("src", "assets/img/onboard/lock-green.png"); $(".password-status").attr("src", "/assets/img/onboard/lock-green.png");
} }
}); });
}); });
@ -91,7 +91,7 @@ export default Ember.Component.extend({
if ($("#stage-2-password-confirm").val() !== $("#stage-2-password").val()) { if ($("#stage-2-password-confirm").val() !== $("#stage-2-password").val()) {
$(".mismatch").show(); $(".mismatch").show();
$(".password-status").attr("src", "assets/img/onboard/lock-red.png"); $(".password-status").attr("src", "/assets/img/onboard/lock-red.png");
return; return;
} }

View file

@ -112,7 +112,7 @@
.no-sections { .no-sections {
text-align: center; text-align: center;
opacity: 0.4; opacity: 0.5;
> .box { > .box {
padding: 35px; padding: 35px;

View file

@ -6,7 +6,6 @@
table table
{ {
margin: 10px 20px 0 20px !important;
// width: auto !important; // width: auto !important;
@include border(1px); @include border(1px);
@ -43,37 +42,45 @@
font-family: "open_sanssemibold"; font-family: "open_sanssemibold";
} }
h1.doc-name {
font-size: 2em;
font-family: open_sansregular;
}
h1 h1
{ {
font-size: 1.6em; font-size: 1.6em;
font-family: open_sansregular; font-family: open_sanslight;
color:$color-off-black; color:$color-off-black;
margin: 30px 0 20px 0; margin: 30px 0 20px 0;
} }
h2 h2
{ {
font-size: 2rem; font-size: 1.5em;
margin: 30px 0 20px 0; margin: 30px 0 20px 0;
font-family: open_sansregular; font-family: open_sanslight;
} }
h3 h3
{ {
font-size: 1.6rem; font-size: 1.4rem;
margin: 30px 0 20px 0; margin: 30px 0 20px 0;
font-family: open_sanslight;
} }
h4 h4
{ {
font-size: 1.6rem; font-size: 1.3rem;
margin: 30px 0 20px 0; margin: 30px 0 20px 0;
font-family: open_sanslight;
} }
h5, h6, h7, h8, h9 h5, h6, h7, h8, h9
{ {
font-size: 1.4rem; font-size: 1.2rem;
margin: 30px 0 20px 0; margin: 30px 0 20px 0;
font-family: open_sanslight;
} }
h2, h3, h4, h5, h6, h7, h8, h9 h2, h3, h4, h5, h6, h7, h8, h9
@ -118,7 +125,7 @@
} }
td, td,
th { th {
border: 1px solid #dddddd; border: 1px solid #f3f5f8;
padding: 5px 7px !important; padding: 5px 7px !important;
} }
td:empty, td:empty,
@ -134,7 +141,7 @@
border-width: 2px; border-width: 2px;
} }
th { th {
background: #efefef; background: #f7f6f6;
} }
} }
} }

View file

@ -14,7 +14,7 @@
margin: 0 auto; margin: 0 auto;
> img { > img {
height: 40px; height: 60px;
margin: 40px 0; margin: 40px 0;
} }
} }

View file

@ -174,20 +174,24 @@
} }
.no-documents { .no-documents {
margin-top: 50px; margin-top: 150px;
text-align: center; text-align: center;
opacity: 0.4; opacity: 0.5;
background-image: url("/assets/img/no-documents.png");
background-repeat: no-repeat;
background-position: center;
> .box { > .box {
padding: 35px; max-width: 400px;
width: 300px; margin: 0 auto;
display: inline-block; border: 1px dashed #b3adad;
margin: 0 20px; padding: 20px;
> .message { > .message {
font-size: 14px; font-size: 14px;
color: $color-off-black; color: $color-off-black;
margin-top: 20px; margin-top: 20px;
line-height: 50px;
} }
> .regular-button { > .regular-button {

View file

@ -2,7 +2,7 @@
{ {
width: 100%; width: 100%;
text-align: left; text-align: left;
color: $color-primary; color: $color-off-black;
letter-spacing: 1px; letter-spacing: 1px;
.stage-1 .stage-1
@ -145,17 +145,18 @@
.sidebar .sidebar
{ {
padding: 50px 50px 0 50px; margin-left: -15px;
padding: 100px 50px 50px 50px;
overflow: auto; overflow: auto;
.logo .logo
{ {
height: 100px; height: 62px;
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 20px; margin-top: 20px;
} }
h1 h2
{ {
font-size: 2rem;; font-size: 2rem;;
color: $color-primary; color: $color-primary;
@ -165,6 +166,7 @@
p p
{ {
font-size: 1.3rem; font-size: 1.3rem;
color: $color-primary;
} }
p.note p.note
@ -179,8 +181,11 @@
height: 400px; height: 400px;
width: 500px; width: 500px;
margin-top: 200px; margin-top: 200px;
background-color: #eaeaea; background-color: #f6f9fc;
position: relative; position: relative;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 6px 20px 0 rgba(30,71,101,.1);
} }
input[type='email'], input[type='text'], input[type='password'] { input[type='email'], input[type='text'], input[type='password'] {

View file

@ -1,7 +1,7 @@
<div class="document-view"> <div class="document-view">
<div class="wysiwyg"> <div class="wysiwyg">
<h1>{{document.name}}</h1> <h1 class="doc-name">{{document.name}}</h1>
</div> </div>
{{#if document.template}} {{#if document.template}}
@ -64,11 +64,12 @@
{{#if noSections}} {{#if noSections}}
<div class="no-sections"> <div class="no-sections">
<div class="box"> <div class="box">
<div class="regular-button button-green"> <div class="message">Click the
<i class="material-icons">add</i> <div class="round-button-mono">
<div class="name">section</div> <i class="material-icons color-gray">add</i>
</div> <div class="name">section</div>
<div class="message">Add a new section to this document</div> </div>
to add a new section to this document</div>
</div> </div>
</div> </div>
{{/if}} {{/if}}

View file

@ -22,18 +22,16 @@
{{#if emptyState}} {{#if emptyState}}
<div class="no-documents"> <div class="no-documents">
<div class="box"> <div class="box">
<div class="regular-button button-transparent"> <h3>This space is empty</h3>
<i class="material-icons">add</i> <div class="message">Click the
<div class="name">space</div> <div class="round-button-mono">
<i class="material-icons color-gray">add</i>
</div> button to add a new document<br/>or
<div class="round-button-mono">
<i class="material-icons color-gray">file_upload</i>
</div>
to import .doc .docx, .txt .md files
</div> </div>
<div class="message">Create a new space for<br/>all your content</div>
</div>
<div class="box">
<div class="regular-button button-green">
<i class="material-icons">add</i>
<div class="name">content</div>
</div>
<div class="message">Start with a content template or <br/>import .doc .docx, .txt .md files</div>
</div> </div>
</div> </div>
{{/if}} {{/if}}

View file

@ -1,11 +1,10 @@
<div class="col-lg-4 col-md-4 col-sm-4"> <div class="col-lg-4 col-md-4 col-sm-4">
<div class="sidebar"> <div class="sidebar">
<img class="logo" src="/assets/img/logo-black.png" /> <img class="logo" src="/assets/img/logo-color.png"/>
<div class="stage-1"> <div class="stage-1">
<h1>Hello!</h1> <h2>Documize Sign-up</h2>
<p>Let's set up your account</p> <p>Let's set up your account</p>
<div class="input-control"> <div class="input-control">
<label>Firstname</label> <label>Firstname</label>
@ -23,7 +22,7 @@
</div> </div>
<div class="stage-2"> <div class="stage-2">
<h1>Password</h1> <h2>Password</h2>
<div class="input-control"> <div class="input-control">
<label>Password</label> <label>Password</label>
<div class="tip">Between 6 and 50 characters</div> <div class="tip">Between 6 and 50 characters</div>
@ -52,13 +51,19 @@
<div class="stage-1"> <div class="stage-1">
<div class="account-name-preview"> <div class="account-name-preview">
<div class="nav-icon"></div> <div class="nav-icon"></div>
<div class="title">DOCUMIZE</div><img class="name-status" src="/assets/img/onboard/person.png" /></div> <div class="title">DOCUMIZE</div>
<img class="name-status" src="/assets/img/onboard/person.png" />
</div>
</div> </div>
<div class="stage-2"> <div class="stage-2">
<div class="account-name-preview"> <div class="account-name-preview">
<div class="nav-icon"></div> <div class="nav-icon"></div>
<div class="title">DOCUMIZE</div><img class="password-status" src="/assets/img/onboard/lock.png" /></div> <div class="title">DOCUMIZE</div>
<img class="password-status" src="/assets/img/onboard/lock.png" />
</div>
</div> </div>
<div class="stage-3"> <div class="stage-3">
<div class="account-name-preview"> <div class="account-name-preview">
<div class="nav-icon"></div> <div class="nav-icon"></div>
@ -73,4 +78,5 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5 KiB