mirror of
https://github.com/ONLYOFFICE/document-server-integration.git
synced 2026-04-07 14:06:11 +08:00
python: redesign window upload
This commit is contained in:
Alexandr Fedorov
@ -31,6 +31,8 @@ ALLOWED_HOSTS = [
|
||||
'*'
|
||||
]
|
||||
|
||||
X_FRAME_OPTIONS = 'ALLOWALL'
|
||||
XS_SHARING_ALLOWED_METHODS = ['GET']
|
||||
|
||||
# Application definition
|
||||
|
||||
|
||||
@ -41,9 +41,8 @@ def upload(request):
|
||||
|
||||
try:
|
||||
fileInfo = request.FILES['uploadedFile']
|
||||
|
||||
if fileInfo.size > config.FILE_SIZE_MAX:
|
||||
raise Exception('File size is too big')
|
||||
if ((fileInfo.size > config.FILE_SIZE_MAX) | (fileInfo.size <= 0)):
|
||||
raise Exception('File size is incorrect')
|
||||
|
||||
curExt = fileUtils.getFileExt(fileInfo.name)
|
||||
if not docManager.isSupportedExt(curExt):
|
||||
@ -55,6 +54,7 @@ def upload(request):
|
||||
docManager.createFile(fileInfo.file, path, request, True)
|
||||
|
||||
response.setdefault('filename', name)
|
||||
response.setdefault('documentType', fileUtils.getFileType(name))
|
||||
|
||||
except Exception as e:
|
||||
response.setdefault('error', e.args[0])
|
||||
|
||||
@ -130,11 +130,6 @@ label .checkbox {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.try-descr {
|
||||
font-size: 16px;
|
||||
white-space : nowrap;
|
||||
}
|
||||
|
||||
.try-editor-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -172,47 +167,62 @@ label .checkbox {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.button, .button:visited, .button:hover, .button:active {
|
||||
.button,
|
||||
.button:visited,
|
||||
.button:hover,
|
||||
.button:active {
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
cursor:pointer;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 133%;
|
||||
padding: 8px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
cursor:pointer;
|
||||
border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
touch-callout: none;
|
||||
user-select: none;
|
||||
-o-touch-callout: none;
|
||||
-moz-touch-callout: none;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-right: 3px;
|
||||
padding: 4px 12px;
|
||||
|
||||
color: #fff;
|
||||
|
||||
background: #3D96C6;
|
||||
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #3D96C6;
|
||||
}
|
||||
|
||||
.button.disable {
|
||||
cursor: default;
|
||||
background: #BADDEF;
|
||||
border: 1px solid #BADDEF;
|
||||
#beginEdit {
|
||||
background: #FF6F3D;
|
||||
border: 1px solid #FF6F3D;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#beginEdit.disable {
|
||||
background: #EDC2B3;
|
||||
border: 1px solid #EDC2B3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#beginEdit:not(.disable):hover{
|
||||
background: #ff7a4b;
|
||||
}
|
||||
|
||||
.button.gray {
|
||||
background: #ebebeb;
|
||||
border: 1px solid #D0D0D0;
|
||||
color: #333;
|
||||
border: 1px solid #AAAAAA;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.button.gray.disable {
|
||||
border: 1px solid #E5E5E5;
|
||||
color: #B5B5B5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button.gray:not(.disable):hover {
|
||||
border: 1px solid #FF6F3D;
|
||||
color: #FF6F3D;
|
||||
}
|
||||
|
||||
.upload-panel {
|
||||
@ -257,9 +267,28 @@ label .checkbox {
|
||||
}
|
||||
|
||||
#mainProgress {
|
||||
color: #979b9f;
|
||||
color: #333333;
|
||||
display: none;
|
||||
margin: 15px;
|
||||
font-size: 12px;
|
||||
margin: 30px 40px;
|
||||
}
|
||||
|
||||
#mainProgress .uploadFileName{
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 160%;
|
||||
overflow: hidden;
|
||||
padding-left: 28px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#mainProgress .describeUpload {
|
||||
line-height: 150%;
|
||||
letter-spacing: -0.02em;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
#mainProgress #embeddedView {
|
||||
@ -275,55 +304,48 @@ label .checkbox {
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: url("../images/alert.png") no-repeat scroll 4px 10px #FFECE3;
|
||||
color: #666668 !important;
|
||||
background: url(../images/error.svg) no-repeat scroll 4px 10px;
|
||||
color: #CB0000;
|
||||
display: none;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 160%;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 5px 0;
|
||||
padding: 10px 10px 10px 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#mainProgress .error-message a {
|
||||
color: #666668;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.step {
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-color: transparent;
|
||||
color: #979B9F;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
padding-left: 25px;
|
||||
font-weight: bold;
|
||||
line-height: 167%;
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
.current {
|
||||
background-image: url("../images/loader16.gif");
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.done {
|
||||
background-image: url("../images/done.png");
|
||||
color: #333;
|
||||
background-image: url("../images/done.svg");
|
||||
}
|
||||
|
||||
.error {
|
||||
background-image: url("../images/alert.png");
|
||||
background-image: url("../images/notdone.svg");
|
||||
}
|
||||
|
||||
.step-descr {
|
||||
display: block;
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
#mainProgress .step-descr a {
|
||||
color: #979B9F;
|
||||
margin-left: 35px;
|
||||
font-size: 11px;
|
||||
line-height: 188%;
|
||||
}
|
||||
|
||||
.progress-descr {
|
||||
color: #333;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
#loadScripts {
|
||||
@ -371,7 +393,6 @@ footer a:hover {
|
||||
padding-left: 510px;
|
||||
}
|
||||
|
||||
|
||||
.help-block {
|
||||
margin: 48px 32px;
|
||||
}
|
||||
@ -403,15 +424,18 @@ footer a:hover {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stored-edit.word {
|
||||
.stored-edit.word,
|
||||
.uploadFileName.word {
|
||||
background-image: url("../images/icon_docx.svg");
|
||||
}
|
||||
|
||||
.stored-edit.cell {
|
||||
.stored-edit.cell,
|
||||
.uploadFileName.cell {
|
||||
background-image: url("../images/icon_xlsx.svg");
|
||||
}
|
||||
|
||||
.stored-edit.slide {
|
||||
.stored-edit.slide,
|
||||
.uploadFileName.slide {
|
||||
background-image: url("../images/icon_pptx.svg");
|
||||
}
|
||||
|
||||
@ -424,38 +448,29 @@ footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.stored-download {
|
||||
color: #787878;
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.stored-download:hover {
|
||||
color: #787878;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.blockTitle {
|
||||
background-color: #E2E2E2 !important;
|
||||
background-color: #333333 !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
-moz-border-radius: 0 !important;
|
||||
-webkit-border-radius: 0 !important;
|
||||
color: #333 !important;
|
||||
color: #F5F5F5 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: normal !important;
|
||||
padding: 15px 25px !important;
|
||||
font-weight: 600!important;
|
||||
line-height: 133%;
|
||||
letter-spacing: -0.02em;
|
||||
padding: 14px 16px 14px 46px !important;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
background: url("../images/close.png") no-repeat scroll left top #E2E2E2;
|
||||
background: url(../images/close.svg) no-repeat scroll left top;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 1px;
|
||||
height: 12px;
|
||||
height: 14px;
|
||||
line-height: 1px;
|
||||
margin-top: 4px;
|
||||
width: 12px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.blockPage {
|
||||
@ -475,15 +490,6 @@ footer a:hover {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.td100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.block-lang {
|
||||
padding-right: 10px;
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
.tableRow {
|
||||
background: transparent;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
@ -560,13 +566,6 @@ footer a:hover {
|
||||
width: 4%;
|
||||
}
|
||||
|
||||
.primaryRow {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.secondaryRow {
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.select-user {
|
||||
color: #444444;
|
||||
font-family: Open Sans;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 197 B |
@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.294404 0.294466C-0.0961199 0.68499 -0.0998005 1.32183 0.290724 1.71236L5.57837 7L5.57841 7.00005L0.29081 12.2877C-0.0997145 12.6782 -0.0960336 13.315 0.294491 13.7055C0.685015 14.0961 1.32186 14.0997 1.71238 13.7092L6.99999 8.42162L12.2876 13.7092C12.6781 14.0997 13.315 14.0961 13.7055 13.7055C14.096 13.315 14.0997 12.6782 13.7092 12.2877L8.42156 7.00005L8.42161 7L13.7093 1.71236C14.0998 1.32183 14.0961 0.68499 13.7056 0.294466C13.315 -0.0960591 12.6782 -0.0997395 12.2877 0.290785L7.00003 5.57843L6.99999 5.57847L6.99994 5.57843L1.7123 0.290785C1.32177 -0.0997395 0.684928 -0.0960591 0.294404 0.294466Z" fill="#AAAAAA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 781 B |
Binary file not shown.
|
Before Width: | Height: | Size: 631 B |
3
web/documentserver-example/python/static/images/done.svg
Normal file
3
web/documentserver-example/python/static/images/done.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3765 15.128C9.98789 15.5187 9.35642 15.5214 8.96449 15.134L6.14517 12.3473C5.75561 11.9622 5.12876 11.9622 4.7392 12.3473L4.72038 12.3659C4.32403 12.7576 4.32441 13.3978 4.72124 13.7891L8.96526 17.974C9.35702 18.3603 9.98726 18.3576 10.3757 17.9679L20.2877 8.02323C20.6801 7.6296 20.67 6.9855 20.2729 6.59668C19.8804 6.21243 19.2454 6.21063 18.8581 6.60005L10.3765 15.128Z" fill="#8BB825"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 507 B |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99857 1.6C4.46508 1.6 1.6 4.46548 1.6 8.00029C1.6 9.70508 2.26458 11.2515 3.35202 12.3999C4.52033 13.6337 6.16874 14.4 7.99857 14.4C11.5348 14.4 14.4 11.5335 14.4 8.00029C14.4 4.46592 11.5348 1.6 7.99857 1.6ZM0 8.00029C0 3.58219 3.58105 0 7.99857 0C12.4184 0 16 3.58219 16 8.00029C16 12.4172 12.4184 16 7.99857 16C5.71117 16 3.64805 15.0395 2.19023 13.5C0.83265 12.0663 0 10.1304 0 8.00029ZM7 4H9V9H7V4ZM9 10H7V12H9V10Z" fill="#CB0000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 593 B |
@ -0,0 +1,5 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.3">
|
||||
<path d="M10.3826 15.3872C9.9926 15.7862 9.35162 15.7889 8.95828 15.3933L6.15133 12.5701C5.76034 12.1768 5.12403 12.1768 4.73304 12.5701L4.70185 12.6015C4.31371 12.9918 4.31409 13.6225 4.7027 14.0124L8.95904 18.2831C9.35223 18.6776 9.99196 18.6749 10.3817 18.277L20.3062 8.14519C20.6903 7.75301 20.6865 7.12447 20.2976 6.73701L20.273 6.71257C19.8791 6.32014 19.2408 6.32437 18.8521 6.722L10.3826 15.3872Z" fill="#444444"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 549 B |
@ -40,10 +40,10 @@ if (typeof jQuery !== "undefined") {
|
||||
|
||||
jq.blockUI({
|
||||
theme: true,
|
||||
title: "Getting ready to load the file" + "<div class=\"dialog-close\"></div>",
|
||||
title: "File upload" + "<div class=\"dialog-close\"></div>",
|
||||
message: jq("#mainProgress"),
|
||||
overlayCSS: { "background-color": "#aaa" },
|
||||
themedCSS: { width: "656px", top: "20%", left: "50%", marginLeft: "-328px" }
|
||||
themedCSS: { width: "539px", top: "20%", left: "50%", marginLeft: "-269px" }
|
||||
});
|
||||
jq("#beginEdit, #beginView, #beginEmbedded").addClass("disable");
|
||||
|
||||
@ -63,6 +63,8 @@ if (typeof jQuery !== "undefined") {
|
||||
}
|
||||
|
||||
jq("#hiddenFileName").val(response.filename);
|
||||
jq("#uploadFileName").text(response.filename);
|
||||
jq("#uploadFileName").addClass(response.documentType);
|
||||
|
||||
jq("#step1").addClass("done").removeClass("current");
|
||||
jq("#step2").addClass("current");
|
||||
@ -205,12 +207,12 @@ if (typeof jQuery !== "undefined") {
|
||||
|
||||
jq(document).on("click", "#beginEmbedded:not(.disable)", function () {
|
||||
var fileId = encodeURIComponent(jq("#hiddenFileName").val());
|
||||
var url = UrlEditor + "?mode=embedded&filename=" + fileId;
|
||||
var url = UrlEditor + "?type=embedded&mode=embedded&filename=" + fileId;
|
||||
|
||||
jq("#mainProgress").addClass("embedded");
|
||||
jq("#beginEmbedded").addClass("disable");
|
||||
|
||||
jq("#embeddedView").attr("src", url);
|
||||
jq("#uploadSteps").after('<iframe id="embeddedView" src="' + url + '" height="345px" width="432px" frameborder="0" scrolling="no" allowtransparency></iframe>');
|
||||
});
|
||||
|
||||
jq(document).on("click", "#cancelEdit, .dialog-close", function () {
|
||||
|
||||
@ -219,30 +219,32 @@
|
||||
|
||||
<div id="mainProgress">
|
||||
<div id="uploadSteps">
|
||||
<span id="step1" class="step">1. Loading the file</span>
|
||||
<span class="step-descr">The file loading process will take some time depending on the file size, presence or absence of additional elements in it (macros, etc.) and the connection speed.</span>
|
||||
<span id="uploadFileName" class="uploadFileName"></span>
|
||||
<div class="describeUpload">After these steps are completed, you can work with your document.</div>
|
||||
<span id="step1" class="step">1. Loading the file.</span>
|
||||
<span class="step-descr">The loading speed depends on file size and additional elements it contains.</span>
|
||||
<br />
|
||||
<span id="step2" class="step">2. File conversion</span>
|
||||
<span class="step-descr">The file is being converted into Office Open XML format for the document faster viewing and editing.</span>
|
||||
<span id="step2" class="step">2. Conversion.</span>
|
||||
<span class="step-descr">The file is converted to OOXML so that you can edit it.</span>
|
||||
<br />
|
||||
<span id="step3" class="step">3. Loading editor scripts</span>
|
||||
<span class="step-descr">The scripts for the editor are loaded only once and are will be cached on your computer in future. It might take some time depending on the connection speed.</span>
|
||||
<span id="step3" class="step">3. Loading editor scripts.</span>
|
||||
<span class="step-descr">They are loaded only once, they will be cached on your computer.</span>
|
||||
<input type="hidden" name="hiddenFileName" id="hiddenFileName" />
|
||||
<br />
|
||||
<br />
|
||||
<span class="progress-descr">Please note, that the speed of all operations greatly depends on the server and the client locations. In case they differ or are located in differernt countries/continents, there might be lack of speed and greater wait time. The best results are achieved when the server and client computers are located in one and the same place (city).</span>
|
||||
<span class="progress-descr">Note the speed of all operations depends on your connection quality and server location.</span>
|
||||
<br />
|
||||
<br />
|
||||
<div class="error-message">
|
||||
<span></span>
|
||||
<b>Upload error: </b><span></span>
|
||||
<br />
|
||||
Please select another file and try again. If you have questions please <a href="mailto:sales@onlyoffice.com">contact us.</a>
|
||||
Please select another file and try again.
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div id="beginEmbedded" class="button disable">Embedded view</div>
|
||||
<div id="beginView" class="button disable">View</div>
|
||||
<div id="beginEdit" class="button disable">Edit</div>
|
||||
<div id="beginView" class="button gray disable">View</div>
|
||||
<div id="beginEmbedded" class="button gray disable">Embedded view</div>
|
||||
<div id="cancelEdit" class="button gray">Cancel</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user