Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Change new file panel

Browse source
This commit is contained in:
Julia Radzhabova 2020-06-18 14:43:26 +03:00
parent 58ede4c140
commit 1c80bea9fd
23 changed files with 154 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
apps/common/main/resources/img/doc-formats/blank.svg
View file

@ -1,15 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127">
<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
<symbol id="svg-format-blank">
<path d="M95 23V119C95 119.796 94.6839 120.559 94.1213 121.121C93.5587 121.684 92.7956 122 92 122H8C7.20435 122 6.44129 121.684 5.87868 121.121C5.31607 120.559 5 119.796 5 119V8C5 7.20435 5.31607 6.44129 5.87868 5.87868C6.44129 5.31607 7.20435 5 8 5H77L95 23Z" fill="white"/>
<path opacity="0.2" d="M77 5H8C7.20435 5 6.44129 5.31607 5.87868 5.87868C5.31607 6.44129 5 7.20435 5 8V119C5 119.796 5.31607 120.559 5.87868 121.121C6.44129 121.684 7.20435 122 8 122H92C92.7956 122 93.5587 121.684 94.1213 121.121C94.6839 120.559 95 119.796 95 119V23L77 5ZM94 119C94 119.53 93.7893 120.039 93.4142 120.414C93.0391 120.789 92.5304 121 92 121H8C7.46957 121 6.96086 120.789 6.58579 120.414C6.21071 120.039 6 119.53 6 119V8C6 7.46957 6.21071 6.96086 6.58579 6.58579C6.96086 6.21071 7.46957 6 8 6H76.59L77 6.41V20C77 20.7956 77.3161 21.5587 77.8787 22.1213C78.4413 22.6839 79.2044 23 80 23H93.59L94 23.41V119Z" fill="black"/>
<g opacity="0.2">
<path opacity="0.2" d="M75 86H50V88H75V86Z" fill="black"/>
<path opacity="0.2" d="M75 80H25V82H75V80Z" fill="black"/>
<path opacity="0.2" d="M75 74H25V76H75V74Z" fill="black"/>
<path opacity="0.2" d="M75 68H25V70H75V68Z" fill="black"/>
<path opacity="0.2" d="M75 62H25V64H75V62Z" fill="black"/>
<path opacity="0.2" d="M49 43H25V45H49V43Z" fill="black"/>
<path opacity="0.2" d="M44 37H25V39H44V37Z" fill="black"/>
</g>
<clipPath id="a">
<path d="m0 0h96v96h-96z"/>
</clipPath>
<g clip-path="url(#a)">
<path d="m.499997 94 .000003-74c0-.8284.67157-1.5 1.5-1.5h92c.8284 0 1.5.6716 1.5 1.5v74c0 .8284-.6716 1.5-1.5 1.5h-92c-.82843 0-1.500003-.6716-1.500003-1.5z" fill="#fff" stroke="#bfbfbf"/>
</g>
</symbol>
</svg>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 440 B

6
apps/documenteditor/main/app/view/FileMenuPanels.js
View file

@ -718,8 +718,8 @@ define([
'<h3 style="margin-top: 20px;"><%= scope.fromBlankText %></h3><hr noshade />',
'<div class="blank-document">',
'<div class="blank-document-btn">',
'<svg class="btn-doc-format">',
'<use xlink:href="#svg-format-docx"></use>',
'<svg class="btn-blank-format">',
'<use xlink:href="#svg-format-blank"></use>',
'</svg>',
'</div>',
'<div class="blank-document-info">',
@ -735,7 +735,7 @@ define([
'<% if (!_.isEmpty(item.image)) { %> ',
' style="background-image: url(<%= item.image %>);">',
'<% } else { ' +
'print(\"><svg class=\'btn-doc-format\'><use xlink:href=\'#svg-format-blank\'></use></svg>\")' +
'print(\"><svg class=\'btn-blank-format\'><use xlink:href=\'#svg-file-template\'></use></svg>\")' +
' } %>',
'</div>',
'<div class="title"><%= Common.Utils.String.htmlEncode(item.title || item.name || "") %></div>',

3
apps/documenteditor/main/index.html
View file

@ -269,8 +269,9 @@
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/ott.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/rtf.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/html.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
<img class="inline-svg" src="resources/img/blank.svg">
<img class="inline-svg" src="resources/img/recent-file.svg">
<img class="inline-svg" src="resources/img/file-template.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

4
apps/documenteditor/main/index.html.deploy
View file

@ -291,11 +291,11 @@
<inline src="resources/img/doc-formats/ott.svg" />
<inline src="resources/img/doc-formats/rtf.svg" />
<inline src="resources/img/doc-formats/html.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<inline src="resources/img/recent-file.svg" />
<inline src="resources/img/file-template.svg" />
<inline src="resources/img/blank.svg" />
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>
</body>

3
apps/documenteditor/main/index_loader.html
View file

@ -270,8 +270,9 @@
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/ott.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/rtf.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/html.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
<img class="inline-svg" src="resources/img/blank.svg">
<img class="inline-svg" src="resources/img/recent-file.svg">
<img class="inline-svg" src="resources/img/file-template.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

3
apps/documenteditor/main/index_loader.html.deploy
View file

@ -313,10 +313,11 @@
<inline src="resources/img/doc-formats/ott.svg" />
<inline src="resources/img/doc-formats/rtf.svg" />
<inline src="resources/img/doc-formats/html.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<inline src="resources/img/recent-file.svg" />
<inline src="resources/img/file-template.svg" />
<inline src="resources/img/blank.svg" />
<div id="viewport"></div>
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>

5
apps/documenteditor/main/resources/img/blank.svg Normal file
View file

@ -0,0 +1,5 @@
<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
<symbol id="svg-format-blank">
<path d="m85 95.5h-74c-.8284 0-1.5-.6716-1.5-1.5v-92c0-.82843.6716-1.5 1.5-1.5h74c.8284 0 1.5.67157 1.5 1.5v92c0 .8284-.6716 1.5-1.5 1.5z" fill="#fff" stroke="#bfbfbf"/>
</symbol>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 314 B

15
apps/documenteditor/main/resources/img/file-template.svg Normal file
View file

@ -0,0 +1,15 @@
<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
<symbol id="svg-file-template">
<path d="m85 95.5h-74c-.8284 0-1.5-.6716-1.5-1.5v-92c0-.82843.6716-1.5 1.5-1.5h74c.8284 0 1.5.67157 1.5 1.5v92c0 .8284-.6716 1.5-1.5 1.5z" fill="#fff" stroke="#bfbfbf"/>
<g fill="#444">
<rect height="4" opacity=".2" rx="1" width="46" x="25" y="32"/>
<rect height="6" opacity=".4" rx="1" width="46" x="25" y="20"/>
<rect height="20" opacity=".2" rx="1" width="16" x="55" y="40"/>
<rect height="4" opacity=".2" rx="1" width="26" x="25" y="40"/>
<rect height="4" opacity=".2" rx="1" width="26" x="25" y="48"/>
<rect height="4" opacity=".2" rx="1" width="26" x="25" y="56"/>
<rect height="4" opacity=".2" rx="1" width="46" x="25" y="64"/>
<rect height="4" opacity=".2" rx="1" width="46" x="25" y="72"/>
</g>
</symbol>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 892 B

19
apps/documenteditor/main/resources/less/filemenu.less
View file

@ -109,6 +109,17 @@
}
}
.btn-blank-format {
display: block;
width: 96px;
height: 96px;
cursor: pointer;
svg&:hover {
opacity:0.85;
}
}
#panel-settings {
#file-menu-panel & {
padding: 0 30px;
@ -174,8 +185,8 @@
display: inline-block;
margin: 25px 20px 65px;
width: 102px;
height: 128px;
width: 96px;
height: 96px;
cursor: pointer;
}
@ -194,8 +205,8 @@
cursor: pointer;
.thumb {
width: 102px;
height: 128px;
width: 96px;
height: 96px;
background-repeat: no-repeat;
background-position: center;
}

6
apps/presentationeditor/main/app/view/FileMenuPanels.js
View file

@ -625,8 +625,8 @@ define([
'<h3 style="margin-top: 20px;"><%= scope.fromBlankText %></h3><hr noshade />',
'<div class="blank-document">',
'<div class="blank-document-btn">',
'<svg class="btn-doc-format">',
'<use xlink:href="#svg-format-pptx"></use>',
'<svg class="btn-blank-format">',
'<use xlink:href="#svg-format-blank"></use>',
'</svg>',
'</div>',
'<div class="blank-document-info">',
@ -642,7 +642,7 @@ define([
'<% if (!_.isEmpty(item.image)) { %> ',
' style="background-image: url(<%= item.image %>);">',
'<% } else { ' +
'print(\"><svg class=\'btn-doc-format\'><use xlink:href=\'#svg-format-blank\'></use></svg>\")' +
'print(\"><svg class=\'btn-blank-format\'><use xlink:href=\'#svg-file-template\'></use></svg>\")' +
' } %>',
'</div>',
'<div class="title"><%= Common.Utils.String.htmlEncode(item.title || item.name || "") %></div>',

1
apps/presentationeditor/main/index.html
View file

@ -296,6 +296,7 @@
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="resources/img/recent-file.svg">
<img class="inline-svg" src="resources/img/file-template.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/presentationeditor/main/index.html.deploy
View file

@ -340,6 +340,7 @@
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<inline src="resources/img/recent-file.svg" />
<inline src="resources/img/file-template.svg" />
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>

1
apps/presentationeditor/main/index_loader.html
View file

@ -260,6 +260,7 @@
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="resources/img/recent-file.svg">
<img class="inline-svg" src="resources/img/file-template.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/presentationeditor/main/index_loader.html.deploy
View file

@ -314,6 +314,7 @@
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<inline src="resources/img/recent-file.svg" />
<inline src="resources/img/file-template.svg" />
<div id="viewport"></div>

21
apps/presentationeditor/main/resources/img/file-template.svg Normal file
View file

@ -0,0 +1,21 @@
<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
<symbol id="svg-file-template">
<clipPath id="a">
<path d="m0 0h96v96h-96z"/>
</clipPath>
<g clip-path="url(#a)">
<path d="m.499997 94 .000003-74c0-.8284.67157-1.5 1.5-1.5h92c.8284 0 1.5.6716 1.5 1.5v74c0 .8284-.6716 1.5-1.5 1.5h-92c-.82843 0-1.500003-.6716-1.500003-1.5z" fill="#fff" stroke="#bfbfbf"/>
<g fill="#444">
<rect height="8" opacity=".4" rx="1" width="64" x="16" y="34"/>
<rect height="4" opacity=".4" rx="1" width="4" x="54" y="54"/>
<rect height="4" opacity=".4" rx="1" width="4" x="54" y="62"/>
<rect height="4" opacity=".4" rx="1" width="4" x="54" y="70"/>
<rect height="4" opacity=".2" rx="1" width="20" x="60" y="54"/>
<rect height="4" opacity=".2" rx="1" width="20" x="60" y="62"/>
<rect height="4" opacity=".2" rx="1" width="20" x="60" y="70"/>
<path d="m44 65c0 2.7689-.8211 5.4757-2.3594 7.778-1.5384 2.3023-3.7249 4.0967-6.283 5.1563-2.5582 1.0596-5.3731 1.3369-8.0889.7967-2.7157-.5402-5.2103-1.8736-7.1682-3.8315s-3.2913-4.4525-3.8315-7.1682c-.5402-2.7158-.2629-5.5307.7967-8.0889 1.0596-2.5581 2.854-4.7446 5.1563-6.283 2.3023-1.5383 5.0091-2.3594 7.778-2.3594v14z" opacity=".2"/>
<path d="m32 49c1.8385 0 3.659.3621 5.3576 1.0657 1.6985.7036 3.2419 1.7348 4.5419 3.0348s2.3312 2.8434 3.0348 4.5419c.7036 1.6986 1.0657 3.5191 1.0657 5.3576h-14z" opacity=".4"/>
</g>
</g>
</symbol>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

21
apps/presentationeditor/main/resources/less/leftmenu.less
View file

@ -72,6 +72,17 @@
}
}
.btn-blank-format {
display: block;
width: 96px;
height: 96px;
cursor: pointer;
svg&:hover {
opacity:0.85;
}
}
#file-menu-panel {
> div {
height: 100%;
@ -231,7 +242,7 @@
h3 {
padding-left: 0;
padding-top: 40px;
padding-top: 45px;
white-space: nowrap;
}
}
@ -240,8 +251,8 @@
display: inline-block;
margin: 25px 20px 65px;
width: 102px;
height: 128px;
width: 96px;
height: 96px;
cursor: pointer;
}
@ -260,8 +271,8 @@
cursor: pointer;
.thumb {
width: 102px;
height: 128px;
width: 96px;
height: 96px;
background-repeat: no-repeat;
background-position: center;
}

6
apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
View file

@ -1442,8 +1442,8 @@ define([
'<h3 style="margin-top: 20px;"><%= scope.fromBlankText %></h3><hr noshade />',
'<div class="blank-document">',
'<div class="blank-document-btn">',
'<svg class="btn-doc-format">',
'<use xlink:href="#svg-format-xlsx"></use>',
'<svg class="btn-blank-format">',
'<use xlink:href="#svg-format-blank"></use>',
'</svg>',
'</div>',
'<div class="blank-document-info">',
@ -1459,7 +1459,7 @@ define([
'<% if (!_.isEmpty(item.image)) { %> ',
' style="background-image: url(<%= item.image %>);">',
'<% } else { ' +
'print(\"><svg class=\'btn-doc-format\'><use xlink:href=\'#svg-format-blank\'></use></svg>\")' +
'print(\"><svg class=\'btn-blank-format\'><use xlink:href=\'#svg-file-template\'></use></svg>\")' +
' } %>',
'</div>',
'<div class="title"><%= Common.Utils.String.htmlEncode(item.title || item.name || "") %></div>',

1
apps/spreadsheeteditor/main/index.html
View file

@ -310,6 +310,7 @@
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="resources/img/recent-file.svg">
<img class="inline-svg" src="resources/img/file-template.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/spreadsheeteditor/main/index.html.deploy
View file

@ -353,6 +353,7 @@
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<inline src="resources/img/recent-file.svg" />
<inline src="resources/img/file-template.svg" />
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>
</body>

1
apps/spreadsheeteditor/main/index_loader.html
View file

@ -263,6 +263,7 @@
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="resources/img/recent-file.svg">
<img class="inline-svg" src="resources/img/file-template.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/spreadsheeteditor/main/index_loader.html.deploy
View file

@ -314,6 +314,7 @@
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<inline src="resources/img/recent-file.svg" />
<inline src="resources/img/file-template.svg" />
<div id="viewport"></div>

33
apps/spreadsheeteditor/main/resources/img/file-template.svg Normal file
View file

@ -0,0 +1,33 @@
<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg">
<symbol id="svg-file-template">
<clipPath id="a">
<path d="m0 0h96v96h-96z"/>
</clipPath>
<g clip-path="url(#a)">
<path d="m.499997 94 .000003-74c0-.8284.67157-1.5 1.5-1.5h92c.8284 0 1.5.6716 1.5 1.5v74c0 .8284-.6716 1.5-1.5 1.5h-92c-.82843 0-1.500003-.6716-1.500003-1.5z" fill="#fff" stroke="#bfbfbf"/>
<g fill="#444">
<rect height="4" opacity=".4" rx="1" width="12" x="15" y="38"/>
<rect height="4" opacity=".4" rx="1" width="12" x="15" y="48"/>
<rect height="4" opacity=".4" rx="1" width="12" x="15" y="56"/>
<rect height="4" opacity=".4" rx="1" width="12" x="15" y="64"/>
<rect height="4" opacity=".4" rx="1" width="12" x="15" y="72"/>
<rect height="4" opacity=".4" rx="1" width="12" x="33" y="38"/>
<rect height="4" opacity=".2" rx="1" width="12" x="33" y="48"/>
<rect height="4" opacity=".2" rx="1" width="12" x="33" y="56"/>
<rect height="4" opacity=".2" rx="1" width="12" x="33" y="64"/>
<rect height="4" opacity=".2" rx="1" width="12" x="33" y="72"/>
<rect height="4" opacity=".4" rx="1" width="12" x="51" y="38"/>
<rect height="4" opacity=".2" rx="1" width="12" x="51" y="48"/>
<rect height="4" opacity=".2" rx="1" width="12" x="51" y="56"/>
<rect height="4" opacity=".2" rx="1" width="12" x="51" y="64"/>
<rect height="4" opacity=".2" rx="1" width="12" x="51" y="72"/>
<rect height="4" opacity=".4" rx="1" width="12" x="69" y="38"/>
<rect height="4" opacity=".2" rx="1" width="12" x="69" y="48"/>
<rect height="4" opacity=".2" rx="1" width="12" x="69" y="56"/>
<rect height="4" opacity=".2" rx="1" width="12" x="69" y="64"/>
<rect height="4" opacity=".2" rx="1" width="12" x="69" y="72"/>
<path clip-rule="evenodd" d="m67 36h16v8h-16zm-2 0h-16v8h16zm-18 0h-16v8h16zm-18 0h-16v8h16zm-16 10v32h16v-32zm18 32h52v-32h-16-2-16-2-16zm-20-42c0-1.1046.8954-2 2-2h70c1.1046 0 2 .8954 2 2v42c0 1.1046-.8954 2-2 2h-70c-1.1046 0-2-.8954-2-2z" fill-rule="evenodd" opacity=".2"/>
</g>
</g>
</symbol>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

21
apps/spreadsheeteditor/main/resources/less/leftmenu.less
View file

@ -72,6 +72,17 @@
}
}
.btn-blank-format {
display: block;
width: 96px;
height: 96px;
cursor: pointer;
svg&:hover {
opacity:0.85;
}
}
#file-menu-panel {
> div {
height: 100%;
@ -285,7 +296,7 @@
h3 {
padding-left: 0;
padding-top: 40px;
padding-top: 45px;
white-space: nowrap;
}
}
@ -293,8 +304,8 @@
.blank-document-btn {
display: inline-block;
margin: 25px 20px 65px;
width: 102px;
height: 128px;
width: 96px;
height: 96px;
cursor: pointer;
}
@ -313,8 +324,8 @@
cursor: pointer;
.thumb {
width: 102px;
height: 128px;
width: 96px;
height: 96px;
background-repeat: no-repeat;
background-position: center;
}