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

[SSE] Append toolbar skeleton

Browse source
This commit is contained in:
Alexander Yuzhin 2019-10-04 11:01:51 +03:00
parent 27dd33133e
commit 7152a85f87
3 changed files with 128 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -220,7 +220,18 @@
<!-- debug end -->
</head>
<body>
<div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="sktoolbar"><ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul><ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li></ul></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<div id="loading-mask" class="loadmask">
<div class="brendpanel">
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div>
<div class="sktoolbar">
<ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul>
<ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li></ul>
</div>
<div class="placeholder">
<div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div>
</div>
</div>
<div id="viewport"></div>
<script>

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

@ -76,6 +76,49 @@
animation: flickerAnimation 2s infinite ease-in-out;
}
.loadmask > .sktoolbar {
background: #fafafa;
height: 46px;
padding: 10px 12px;
box-sizing: content-box;
}
.loadmask > .sktoolbar ul {
margin: 0;
padding: 0;
white-space: nowrap;
position: relative;
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;
-o-animation: flickerAnimation 2s infinite ease-in-out;
animation: flickerAnimation 2s infinite ease-in-out;
}
.loadmask > .sktoolbar li {
background: #e2e2e2;
border-radius: 3px;
width: 20px;
height: 20px;
display: inline-block;
margin-right: 6px;
}
.loadmask > .sktoolbar li.space {
background: none;
width: 12px;
}
.loadmask > .sktoolbar li.fat {
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 905px;
width: inherit;
height: 44px;
}
.loadmask > .placeholder {
background: #fbfbfb;
width: 100%;
@ -185,7 +228,21 @@
<!-- debug end -->
</head>
<body>
<div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="placeholder"><div class="columns"></div><div class="columns"></div></div></div>
<div id="loading-mask" class="loadmask">
<div class="brendpanel"><div>
<div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div>
<div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div>
</div>
<div class="sktoolbar">
<ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul>
<ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/></ul>
</div>
<div class="placeholder">
<div class="columns"></div>
<div class="columns"></div>
</div>
</div>
<div id="viewport"></div>
<script>

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

@ -78,6 +78,49 @@
animation: flickerAnimation 2s infinite ease-in-out;
}
.loadmask > .sktoolbar {
background: #fafafa;
height: 46px;
padding: 10px 12px;
box-sizing: content-box;
}
.loadmask > .sktoolbar ul {
margin: 0;
padding: 0;
white-space: nowrap;
position: relative;
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;
-o-animation: flickerAnimation 2s infinite ease-in-out;
animation: flickerAnimation 2s infinite ease-in-out;
}
.loadmask > .sktoolbar li {
background: #e2e2e2;
border-radius: 3px;
width: 20px;
height: 20px;
display: inline-block;
margin-right: 6px;
}
.loadmask > .sktoolbar li.space {
background: none;
width: 12px;
}
.loadmask > .sktoolbar li.fat {
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 905px;
width: inherit;
height: 44px;
}
.loadmask > .placeholder {
background: #fbfbfb;
width: 100%;
@ -190,7 +233,21 @@
<link rel="stylesheet" type="text/css" href="../../../apps/spreadsheeteditor/main/resources/css/app.css">
</head>
<body>
<div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../../apps/spreadsheeteditor/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="placeholder"><div class="columns"></div><div class="columns"></div></div></div>
<div id="loading-mask" class="loadmask">
<div class="brendpanel"><div>
<div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div>
<div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div>
</div>
<div class="sktoolbar">
<ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul>
<ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/></ul>
</div>
<div class="placeholder">
<div class="columns"></div>
<div class="columns"></div>
</div>
</div>
<div id="viewport"></div>
<script>