pull/1/head
yflory 4 years ago
parent a39feda8ac
commit 63dbd62d30

@ -6,6 +6,7 @@
@colortheme_logo-1: #326599; @colortheme_logo-1: #326599;
@colortheme_logo-2: #0087FF; // XXX Testing if this color works @colortheme_logo-2: #0087FF; // XXX Testing if this color works
@colortheme_logo_2_light: lighten(@colortheme_logo-2, 40%); @colortheme_logo_2_light: lighten(@colortheme_logo-2, 40%);
@colortheme_loading_bg: #E7E7E7;
@colortheme_link-color: #0275D8; @colortheme_link-color: #0275D8;
@colortheme_link-color-visited: #005999; @colortheme_link-color-visited: #005999;

@ -32,7 +32,7 @@
z-index: 100000000; // #loading * 10 z-index: 100000000; // #loading * 10
top: 0px; top: 0px;
//background: @colortheme_loading-bg; //background: @colortheme_loading-bg;
background: linear-gradient(to right, @colortheme_loading-bg 0%, @colortheme_loading-bg 50%, @colortheme_loading-bg-alt 50%, @colortheme_loading-bg-alt 100%); background: @colortheme_loading_bg;
color: @colortheme_loading-color; color: @colortheme_loading-color;
display: flex; display: flex;
flex-flow: column; /* we need column so that the child can shrink vertically */ flex-flow: column; /* we need column so that the child can shrink vertically */
@ -41,16 +41,19 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
.cp-creation-fill {
flex: 1 1 50%;
}
.cp-creation-logo { .cp-creation-logo {
height: 300px; height: 300px;
width: 300px; width: 300px;
margin-top: 50px;
flex: 0 1 auto; /* allows shrink */
min-height: 0; min-height: 0;
text-align: center; text-align: center;
img { img {
margin-top: 50px;
margin-bottom: 50px;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: ~"calc(100% - 100px)";
} }
} }
} }
@ -63,9 +66,9 @@
outline: none; outline: none;
width: 700px; width: 700px;
max-width: 90vw; max-width: 90vw;
height: 550px; height: 500px;
max-height: calc(~"100vh - 20px"); max-height: ~"calc(100vh - 20px)";
margin: 50px; margin: 0px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -78,41 +81,48 @@
} }
.cp-creation-title { .cp-creation-title {
color: @colortheme_creation-modal-title; font-size: 20px;
font-weight: bold; display: flex;
margin: 15px; flex-flow: column;
align-items: center;
margin-top: 15px;
margin-bottom: 15px;
.cp-icon {
margin-bottom: 5px;
font-size: 50px;
}
.cp-creation-title-text {
position: relative;
a {
position: absolute;
top: 7px;
margin-left: 10px;
font-size: 16px;
color: inherit;
}
}
} }
.cp-creation-create { .cp-creation-create {
margin-top: 0px; justify-content: center;
margin-top: 10px;
margin-bottom: 15px;
button { button {
.tools_unselectable(); .tools_unselectable();
padding: 15px; padding: 6px;
background: linear-gradient(to right, @colortheme_logo-2, @colortheme_logo-1); background: @colortheme_logo-2;
font-size: 20px;
color: #FFF; color: #FFF;
font-weight: bold;
margin: 3px 10px; margin: 3px 10px;
border: none; border: none;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
width: 100%; text-transform: uppercase;
&:hover { &:hover {
background: linear-gradient(to right, lighten(@colortheme_logo-2, 5%), lighten(@colortheme_logo-1, 5%)); background: lighten(@colortheme_logo-2, 5%);
//background: darken(@creation-button, 5%);
//background: lighten(@creation-button, 5%);
} }
} }
} }
.cp-creation-create {
text-align: center;
//margin: auto;
//margin-top: 20px;
width: 400px;
max-width: 100%;
button {
margin: 0;
}
}
#cp-creation-form { #cp-creation-form {
display: flex; display: flex;
@ -121,7 +131,7 @@
flex: 1 0 auto; flex: 1 0 auto;
justify-content: space-around; justify-content: space-around;
& > div { & > div {
width: 400px; width: 300px;
max-width: 100%; max-width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -384,10 +394,9 @@
} }
} }
@media screen and (max-height: 700px) { @media screen and (max-height: 850px) {
#cp-creation-container { #cp-creation-container {
.cp-creation-logo { .cp-creation-logo img {
//flex-shrink: 0;
display: none; display: none;
} }
} }

@ -2091,15 +2091,33 @@ define([
var $body = $('body'); var $body = $('body');
var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body); var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body);
var urlArgs = (Config.requireConf && Config.requireConf.urlArgs) || ''; var urlArgs = (Config.requireConf && Config.requireConf.urlArgs) || '';
var l = h('div.cp-creation-logo', h('img', { src: '/customize/loading-logo.png?' + urlArgs }));
$(l).appendTo($creationContainer); var logo = h('img', { src: '/customize/CryptPad_logo.svg?' + urlArgs });
var $creation = $('<div>', { id: 'cp-creation', tabindex: 1 }).appendTo($creationContainer); var fill1 = h('div.cp-creation-fill.cp-creation-logo', logo);
var fill2 = h('div.cp-creation-fill');
var $creation = $('<div>', { id: 'cp-creation', tabindex:1 });
$creationContainer.append([fill1, $creation, fill2]);
var createHelper = function (href, text) {
var q = UI.createHelper(href, text);
$(q).addClass('cp-creation-help');
return q;
};
// Title // Title
//var colorClass = 'cp-icon-color-'+type; var colorClass = 'cp-icon-color-'+type;
//$creation.append(h('h2.cp-creation-title', Messages.newButtonTitle)); //$creation.append(h('h2.cp-creation-title', Messages.newButtonTitle));
var newPadH3Title = Messages['button_new' + type]; var newPadH3Title = Messages['button_new' + type];
$creation.append(h('h3.cp-creation-title', newPadH3Title));
Messages.creation_helperText = "Learn more..."; // XXX
var title = h('div.cp-creation-title', [
UI.getFileIcon({type: type})[0],
h('div.cp-creation-title-text', [
h('span', newPadH3Title),
createHelper('https://docs.cryptpad.fr/en/user_guide/apps/general.html#new-document', Messages.creation_helperText)
])
]);
$creation.append(title);
//$creation.append(h('h2.cp-creation-title.'+colorClass, Messages.newButtonTitle)); //$creation.append(h('h2.cp-creation-title.'+colorClass, Messages.newButtonTitle));
// Deleted pad warning // Deleted pad warning
@ -2109,13 +2127,6 @@ define([
)); ));
} }
var origin = privateData.origin;
var createHelper = function (href, text) {
var q = UI.createHelper(origin + href, text);
$(q).addClass('cp-creation-help');
return q;
};
// Team pad // Team pad
var team; var team;
var teamExists = privateData.teams && Object.keys(privateData.teams).length; var teamExists = privateData.teams && Object.keys(privateData.teams).length;
@ -2171,7 +2182,6 @@ define([
// XXX Remove creation_owned1 and creation_owned2 keys // XXX Remove creation_owned1 and creation_owned2 keys
var owned = h('div.cp-creation-owned', [ var owned = h('div.cp-creation-owned', [
UI.createCheckbox('cp-creation-owned', Messages.creation_owned, true), UI.createCheckbox('cp-creation-owned', Messages.creation_owned, true),
createHelper('https://docs.cryptpad.fr/en/user_guide/share_and_access.html#owners', Messages.creation_owned1)
]); ]);
// Life time // Life time
@ -2196,7 +2206,6 @@ define([
}, Messages.creation_expireMonths) }, Messages.creation_expireMonths)
]) ])
]), ]),
createHelper('https://docs.cryptpad.fr/en/user_guide/apps/general.html#new-document', Messages.creation_expire2),
]); ]);
// Password // Password

Loading…
Cancel
Save