diff --git a/web/documentserver-example/php/css/images/file_docx.png b/web/documentserver-example/php/css/images/file_docx.png deleted file mode 100644 index 5947d7ca..00000000 Binary files a/web/documentserver-example/php/css/images/file_docx.png and /dev/null differ diff --git a/web/documentserver-example/php/css/images/file_docx.svg b/web/documentserver-example/php/css/images/file_docx.svg new file mode 100644 index 00000000..751395f6 --- /dev/null +++ b/web/documentserver-example/php/css/images/file_docx.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/web/documentserver-example/php/css/images/file_pptx.png b/web/documentserver-example/php/css/images/file_pptx.png deleted file mode 100644 index 426be1d9..00000000 Binary files a/web/documentserver-example/php/css/images/file_pptx.png and /dev/null differ diff --git a/web/documentserver-example/php/css/images/file_pptx.svg b/web/documentserver-example/php/css/images/file_pptx.svg new file mode 100644 index 00000000..deba611b --- /dev/null +++ b/web/documentserver-example/php/css/images/file_pptx.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/web/documentserver-example/php/css/images/file_upload.png b/web/documentserver-example/php/css/images/file_upload.png deleted file mode 100644 index 5566e6dd..00000000 Binary files a/web/documentserver-example/php/css/images/file_upload.png and /dev/null differ diff --git a/web/documentserver-example/php/css/images/file_upload.svg b/web/documentserver-example/php/css/images/file_upload.svg new file mode 100644 index 00000000..3617f42e --- /dev/null +++ b/web/documentserver-example/php/css/images/file_upload.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/documentserver-example/php/css/images/file_xlsx.png b/web/documentserver-example/php/css/images/file_xlsx.png deleted file mode 100644 index a5f3b7c6..00000000 Binary files a/web/documentserver-example/php/css/images/file_xlsx.png and /dev/null differ diff --git a/web/documentserver-example/php/css/images/file_xlsx.svg b/web/documentserver-example/php/css/images/file_xlsx.svg new file mode 100644 index 00000000..7ee32b7b --- /dev/null +++ b/web/documentserver-example/php/css/images/file_xlsx.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/documentserver-example/php/css/images/icon_docx.png b/web/documentserver-example/php/css/images/icon_docx.png deleted file mode 100644 index 854d4ae4..00000000 Binary files a/web/documentserver-example/php/css/images/icon_docx.png and /dev/null differ diff --git a/web/documentserver-example/php/css/images/icon_docx.svg b/web/documentserver-example/php/css/images/icon_docx.svg new file mode 100644 index 00000000..4772f3fc --- /dev/null +++ b/web/documentserver-example/php/css/images/icon_docx.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/documentserver-example/php/css/images/icon_pptx.png b/web/documentserver-example/php/css/images/icon_pptx.png deleted file mode 100644 index 084235ec..00000000 Binary files a/web/documentserver-example/php/css/images/icon_pptx.png and /dev/null differ diff --git a/web/documentserver-example/php/css/images/icon_pptx.svg b/web/documentserver-example/php/css/images/icon_pptx.svg new file mode 100644 index 00000000..f799557b --- /dev/null +++ b/web/documentserver-example/php/css/images/icon_pptx.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/documentserver-example/php/css/images/icon_xlsx.png b/web/documentserver-example/php/css/images/icon_xlsx.png deleted file mode 100644 index edfa88fa..00000000 Binary files a/web/documentserver-example/php/css/images/icon_xlsx.png and /dev/null differ diff --git a/web/documentserver-example/php/css/images/icon_xlsx.svg b/web/documentserver-example/php/css/images/icon_xlsx.svg new file mode 100644 index 00000000..db0a7b1d --- /dev/null +++ b/web/documentserver-example/php/css/images/icon_xlsx.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/documentserver-example/php/css/images/logo.svg b/web/documentserver-example/php/css/images/logo.svg index eaace216..58020531 100644 --- a/web/documentserver-example/php/css/images/logo.svg +++ b/web/documentserver-example/php/css/images/logo.svg @@ -1,15 +1,15 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/web/documentserver-example/php/css/stylesheet.css b/web/documentserver-example/php/css/stylesheet.css index af744e37..f977d28c 100644 --- a/web/documentserver-example/php/css/stylesheet.css +++ b/web/documentserver-example/php/css/stylesheet.css @@ -20,58 +20,109 @@ html { height: 100%; width: 100%; } + body { - background: #fff; - color: #333; - font-family: 'Open Sans', sans-serif; + background: #FFFFFF; + color: #333333; + font-family: Open Sans; font-size: 12px; + font-style: normal; font-weight: normal; height: 100%; margin: 0; padding: 0; text-decoration: none; } + form { height: 100%; } + div { margin: 0; padding: 0; } -a, a:hover, a:visited { - color: #333; + +a, +a:hover, +a:visited { + color: #333333; } + header { - height: 44px; - background: #3D4A6B; - height: 80px; + background: #333333; + height: 72px; margin: 0 auto; - min-width: 600px; + min-width: 1152px; width: auto; } header img { - margin: 12px 0 0 16px; + margin: 22px 0 22px 32px; +} + +.center { + margin: 0 auto 0; + width: 1152px; +} + +.main{ + height: calc(100% - 136px); + min-height: 549px; +} + +.table-main { + border-spacing: 0; + height: 100%; + min-height: 549px; +} + +.section{ + height: 100%; + padding: 0; + vertical-align: top; } .main-panel { - margin: 80px auto 16px; - width: 600px; + box-sizing: border-box; + -moz-box-sizing: border-box; + height: 100%; + list-style: none; + padding: 48px 32px; + position: relative; + width: 896px; } + .portal-name { - font-size: 20px; + color: #FF6F3D; + font-size: 24px; + font-weight: bold; + line-height: 133%; + letter-spacing: -0.02em; } + .portal-descr { display: inline-block; - line-height: 20px; - margin-bottom: 24px; - width: 600px; + font-size: 16px; + line-height: 160%; + margin-top: 16px; } + +.header-list { + font-weight: bold; + font-size: 16px; + line-height: 133%; + letter-spacing: -0.02em; +} + .save-original { margin-left: 30px; } + label .checkbox { + margin: 0 5px 3px 0; vertical-align: middle; + cursor: pointer; } @@ -82,37 +133,39 @@ label .checkbox { .try-editor-list { list-style: none; - margin: 0 0 16px; + margin: 0; padding: 0; } + .try-editor-list li { - float: left; - margin: 0 15px; - width: 100px; + margin-bottom: 12px } + .try-editor { background-color: transparent; - background-position: center 0; background-repeat: no-repeat; display: block; font-size: 14px; - font-weight: bold; - height: 45px; - padding-top: 100px; - text-align: center; + line-height: 40px; + padding-left: 42px; text-decoration: none; } + .try-editor.word { - background-image: url("images/file_docx.png"); + background-image: url("images/file_docx.svg"); } + .try-editor.cell { - background-image: url("images/file_xlsx.png"); + background-image: url("images/file_xlsx.svg"); } + .try-editor.slide { - background-image: url("images/file_pptx.png"); + background-image: url("images/file_pptx.svg"); } + .create-sample { - margin-left: 75px; + color: #666666; + line-height: 24px; } .button, .button:visited, .button:hover, .button:active { @@ -158,54 +211,65 @@ label .checkbox { } .upload-panel { - border-right: 1px solid #D1D1D1; float: left; - margin-right: 25px; + padding: 24px 0; } + .file-upload { - background: url("images/file_upload.png") no-repeat center 0 transparent; + background: url("images/file_upload.svg") no-repeat 0 transparent; cursor: pointer; - display: inline-block; + display: block; font-size: 14px; - font-weight: bold; - height: 45px; - margin: 0 40px 16px; + line-height: 40px; overflow: hidden; - padding-top: 100px; + padding-left: 42px; position: relative; - text-align: center; - width: 100px; + width: 150px; } + .file-upload input { cursor: pointer; + height: 40px; + margin: 0; + opacity: 0; opacity: 0; position: absolute; right: 0; top: 0; - transform: translate(555px, 60px) scale(8); + transform: translate(0px, -21px) scale(2); + width: 192px; } + .create-panel { float: left; + padding: 16px 0; } + .upload-panel, .create-panel { - padding: 10px 0; + width: 100%; + border-bottom: 1px solid #D0D5DA; } + #mainProgress { color: #979b9f; display: none; margin: 15px; } + #mainProgress #embeddedView { display: none; } + #mainProgress.embedded #embeddedView { display: block; } + #mainProgress.embedded #uploadSteps { display: none; } + .error-message { background: url("images/alert.png") no-repeat scroll 4px 10px #FFECE3; color: #666668 !important; @@ -216,9 +280,11 @@ label .checkbox { padding: 10px 10px 10px 30px; vertical-align: middle; } + #mainProgress .error-message a { color: #666668; } + .step { background-repeat: no-repeat; background-position: left center; @@ -228,98 +294,130 @@ label .checkbox { line-height: 30px; padding-left: 25px; } + .current { background-image: url("images/loader16.gif"); color: #333; } + .done { background-image: url("images/done.png"); color: #333; } + .error { background-image: url("images/alert.png"); } + .step-descr { display: block; margin-left: 45px; } + #mainProgress .step-descr a { color: #979B9F; } + .progress-descr { color: #333; } + #loadScripts { display: none; } + #iframeScripts { position: absolute; visibility: hidden; } + footer { - text-align: right; + background: #333333; + color: #AAAAAA; + height: 64px; + min-width: 1152px; width: auto; - margin-bottom: 15px; - margin-right: 15px; } + +footer table { + border-spacing: 0; +} + +footer table tr { + height: 64px; +} + +footer table td { + padding-left: 32px; +} + +footer a, +footer a:hover, +footer a:visited { + color: #FF6F3D; + font-size: 14px; + line-height: 120%; +} + +footer a:hover { + text-decoration: none; +} + +.copy { + padding-left: 510px; +} + +.help-block { + margin: 48px 32px; +} + .help-block span { - font-size: 16px; - line-height: 26px; + font-size: 14px; + font-weight: 600; + line-height: 19px; } .stored-list { - border-top: 1px solid #D1D1D1; list-style: none; - margin: 0; padding: 0; + position: relative; + height: 100%; } -.stored-list li { - border-bottom: 1px solid #D1D1D1; - line-height: 28px; - padding: 0 8px; -} + .stored-edit { background-color: transparent; background-position: left center; background-repeat: no-repeat; display: inline-block; height: 16px; - max-width: 200px; - margin-bottom: -6px; + max-width: 250px; overflow: hidden; - padding: 8px 0 1px 34px; + padding: 8px 0 1px 26px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } + .stored-edit.word { - background-image: url("images/icon_docx.png"); + background-image: url("images/icon_docx.svg"); } + .stored-edit.cell { - background-image: url("images/icon_xlsx.png"); + background-image: url("images/icon_xlsx.svg"); } + .stored-edit.slide { - background-image: url("images/icon_pptx.png"); + background-image: url("images/icon_pptx.svg"); } + .stored-edit span { font-size: 12px; line-height: 12px; - vertical-align: top; } + .stored-edit:hover span { 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; @@ -359,95 +457,120 @@ footer { visibility: hidden; } -.td100 { - width: 100%; -} - -.block-lang { - padding-right: 10px; - padding-top: 9px; -} -/*Icon table*/ -#tableRow { - vertical-align: top; -} .tableRow { background: transparent; - -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } + .tableRow:hover { - background-color: #ebebeb; + background-color: #ECECEC; } .tableHeader { + padding-top: 10px; +} + +.tableHeader tr{ background: transparent; - color: #333; cursor: default; - font-family: 'Open Sans', sans-serif; - font-size: 13px; height: 40px; -khtml-user-select: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; } + .tableHeaderCell { - padding: 2px 1px 2px 5px; + border-bottom: 1px solid #CCCCCC; + padding: 2px 4px; text-align: center; } + .tableHeaderCellFileName { text-align: left; + width: 37%; } + +.tableHeaderCellEditors{ + width: 29%; +} + +.tableHeaderCellViewers{ + width: 11%; +} + +.tableHeaderCellDownload{ + width: 13%; + text-align: right; + padding-right: 20px; +} + +.tableHeaderCellRemove{ + text-align: left; +} + .contentCells { - padding: 4px 1px 4px 5px; + border-bottom: 1px solid #EFEFEF; font-family: 'Open Sans', sans-serif; font-size: 16px; - border-bottom: 1px solid #e5e5e5; + padding: 4px; white-space: nowrap; -khtml-user-select: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; } + .contentCells-shift { - padding-right: 30px; + padding-right: 44px; } + .contentCells-icon { - width: 6%; -} -.contentCellsSmall { - padding: 5px 1px 5px 6px; - font-family: 'Open Sans', sans-serif; - font-size: 13px; - border-bottom: 1px solid #e5e5e5; - white-space: nowrap; - text-align: center; + width: 4%; } + .primaryRow { background-color: #e9e9e9; } .secondaryRow { background-color: #F9F9F9; } + .select-user { - margin-left: 15px; + color: #444444; + font-family: Open Sans; + font-size: 12px!important; + font-weight: normal!important; + line-height: 16px!important; } + .user-block-table { height: 100%; + padding: 14px 0; width: 100%; } + .user-block-table td { background-color: #F4F4F4; - border-bottom: 1px solid white; - padding: 12px 0; + padding-top: 10px; } -#user, #language { - width: 130px; + +.user-block-table td select { + border: 1px solid #D0D5DA; + box-sizing: border-box; + border-radius: 3px; + cursor: pointer; +} + +#user, +#language { + width: 100%; + margin-top: 5px; + padding-left: 5px; } .icon-download { margin-bottom: -5px; @@ -456,3 +579,29 @@ footer { cursor: pointer; margin-bottom: -6px; } + +.left-panel { + width: 256px; + background: #F5F5F5; +} + +.scroll-table-body { + bottom: 0; + left: 0; + margin-top: 0px; + overflow-x: auto; + position: absolute; + right: 0; + top: 71px; + scrollbar-color: #D0D5DA transparent; + scrollbar-width: thin; +} + +.scroll-table-body::-webkit-scrollbar { + width: 4px; +} + +.scroll-table-body::-webkit-scrollbar-thumb { + background: #D0D5DA; + border-radius: 3px; +} diff --git a/web/documentserver-example/php/index.php b/web/documentserver-example/php/index.php index 40617bab..be05546e 100644 --- a/web/documentserver-example/php/index.php +++ b/web/documentserver-example/php/index.php @@ -38,287 +38,280 @@ + + +
+
+
+ + ONLYOFFICE + +
+
+
+ + + + + + + +
+
+ Create new +
+
+ + +
+
+ Upload file + + +
+ + + + + + + + +
+ Username + +
+ Language + +
+
+
+ 		+
+ + ONLYOFFICE Document Editors – Welcome! + + Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors. +
You may upload your own documents for testing using the "Upload file" button and selecting the necessary files on your PC. + + +
+ Your documents + + + + + + + + + + +
FilenameEditorsViewersDownloadRemove
+
+ + + name.'">'; + echo ' '; + echo ' '; + echo ' '; + echo ' '; + echo ' '; + echo ' '; + echo ' '; + echo ' '; + echo ' '; + echo ' '; + echo ' '; + echo ''; + } ?> + +
'; + echo ' '; + echo ' '.$storeFile->name.''; + echo ' '; + echo ' '; + echo ' '; + echo ' Open in editor for full size screens'; + echo ' '; + echo ' '; + echo ' '; + echo ' Open in editor for mobile devices'; + echo ' '; + echo ' '; + if ($storeFile->documentType == "word") { + echo ' '; + echo ' Open in editor for review'; + echo ' '; + } else if ($storeFile->documentType == "cell") { + echo ' '; + echo ' Open in editor without access to change the filter'; + echo ' '; + } + echo ' '; + echo ' '; + echo ' Open in editor for comment'; + echo ' '; + echo ' '; + if ($storeFile->documentType == "word") { + echo ' '; + echo ' Open in editor for filling in forms'; + echo ' '; + } + echo ' '; + if ($storeFile->documentType == "word") { + echo ' '; + echo ' Open in editor without content control modification'; + echo ' '; + } + echo ' '; + echo ' '; + echo ' Open in viewer for full size screens'; + echo ' '; + echo ' '; + echo ' '; + echo ' Open in viewer for mobile devices'; + echo ' '; + echo ' '; + echo ' '; + echo ' Open in embedded mode'; + echo ' '; + echo ' '; + echo ' '; + echo ' Download'; + echo ' '; + echo ' '; + echo ' '; + echo ' Delete'; + echo ' '; + echo '
+
+
+ +
+
+
+ +
+
+ 1. Loading the file + 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. +
+ 2. File conversion + The file is being converted into Office Open XML format for the document faster viewing and editing. +
+ 3. Loading editor scripts + 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. + +
+
+ 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). +
+
+
+ +
+ Please select another file and try again. If you have questions please contact us. +
+
+ +
+
Embedded view
+
View
+ + +
Edit
+ +
Cancel
+
+ + + + +
- - - - - - + - - -
-
- - ONLYOFFICE - -
-
- ONLYOFFICE Document Editors – Welcome! -
-
- Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors. You may upload your own documents for testing using the "Upload file" button and selecting the necessary files on your PC. - - - - - - - - - - -
- Username: - - Select user name before opening the document; you can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.
- - Choose the language for ONLYOFFICE editors interface.
-
-
- -
- Upload your file or create new file -
-
-
-
- Upload -
- File - - -
- -
-
- - -
-
-
-
-
- -
- Your documents -
-
- -
-
- - - - - - - - - - name.'">'; - echo ' '; - - echo ' '; - echo ' '; - echo ' '; - echo ' '; - echo ' '; - - echo ' '; - echo ' '; - echo ' '; - echo ''; - } - ?> - -
FilenameEditorsViewers
'; - echo ' '; - echo ' '.$storeFile->name.''; - echo ' '; - echo ' '; - echo ' Download'; - echo ' '; - echo ' '; - echo ' Delete'; - echo ' '; - echo ' '; - echo ' '; - echo ' Open in editor for full size screens'; - echo ' '; - echo ' '; - echo ' '; - echo ' Open in editor for mobile devices'; - echo ' '; - echo ' '; - if ($storeFile->documentType == "word") { - echo ' '; - echo ' Open in editor for review'; - echo ' '; - } else if ($storeFile->documentType == "cell") { - echo ' '; - echo ' Open in editor without access to change the filter'; - echo ' '; - } - echo ' '; - echo ' '; - echo ' Open in editor for comment'; - echo ' '; - echo ' '; - if ($storeFile->documentType == "word") { - echo ' '; - echo ' Open in editor for filling in forms'; - echo ' '; - } - echo ' '; - if ($storeFile->documentType == "word") { - echo ' '; - echo ' Open in editor without content control modification'; - echo ' '; - } - echo ' '; - echo ' '; - echo ' Open in viewer for full size screens'; - echo ' '; - echo ' '; - echo ' '; - echo ' Open in viewer for mobile devices'; - echo ' '; - echo ' '; - echo ' '; - echo ' Open in embedded mode'; - echo ' '; - echo '
-
-
- -
- -
-
-
-
- Want to learn the magic? -
- Explore ONLYOFFICE Document Editors API Documentation. -
-
-
-
-
- Any questions? -
- Please, submit your request here. -
-
- -
-
- 1. Loading the file - 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. -
- 2. File conversion - The file is being converted into Office Open XML format for the document faster viewing and editing. -
- 3. Loading editor scripts - 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. - -
-
- 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). -
-
-
- -
- Please select another file and try again. If you have questions please contact us. -
-
- -
-
Embedded view
-
View
- - -
Edit
- -
Cancel
-
- - - - - -