dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

logo and color

This commit is contained in:
zuzanna-maria 2024-06-07 12:00:30 +01:00
parent be4855b582
commit bc3c7f7779
5 changed files with 279 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
www/admin/app-admin.less
View File

@ -37,10 +37,6 @@
// } // }
} }
.active-app {
color: red;
}
&.cp-app-admin { &.cp-app-admin {
.framework_min_main(); .framework_min_main();

347
www/install/appconfigscreen.js
View File

@ -24,18 +24,47 @@ define([
) { ) {
//XXX //XXX
Messages.admin_onboardingTitle = 'Welcome to your CryptPad instance' Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance'
Messages.admin_onboardingDesc = 'Please choose a title and description' Messages.admin_onboardingNameHint = 'Please choose a title and description'
Messages.admin_onboardingAppsTitle = "Choose your applications"
Messages.admin_onboardingAppsHint = "Choose which apps are available to users on your instance"
Messages.admin_onboardingRegistrationTitle = "Options"
Messages.admin_onboardingRegistrationHint = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id tristique justo"
Messages.admin_onboardingRegistration = "Visitors to the instance are not able to create accounts. Invitations can be created by administrators"
Messages.admin_onboardingRegistration = "All accounts on the instance have to use 2-factor authentication"
Messages.admin_appSelection = 'App configuration saved'
Messages.admin_appsTitle = "Choose your applications"
Messages.admin_appsHint = "Choose which apps are available to users on your instance."
Messages.admin_cat_apps = "Apps"
var AppConfigScreen = {}; var AppConfigScreen = {};
const blocks = Sidebar.blocks; const blocks = Sidebar.blocks;
AppConfigScreen.titleConfig = function (sendAdminDecree) { var displayForm = function(sendAdminDecree, page) {
var pages = [AppConfigScreen.appConfig, AppConfigScreen.mfaRegistrationScreen, AppConfigScreen.titleConfig]
var nextPageFunction = pages[page]
console.log('here', typeof nextPageFunction)
var nextPageForm = nextPageFunction(sendAdminDecree)
var elem = document.createElement('div');
elem.setAttribute('id', 'cp-loading');
let frame = h('div.configscreen', nextPageForm)
elem.append(frame)
built = true;
var intr;
var append = function () {
if (!document.body) { return; }
clearInterval(intr);
document.body.appendChild(elem);
};
intr = setInterval(append, 100);
append();
}
AppConfigScreen.titleConfig = function (sendAdminDecree, sendAdminRpc) {
const blocks = Sidebar.blocks; const blocks = Sidebar.blocks;
@ -97,7 +126,7 @@ define([
reader.onloadend = function () { reader.onloadend = function () {
let dataURL = this.result; let dataURL = this.result;
console.log(dataURL, 'dataulr') console.log(dataURL, 'dataulr')
sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) { sendAdminRpc('UPLOAD_LOGO', {dataURL}, function (e, response) {
$button.removeAttr('disabled'); $button.removeAttr('disabled');
if (e || response.error) { if (e || response.error) {
UI.warn(Messages.error); UI.warn(Messages.error);
@ -141,78 +170,93 @@ define([
} }
var colorBlock = function () {
let input = blocks.input({
type: 'color',
value: (Instance && Instance.color) || '#0087FF'
});
let label = blocks.labelledInput(Messages.admin_colorPick, input);
let current = blocks.block([], 'cp-admin-color-current');
let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
let preview = blocks.block([
blocks.block([
blocks.link('CryptPad', '/admin/#customize'),
blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
blocks.block([
blocks.link('CryptPad', '/admin/#customize'),
blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
], 'cp-admin-color-preview-light cp-sidebar-flex-block')
], 'cp-admin-color-preview');
let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
let $preview = $(preview);
// var colorText = Messages.admin_colorTitle let remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
let $remove = $(remove);
// let inputColor = blocks.input({ let setColor = (color, done) => {
// type: 'color', sframeCommand('CHANGE_COLOR', {color}, (err, response) => {
// value: (Instance && Instance.color) || '#0087FF' if (err) {
// }); UI.warn(Messages.error);
// let label = blocks.labelledInput(Messages.admin_colorPick, inputColor); console.error(err, response);
// let current = blocks.block([], 'cp-admin-color-current'); done(false);
// let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current); return;
// let preview = blocks.block([ }
// blocks.block([ done(true);
// blocks.link('CryptPad', '/admin/#customize'), UI.log(Messages.saved);
// blocks.button('primary', 'fa-floppy-o', Messages.settings_save), });
// blocks.button('secondary', 'fa-floppy-o', Messages.settings_save) };
// ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
// blocks.block([
// blocks.link('CryptPad', '/admin/#customize'),
// blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
// blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
// ], 'cp-admin-color-preview-light cp-sidebar-flex-block')
// ], 'cp-admin-color-preview');
// let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
// let $preview = $(preview);
// let removeColor = blocks.button('danger', '', Messages.admin_logoRemoveButton); let btn = blocks.activeButton('primary', '',
// let $removeColor = $(removeColor); Messages.admin_colorChange, (done) => {
let color = $input.val();
setColor(color, done);
});
// let setColor = (color, done) => { let $input = $(input).on('change', () => {
// sendAdminDecree('CHANGE_COLOR', {color}, function (e, response) { require(['/lib/less.min.js'], (Less) => {
// if (err) { let color = $input.val();
// UI.warn(Messages.error); let lColor = Less.color(color.slice(1));
// console.error(err, response); let lighten = Less.functions.functionRegistry._data.lighten;
// done(false); let lightColor = lighten(lColor, {value:30}).toRGB();
// return; $preview.find('.btn-primary').css({
// } 'background-color': color
// done(true); });
// UI.log(Messages.saved); $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({
// }); 'border-color': lightColor,
// }; 'color': lightColor,
});
$preview.find('.cp-admin-color-preview-light .btn-secondary').css({
'border-color': color,
'color': color,
});
$preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
$preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
});
});
// //color picker UI.confirmButton($remove, {
// let $inputColor = $(inputColor).on('change', () => { classes: 'btn-danger',
// require(['/lib/less.min.js'], (Less) => { multiple: true
// let color = $inputColor.val(); }, function () {
// let lColor = Less.color(color.slice(1)); $remove.attr('disabled', 'disabled');
// let lighten = Less.functions.functionRegistry._data.lighten; setColor('', () => {});
// let lightColor = lighten(lColor, {value:30}).toRGB(); });
// $preview.find('.btn-primary').css({
// 'background-color': color // let form = blocks.form([
// }); var form = [labelCurrent,
// $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({ label]
// 'border-color': lightColor, // ], blocks.nav([btn, remove, btn.spinner]));
// 'color': lightColor,
// });
// $preview.find('.cp-admin-color-preview-light .btn-secondary').css({ return form
// 'border-color': color,
// 'color': color, }
// });
// $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
// $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
// });
// });
// remove color
// UI.confirmButton($removeColor, {
// classes: 'btn-danger',
// multiple: true
// }, function () {
// $removeColor.attr('disabled', 'disabled');
// setColor('', () => {});
// });
var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) { var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
@ -226,7 +270,7 @@ define([
// } // }
// // flushCache(); // // flushCache();
// done(true); // done(true);
// UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection])); // UI.log(Messages.saved);
// }) // })
// sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(descriptionInput).val().trim()], function (e, response) { // sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(descriptionInput).val().trim()], function (e, response) {
@ -239,7 +283,7 @@ define([
// } // }
// // flushCache(); // // flushCache();
// done(true); // done(true);
// UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection])); // UI.log(Messages.saved);
// }) // })
@ -255,45 +299,36 @@ define([
// UI.log(Messages.saved); // UI.log(Messages.saved);
// }); // });
var nextPageForm = AppConfigScreen.appConfig(sendAdminDecree) displayForm(sendAdminDecree, 0)
var elem = document.createElement('div');
elem.setAttribute('id', 'cp-loading');
let frame = h('div.configscreen', nextPageForm)
elem.append(frame)
built = true;
var intr;
var append = function () {
if (!document.body) { return; }
clearInterval(intr);
document.body.appendChild(elem);
};
intr = setInterval(append, 100);
append();
}); });
var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0]) var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0])
var logoInput = h('div.cp-onboardscreen-logo', logoBlock()) var logoInput = h('div.cp-onboardscreen-logo', logoBlock(), {style:'width:20%;height:20%'})
console.log(titleInput)
var descriptionInput = h('div.cp-onboardscreen-description', titleDescBlock()[1]) var descriptionInput = h('div.cp-onboardscreen-description', titleDescBlock()[1])
var colorInput = h('div', colorBlock()[0], colorBlock()[1], {style:'width:50%;height:20%;position:absolute;right:0;bottom:0;margin-right:17%;margin-bottom:10%'})
// var colorInputLabel = h('div', colorBlock()[0], {style:'width:20%;height:20%'})
// var colorInputLabel2 = h('div', colorBlock()[1], {style:'width:20%;height:20%'})
var screenTitleDiv = h('div.cp-onboardscreen-screentitle') var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
$(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingTitle), h('br'), h('span', Messages.admin_onboardingDesc))) $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingNameTitle), h('br'), h('span', Messages.admin_onboardingNameHint)))
var nav = blocks.nav([button]); var nav = blocks.nav([button]);
var form = blocks.form([ var form = blocks.form([
screenTitleDiv, screenTitleDiv,
titleInput, descriptionInput, titleInput, descriptionInput,
// logoInput logoInput,
// $(titleInput),descriptionInput, inputLogo colorInput,
// , label, labelCurrent
], nav); ], nav);
var $form = $(form).addClass('cp-onboardscreen-form') $(form).addClass('cp-onboardscreen-form')
return form var wrapper = h('div', form, {style:'width:100%'})
return wrapper
} }
AppConfigScreen.mfaRegistrationScreen = function(sendAdminDecree) { AppConfigScreen.mfaRegistrationScreen = function(sendAdminDecree) {
var restrict = blocks.activeCheckbox({ var restrict = blocks.activeCheckbox({
key: 'registration', key: 'registration',
getState: function () { getState: function () {
@ -301,16 +336,16 @@ define([
}, },
query: function (val, setState) { query: function (val, setState) {
sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) { sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
if (e || response.error) { // if (e || response.error) {
UI.warn(Messages.error); // UI.warn(Messages.error);
$input.val(''); // $input.val('');
console.error(e, response); // console.error(e, response);
done(false); // done(false);
return; // return;
} // }
// flushCache(); // // flushCache();
// done(true); // // done(true);
UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection])); // UI.log(Messages.saved);
}) })
}, },
@ -322,34 +357,50 @@ define([
return false return false
}, },
query: function (val, setState) { query: function (val, setState) {
sendAdminDecree('ENFORCE_MFA', [val], function (e, response) { // sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
if (e || response.error) { // if (e || response.error) {
UI.warn(Messages.error); // UI.warn(Messages.error);
$input.val(''); // $input.val('');
console.error(e, response); // console.error(e, response);
done(false); // done(false);
return; // return;
} // }
// flushCache(); // // flushCache();
done(true); // done(true);
UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection])); // UI.log(Messages.saved);
}) // })
}, },
}); });
var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) { const grid = blocks.block([], 'cp-admin-customize-apps-grid');
const allApps = [restrict, forceMFA];
allApps.forEach(app => {
let appBlock = h('div.cp-bloop', {style: 'width:50%;height:20px;float:left'}, {class: 'inactive-app', id: `${app}-block`}, app)
$(grid).append(appBlock);
});
var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
document.location.href = '/drive/'; document.location.href = '/drive/';
return; return;
}) })
var prev = blocks.activeButton('primary', '', Messages.settings_prev, function (done) {
displayForm(sendAdminDecree, 2)
})
var screenTitleDiv = h('div.cp-onboardscreen-screentitle') var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
$(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-form-setting-title', Messages.admin_onboardingTitle), h('br'), h('span', Messages.admin_onboardingDesc))) $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingRegistrationTitle), h('br'), h('span', Messages.admin_onboardingRegistrationHint)))
var form = blocks.form([ var form = blocks.form([
screenTitleDiv, screenTitleDiv,
restrict, forceMFA], grid],
[button]) [prev, save])
$(form).addClass('cp-onboardscreen-form')
return form return form
@ -363,24 +414,29 @@ define([
const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram']; const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
const availableApps = [] const availableApps = []
function select(app) { function select(app, appBlock) {
if (availableApps.indexOf(app) === -1) { if (availableApps.indexOf(app) === -1) {
availableApps.push(app); availableApps.push(app);
console.log(appBlock)
console.log(appBlock.innerHTML)
var checkMark = h('div.cp-onboardscreen-checkmark', "V", {style:'color:white'})
appBlock.append(checkMark)
$(`#${app}-block`).attr('class', 'active-app') $(`#${app}-block`).attr('class', 'active-app')
} else { } else {
availableApps.splice(availableApps.indexOf(app), 1) availableApps.splice(availableApps.indexOf(app), 1)
$(`#${app}-block`).attr('class', 'inactive-app') $(`#${app}-block`).attr('class', 'inactive-app')
appBlock.remove('.cp-onboardscreen-checkmark')
} }
} }
allApps.forEach(app => { allApps.forEach(app => {
let appBlock = h('div', {class: 'inactive-app', id: `${app}-block`}, {style: 'background-color:white'},app) let appBlock = h('div.cp-bloop', {style: 'width:50%;height:20px;'}, {class: 'inactive-app', id: `${app}-block`}, app.charAt(0).toUpperCase() + app.slice(1))
$(appBlock).addClass('cp-app-drive-element-grid') $(appBlock).addClass('cp-app-drive-element-grid')
$(appBlock).addClass('cp-app-drive-element-row') $(appBlock).addClass('cp-app-drive-element-row')
$(appBlock).addClass('cp-app-drive-new-doc') $(appBlock).addClass('cp-app-drive-new-doc')
$(grid).append(appBlock); $(grid).append(appBlock);
$(appBlock).on('click', () => select(app)) $(appBlock).on('click', () => select(app, $(appBlock)))
}); });
var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) { var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
@ -394,35 +450,28 @@ define([
// } // }
// // flushCache(); // // flushCache();
// done(true); // done(true);
// UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection])); // UI.log(Messages.saved);
// }) // })
UI.log('Messages._getKey(, [Messages.admin_appSelection])'); UI.log(Messages.saved);
var nextPageForm = AppConfigScreen.mfaRegistrationScreen(sendAdminDecree) displayForm(sendAdminDecree, 1)
var elem = document.createElement('div');
elem.setAttribute('id', 'cp-loading');
let frame = h('div.configscreen', nextPageForm)
elem.append(frame)
built = true;
var intr;
var append = function () {
if (!document.body) { return; }
clearInterval(intr);
document.body.appendChild(elem);
};
intr = setInterval(append, 100);
append();
}); });
Messages.settings_prev = 'Back'
var prev = blocks.activeButton('primary', '', Messages.settings_prev, function (done) {
displayForm(sendAdminDecree, 2)
})
var screenTitleDiv = h('div.cp-onboardscreen-screentitle') var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
$(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-form-setting-title', Messages.admin_onboardingTitle), h('br'), h('span', Messages.admin_onboardingDesc))) $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingAppsTitle), h('br'), h('span', Messages.admin_onboardingAppsHint)))
let form = blocks.form([ let form = blocks.form([
screenTitleDiv, screenTitleDiv,
grid grid
], blocks.nav([save])); ], blocks.nav([prev, save]));
$(form).addClass('cp-onboardscreen-form')
return form return form
} }

36
www/install/configscreen.css
View File

@ -81,9 +81,10 @@
.cp-admin-customize-apps-grid { .cp-admin-customize-apps-grid {
width: 40%; width: 80%;
color: blue; color: white;
height: 10px !important; height: 10px !important;
margin:auto;
} }
@ -102,12 +103,37 @@
width: 50% !important; */ width: 50% !important; */
display: inline-block !important; display: inline-block !important;
/* height: 40% !important */ height: 60px !important;
/* background-color: #212121!important; */
/* margin: 10px !important; */
} }
.configscreen {
background: red
.cp-bloop {
width:60% !important;
/* height:400% !important; */
float:left !important;
padding: 5% !important;
/* border:1px solid red !important; */
background-color: #212121!important;
border-color:white;
}
.active-app {
background-color: #212121!important;
}
.cp-onboardscreen-checkmark {
text-align:right !important;
color: white !important;
} }

13
www/install/main.js
View File

@ -26,8 +26,6 @@ define([
var Messages = Cryptpad.Messages; var Messages = Cryptpad.Messages;
$(function () { $(function () {
Messages.admin_appSelection = 'App configuration saved'
if (LocalStore.isLoggedIn()) { if (LocalStore.isLoggedIn()) {
// already logged in, redirect to drive // already logged in, redirect to drive
document.location.href = '/drive/'; document.location.href = '/drive/';
@ -63,10 +61,10 @@ define([
var showTitleScreen = function (sendAdminDecree) { var showTitleScreen = function (sendAdminDecree, sendAdminRpc) {
var titleScreen = AppConfigScreen.titleConfig var titleScreen = AppConfigScreen.titleConfig
var form = titleScreen(sendAdminDecree) var form = titleScreen(sendAdminDecree, sendAdminRpc)
var elem = document.createElement('div'); var elem = document.createElement('div');
elem.setAttribute('id', 'cp-loading'); elem.setAttribute('id', 'cp-loading');
@ -159,7 +157,12 @@ define([
// rpc.send('ADMIN', params, callback) // rpc.send('ADMIN', params, callback)
// }; // };
// showTitleScreen(sendAdminDecree) // let sendAdminRpc = function (command, data, callback) {
// var params = [command, data];
// rpc.send('ADMIN', params, callback)
// };
// showTitleScreen(sendAdminDecree, sendAdminRpc)
// }); // });

84
www/kanban/inner.js
View File

@ -361,49 +361,49 @@ define([
}; };
// Colors // Colors
var $colors = $(colors); // var $colors = $(colors);
var palette = ['']; // var palette = [''];
for (var i=1; i<=8; i++) { palette.push('color'+i); } // for (var i=1; i<=8; i++) { palette.push('color'+i); }
var selectedColor = ''; // var selectedColor = '';
var resetThemeClass = function () { // var resetThemeClass = function () {
$colors.find('.cp-kanban-palette').each(function (i, el) { // $colors.find('.cp-kanban-palette').each(function (i, el) {
var $c = $(el); // var $c = $(el);
$c.removeClass('cp-kanban-palette-card'); // $c.removeClass('cp-kanban-palette-card');
$c.removeClass('cp-kanban-palette-board'); // $c.removeClass('cp-kanban-palette-board');
if (isBoard) { // if (isBoard) {
$c.addClass('cp-kanban-palette-board'); // $c.addClass('cp-kanban-palette-board');
} else { // } else {
$c.addClass('cp-kanban-palette-card'); // $c.addClass('cp-kanban-palette-card');
} // }
}); // });
}; // };
palette.forEach(function (color) { // palette.forEach(function (color) {
var $color = $(h('span.cp-kanban-palette.fa')); // var $color = $(h('span.cp-kanban-palette.fa'));
$color.addClass('cp-kanban-palette-'+(color || 'nocolor')); // $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
$color.click(function () { // $color.click(function () {
if (offline) { return; } // if (offline) { return; }
if (color === selectedColor) { return; } // if (color === selectedColor) { return; }
selectedColor = color; // selectedColor = color;
$colors.find('.cp-kanban-palette').removeClass('fa-check'); // $colors.find('.cp-kanban-palette').removeClass('fa-check');
var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor')); // var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
$col.addClass('fa-check'); // $col.addClass('fa-check');
dataObject.color = color; // dataObject.color = color;
commit(); // commit();
}).appendTo($colors); // }).appendTo($colors);
}); // });
var color = { // var color = {
getValue: function () { // getValue: function () {
return selectedColor; // return selectedColor;
}, // },
setValue: function (color) { // setValue: function (color) {
resetThemeClass(); // resetThemeClass();
$colors.find('.cp-kanban-palette').removeClass('fa-check'); // $colors.find('.cp-kanban-palette').removeClass('fa-check');
var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor')); // var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
$col.addClass('fa-check'); // $col.addClass('fa-check');
selectedColor = color; // selectedColor = color;
} // }
}; // };
var button = [{ var button = [{
className: 'danger left', className: 'danger left',