pengjunjie/document-server-integration
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/document-server-integration.git synced 2026-04-07 14:06:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(csharp): convert button

Browse Source
This commit is contained in:
sshakndr
2024-10-22 13:34:27 +07:00
parent a5492d86c7
commit 96a787cd5d
7 changed files with 360 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/documentserver-example/csharp/App_Themes/images/convert.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4285 13C14.4102 13 14 13 14 13.5V15H6C5.44772 15 5 15.4477 5 16V17C5 17.5523 5.44771 18 6 18H14V19.5C14 20 14.3816 20 14.4285 20C14.6359 20 15.0099 19.9113 15.2172 19.7363L18.6207 17.0833C19.1264 16.6566 19.1264 16.3434 18.6207 15.9167L15.2172 13.2637C15.0099 13.0887 14.6359 13 14.4285 13Z" fill="#444444"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5715 4C9.58984 4 10 4 10 4.50002V6H18C18.5523 6 19 6.44772 19 7V8C19 8.55228 18.5523 9 18 9H10V10.5C10 11 9.61841 11 9.57151 11C9.36409 11 8.99012 10.9113 8.78279 10.7363L5.37934 8.08333C4.87356 7.65662 4.87356 7.34338 5.37934 6.91667L8.78279 4.26366C8.99012 4.08874 9.36409 4 9.5715 4Z" fill="#444444"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 821 B

75
web/documentserver-example/csharp/App_Themes/media.css
View File

@ -42,10 +42,14 @@
}
.tableHeaderCellViewers {
width: 29%;
width: 18%;
text-align: right;
}
.tableHeaderCellAction {
width: 23%;
}
.tableHeaderCellDownload {
width: 21%;
padding-right: 18px;
@ -220,7 +224,7 @@
}
.tableHeaderCellFileName {
width: 16%;
width: 9%;
}
.tableHeaderCellEditors {
@ -229,7 +233,12 @@
.tableHeaderCellViewers {
text-align: right;
width: 37%;
width: 9%;
}
.tableHeaderCellAction{
width: 11%;
padding-right: 82px;
}
.tableHeaderCellDownload {
@ -244,19 +253,24 @@
}
.tableHeaderCellEditors {
width: 26%;
width: 15%;
text-align: left;
}
.tableHeaderCellFileName {
width: 17%;
width: 28%;
}
.tableHeaderCellViewers {
width: 27%;
width: 6%;
text-align: right;
}
.tableHeaderCellAction{
width: 18%;
padding-right: 54px;
}
.tableHeaderCellDownload {
padding-right: 18px;
width: 20%;
@ -277,12 +291,17 @@
.tableRow td:first-child {
flex-grow: 0;
width: 15%;
width: 25%;
margin-right: auto;
}
.contentCells-icon {
width: 3%;
}
.firstContentCellViewers {
margin-left: 0;
}
}
@media (max-width: 890px) and (min-width: 769px ) {
@ -290,7 +309,7 @@
width: 20%;
}
.contentCells-shift {
padding-right: 28px;
padding-right: 27px;
}
.main-panel {
@ -323,11 +342,16 @@
.tableHeaderCellEditors {
text-align: left;
width: 31%;
width: 1%;
}
.tableHeaderCellViewers {
width: 18%;
width: 19%;
}
.tableHeaderCellAction {
width: 19%;
padding-right: 45px;
}
}
@ -429,8 +453,8 @@
.downloadContentCellShift {
max-width: 7%;
margin-right: -11px;
margin-left: auto;
margin-right: 24px;
margin-left: 0;
}
.contentCells-icon {
@ -438,13 +462,13 @@
}
.tableRow td:last-child {
width: 12%;
padding-right: 40px;
width: 7%;
padding-right: 0px;
border: none;
}
.contentCells-shift {
padding-right: 35px;
padding-right: 0px;
}
.downloadContentCellShift:after {
@ -530,6 +554,15 @@
height: 56px;
margin-bottom: 24px !important;
}
.button.hoar{
width: 18%;
height: 27px;
margin-bottom: 7px !important;
}
.button.converting{
width: 126px;
margin-top: 0;
}
}
@media (max-width: 560px) and (min-width: 510px) {
@ -538,7 +571,7 @@
}
.downloadContentCellShift {
padding-right: 45px;
padding-right: 16px;
max-width: 4%;
}
}
@ -558,7 +591,7 @@
.downloadContentCellShift {
max-width: 6%;
padding-right: 37px;
padding-right: 6px;
}
.firstContentCellShift {
@ -584,12 +617,12 @@
.downloadContentCellShift {
max-width: 3%;
padding-right: 37px;
padding-right: 0px;
padding-left: 0;
}
.firstContentCellShift {
margin-left: 1px;
margin-left: 2px;
flex-basis: 14%;
}
@ -619,7 +652,7 @@
.downloadContentCellShift {
max-width: 4%;
margin-right: -18px;
margin-right: 18px;
margin-left: -1px;
}
@ -628,7 +661,7 @@
}
.contentCells-icon{
width: 10%;
width: 12%;
}
footer table td {
margin: 0;

116
web/documentserver-example/csharp/App_Themes/stylesheet.css
View File

@ -238,6 +238,52 @@ label .checkbox {
color: #FF6F3D;
}
.button.converting {
margin-top: -20px;
padding: 16px 16px;
}
.button.converting.wide {
padding: 16px 29px;
}
.button.hoar {
background: #EFEFEF;
border: 1px solid #EFEFEF;
margin-right: 7px;
margin-bottom: 7px;
width: 13%;
padding-left: 0;
padding-right: 0;
font-size: 11px;
}
.button.hoar.disable {
opacity: 30%;
cursor: default;
}
.button.hoar:not(.disable):hover {
background: #FF6F3D;
border: 1px solid #FF6F3D;
color: #FFFFFF;
}
.button.hoar.orange {
background: #FF6F3D;
border: 1px solid #FF6F3D;
color: #FFFFFF;
cursor: default;
}
.button.hoar.orange.disable {
background: #444444;
border: 1px solid #444444;
color: #FFFFFF;
cursor: default;
opacity: 100%;
}
.button.file-type {
font-size: 11px;
color: #FFFFFF;
@ -380,6 +426,32 @@ label .checkbox {
display: none;
}
#convertingProgress {
color: #333333;
display: none;
font-size: 12px;
margin: 30px 35px;
}
#convertingProgress .convertFileName{
background-position: left center;
background-repeat: no-repeat;
display: block;
font-size: 14px;
line-height: 160%;
overflow: hidden;
padding-left: 28px;
margin-bottom: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
#convertingProgress .describeUpload {
line-height: 150%;
letter-spacing: -0.02em;
padding: 16px 0;
}
.error-message {
background: url("images/error.svg") no-repeat scroll 4px 10px;
color: #CB0000;
@ -401,6 +473,10 @@ label .checkbox {
padding-left: 35px;
}
.waiting {
opacity: 30%;
}
.current {
background-image: url("images/loader16.gif");
}
@ -413,6 +489,12 @@ label .checkbox {
background-image: url("images/notdone.svg");
}
.convertPercent {
color: #FF6F3D;
font-weight: 700;
display: inline;
}
.step-descr {
display: block;
margin-left: 35px;
@ -420,6 +502,10 @@ label .checkbox {
line-height: 188%;
}
.step-descr.disable {
display: none;
}
.progress-descr {
letter-spacing: -0.02em;
line-height: 150%;
@ -525,21 +611,25 @@ footer a:hover {
white-space: nowrap;
}
.convertFileName.word,
.stored-edit.word,
.uploadFileName.word {
background-image: url("images/icon_docx.svg");
}
.convertFileName.cell,
.stored-edit.cell,
.uploadFileName.cell {
background-image: url("images/icon_xlsx.svg");
}
.convertFileName.slide,
.stored-edit.slide,
.uploadFileName.slide {
background-image: url("images/icon_pptx.svg");
}
.convertFileName.pdf,
.stored-edit.pdf,
.uploadFileName.pdf {
background-image: url("images/icon_pdf.svg");
@ -596,6 +686,11 @@ footer a:hover {
visibility: hidden;
}
.convertTable {
margin-top: 10px;
margin-left: 35px;
}
.tableRow {
background: transparent;
-moz-transition: all 0.2s ease-in-out;
@ -642,6 +737,12 @@ footer a:hover {
width: 11%;
}
.tableHeaderCellAction{
width: 13%;
text-align: right;
padding-right: 88px;
}
.tableHeaderCellDownload {
width: 13%;
text-align: right;
@ -666,7 +767,7 @@ footer a:hover {
}
.contentCells-shift {
padding-right: 44px;
padding-right: 43px;
}
.contentCells-icon {
@ -730,7 +831,7 @@ footer a:hover {
width: 100%;
}
.icon-delete {
.icon-action {
cursor: pointer;
}
@ -809,6 +910,13 @@ html {
position: relative;
}
.typeButtonsRow {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
position: relative;
}
.tableRow td:first-child {
display: flex;
@ -817,11 +925,11 @@ html {
}
.tableHeaderCellFileName {
width: 30%;
width: 20%;
}
.tableHeaderCellEditors {
width: 28%;
width: 20%;
}
.tableHeaderCellViewers {