Put welcome stuff into one place.
Make the html, js and css files same with server. Signed-off-by: Gökay Şatır <gokay.satir@collabora.com> Change-Id: Iac268811c01abee3a1b313084959e0ce70666a3bpull/4292/head
Gökay Şatır
Gökay ŞATIR
parent
1fe48cd0a0
commit
a4f53abac2
|
|
@ -26,6 +26,7 @@
|
|||
"typescript_js",
|
||||
"dist",
|
||||
"release",
|
||||
"debug"
|
||||
"debug",
|
||||
"welcome"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
|
@ -1,87 +1,183 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.slider, .slides > div {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.slider {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.slides::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.slides::-webkit-scrollbar-thumb {
|
||||
background: black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.slides::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.slides > div {
|
||||
scroll-snap-align: start;
|
||||
flex-shrink: 0;
|
||||
margin-right: 50px;
|
||||
border-radius: 10px;
|
||||
transform-origin: center center;
|
||||
transform: scale(1);
|
||||
transition: transform 0.5s;
|
||||
position: relative;
|
||||
}
|
||||
.author-info {
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: white;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.author-info a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.slider > a {
|
||||
display: inline-flex;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: linear-gradient(to top, #d6d6d6, #bababa);
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin: 0 0 0.5rem 0.5rem;
|
||||
position: relative;
|
||||
color: transparent;
|
||||
}
|
||||
.slider > a:active, .slider > a.active {
|
||||
background: #444;
|
||||
}
|
||||
.slider > a:focus {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
/* Don't need button navigation */
|
||||
@supports (scroll-snap-type) {
|
||||
.slider > a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hiding scroll bar */
|
||||
#user-welcome * {
|
||||
box-sizing: border-box;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-color: transparent transparent;
|
||||
scrollbar-width: 0px;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
scrollbar-color: transparent transparent;
|
||||
scrollbar-width: 0px;
|
||||
}
|
||||
|
||||
#user-welcome *::-webkit-scrollbar {
|
||||
width: 0;
|
||||
*::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
#user-welcome *::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
/* Same font as used in vex dialogs */
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
}
|
||||
.slides h1 {
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
margin-bottom: 4px;
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.slides h2 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
margin-top: 0;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
margin-top: 0;
|
||||
}
|
||||
.slides p,
|
||||
#view-supported-versions {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
.slides p {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.slides fig {
|
||||
height: 232px;
|
||||
display: block;
|
||||
height: 232px;
|
||||
display: block;
|
||||
}
|
||||
#slide-1 fig {
|
||||
background-image: linear-gradient(to top,#e6e6e6c4,#e6e6e64f 3%,white 33%);
|
||||
border-radius: 0 0 50% 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(to top,#e6e6e6c4,#e6e6e64f 3%,white 33%);
|
||||
border-radius: 0 0 50% 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#slide-1 #fig-slide1-l {
|
||||
background: url('images/welcome/slide1-left.png') no-repeat center;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
box-shadow: 0 0 8px 1px #00000040;
|
||||
border-radius: 100%;
|
||||
background: url("slide1-left.png") no-repeat center;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
box-shadow: 0 0 8px 1px #00000040;
|
||||
border-radius: 100%;
|
||||
}
|
||||
#slide-1 #fig-slide1-c {
|
||||
background: url('images/welcome/slide1-center.png') no-repeat center;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
box-shadow: 0 0 12px 1px #00000040;
|
||||
border-radius: 100%;
|
||||
margin: 42px 32px 0;
|
||||
background: url("slide1-center.png") no-repeat center;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
box-shadow: 0 0 12px 1px #00000040;
|
||||
border-radius: 100%;
|
||||
margin: 42px 32px 0;
|
||||
}
|
||||
#slide-1 #fig-slide1-r {
|
||||
background: url('images/welcome/slide1-right.png') no-repeat center;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
box-shadow: 0 0 8px 1px #0000005e;
|
||||
border-radius: 100%;
|
||||
background: url("slide1-right.png") no-repeat center;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
box-shadow: 0 0 8px 1px #0000005e;
|
||||
border-radius: 100%;
|
||||
}
|
||||
#slide-2 fig {
|
||||
background: url('images/welcome/slide2.png') no-repeat center;
|
||||
background: url("slide2.png") no-repeat center;
|
||||
}
|
||||
#slide-3 fig {
|
||||
background: url('images/welcome/slide3.png') no-repeat center;
|
||||
box-shadow: 0 0 8px 1px #e5e5e5;
|
||||
width: 342px;
|
||||
margin: 12px auto;
|
||||
border-radius: 8px;
|
||||
background: url("slide3.png") no-repeat center;
|
||||
box-shadow: 0 0 8px 1px #e5e5e5;
|
||||
width: 342px;
|
||||
margin: 12px auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
#view-supported-versions {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#user-welcome--buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
margin-right: 72px
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -1,66 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/browser/%VERSION%/welcome/welcome.css">
|
||||
</head>
|
||||
<body onload="onLoaded()">
|
||||
<div id="user-welcome">
|
||||
<div class="slider">
|
||||
<div class="slides">
|
||||
<div id="slide-1">
|
||||
<fig>
|
||||
<fig id="fig-slide1-l"></fig>
|
||||
<fig id="fig-slide1-c"></fig>
|
||||
<fig id="fig-slide1-r"></fig>
|
||||
</fig>
|
||||
<h1 id="welcome-slide1-heading-1"></h1>
|
||||
<h2 id="welcome-slide1-heading-2"></h2>
|
||||
<p id="welcome-slide1-content"></p>
|
||||
<div id="user-welcome--buttons">
|
||||
<form action="#slide-2">
|
||||
<button id='welcome-button-next-1' type="button" class="ui-pushbutton jsdialog" onclick="onSlideClick('i-slide-2')"></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="slide-2">
|
||||
<fig></fig>
|
||||
<h1 id="welcome-slide2-heading-1"></h1>
|
||||
<h2 id="welcome-slide2-heading-2"></h2>
|
||||
<p id="welcome-slide2-content"></p>
|
||||
<div id="user-welcome--buttons">
|
||||
<form action="#slide-3">
|
||||
<button id='welcome-button-next-2' type="button" class="ui-pushbutton jsdialog" onclick="onSlideClick('i-slide-3')"></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="slide-3">
|
||||
<fig></fig>
|
||||
<h1 id="welcome-slide3-heading-1"></h1>
|
||||
<h2 id="welcome-slide3-heading-2"></h2>
|
||||
<p id="welcome-slide3-content"></p>
|
||||
<div id="user-welcome--buttons">
|
||||
<button id='welcome-button-close' type="button" class="ui-pushbutton jsdialog" onclick="onClose()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<btn id="i-slide-1" class="active" onclick="onSlideClick(this.id)">1</btn>
|
||||
<btn id="i-slide-2" onclick="onSlideClick(this.id)">2</btn>
|
||||
<btn id="i-slide-3" onclick="onSlideClick(this.id)">3</btn>
|
||||
</div>
|
||||
<a id="view-supported-versions" href="https://www.collaboraoffice.com/subscriptions/" target="_blank"></a>
|
||||
</div>
|
||||
<script>
|
||||
function onLoaded() {
|
||||
if (window.parent !== window.self) {
|
||||
window.parent.postMessage('welcome-show', '*');
|
||||
}
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
if (window.parent !== window.self) {
|
||||
window.parent.postMessage('welcome-close', '*');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Collabora Online Welcome</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="welcome.css">
|
||||
<script src="welcome.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="user-welcome">
|
||||
<div class="slider">
|
||||
<div class="slides">
|
||||
<div id="slide-1">
|
||||
<fig>
|
||||
<fig id="fig-slide1-l"></fig>
|
||||
<fig id="fig-slide1-c"></fig>
|
||||
<fig id="fig-slide1-r"></fig>
|
||||
</fig>
|
||||
<h1 id="welcome-slide1-heading-1"></h1>
|
||||
<h2 id="welcome-slide1-heading-2"></h2>
|
||||
<p id="welcome-slide1-content"></p>
|
||||
<div id="user-welcome--buttons">
|
||||
<form action="#slide-2">
|
||||
<button type="button" id="slide-1-button">Next</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="slide-2">
|
||||
<fig></fig>
|
||||
<h1 id="welcome-slide2-heading-1"></h1>
|
||||
<h2 id="welcome-slide2-heading-2"></h2>
|
||||
<p id="welcome-slide2-content"></p>
|
||||
<div id="user-welcome--buttons">
|
||||
<form action="#slide-3">
|
||||
<button type="button" id="slide-2-button">Next</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="slide-3">
|
||||
<fig></fig>
|
||||
<h1 id="welcome-slide3-heading-1"></h1>
|
||||
<h2 id="welcome-slide3-heading-2"></h2>
|
||||
<p id="welcome-slide3-content"></p>
|
||||
<div id="user-welcome--buttons">
|
||||
<button type="button" id="slide-3-button">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a id="slide-1-indicator" class="active" href="#slide-1">1</a>
|
||||
<a id="slide-2-indicator" href="#slide-2">2</a>
|
||||
<a id="slide-3-indicator" href="#slide-3">3</a>
|
||||
</div>
|
||||
<a id="view-supported-versions" href="https://www.collaboraoffice.com/subscriptions/" target="_blank"></a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
window.onload = onLoaded;
|
||||
|
||||
function onLoaded() {
|
||||
document.getElementById('slide-1-button').onclick = function() {
|
||||
onSlideClick('slide-2-indicator', true);
|
||||
};
|
||||
|
||||
document.getElementById('slide-2-button').onclick = function() {
|
||||
onSlideClick('slide-3-indicator', true);
|
||||
};
|
||||
|
||||
document.getElementById('slide-3-button').onclick = function() {
|
||||
onClose();
|
||||
};
|
||||
|
||||
document.getElementById('slide-1-indicator').onclick = function() {
|
||||
onSlideClick('slide-1-indicator');
|
||||
};
|
||||
|
||||
document.getElementById('slide-2-indicator').onclick = function() {
|
||||
onSlideClick('slide-2-indicator');
|
||||
};
|
||||
|
||||
document.getElementById('slide-3-indicator').onclick = function() {
|
||||
onSlideClick('slide-3-indicator');
|
||||
};
|
||||
|
||||
if (window.parent !== window.self) {
|
||||
window.parent.postMessage('{"MessageId":"welcome-show"}', '*');
|
||||
}
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
if (window.parent !== window.self) {
|
||||
window.parent.postMessage('{"MessageId":"welcome-close"}', '*');
|
||||
}
|
||||
}
|
||||
|
||||
function onSlideClick(e, isButton = false) {
|
||||
for (var i = 1; i < 4; i++)
|
||||
document.getElementById('slide-' + i + '-indicator').classList.remove("active");
|
||||
|
||||
document.getElementById(e).classList.add("active");
|
||||
if (isButton)
|
||||
document.location = '#' + e.replace('-indicator', '');
|
||||
}
|
||||
Loading…
Reference in New Issue