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 {
.framework_min_main();

347
www/install/appconfigscreen.js
View File

@ -24,18 +24,47 @@ define([
) {
//XXX
Messages.admin_onboardingTitle = 'Welcome to your CryptPad instance'
Messages.admin_onboardingDesc = 'Please choose a title and description'
Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance'
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 = {};
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;
@ -97,7 +126,7 @@ define([
reader.onloadend = function () {
let dataURL = this.result;
console.log(dataURL, 'dataulr')
sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) {
sendAdminRpc('UPLOAD_LOGO', {dataURL}, function (e, response) {
$button.removeAttr('disabled');
if (e || response.error) {
UI.warn(Messages.error);
@ -141,78 +170,93 @@ define([
}
var colorBlock = function () {
// var colorText = Messages.admin_colorTitle
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);
// let inputColor = blocks.input({
// type: 'color',
// value: (Instance && Instance.color) || '#0087FF'
// });
// let label = blocks.labelledInput(Messages.admin_colorPick, inputColor);
// 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);
let remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
let $remove = $(remove);
// let removeColor = blocks.button('danger', '', Messages.admin_logoRemoveButton);
// let $removeColor = $(removeColor);
let setColor = (color, done) => {
sframeCommand('CHANGE_COLOR', {color}, (err, response) => {
if (err) {
UI.warn(Messages.error);
console.error(err, response);
done(false);
return;
}
done(true);
UI.log(Messages.saved);
});
};
// let setColor = (color, done) => {
// sendAdminDecree('CHANGE_COLOR', {color}, function (e, response) {
// if (err) {
// UI.warn(Messages.error);
// console.error(err, response);
// done(false);
// return;
// }
// done(true);
// UI.log(Messages.saved);
// });
// };
let btn = blocks.activeButton('primary', '',
Messages.admin_colorChange, (done) => {
let color = $input.val();
setColor(color, done);
});
// //color picker
// let $inputColor = $(inputColor).on('change', () => {
// require(['/lib/less.min.js'], (Less) => {
// let color = $inputColor.val();
// let lColor = Less.color(color.slice(1));
// let lighten = Less.functions.functionRegistry._data.lighten;
// let lightColor = lighten(lColor, {value:30}).toRGB();
// $preview.find('.btn-primary').css({
// 'background-color': color
// });
// $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`);
// });
// });
let $input = $(input).on('change', () => {
require(['/lib/less.min.js'], (Less) => {
let color = $input.val();
let lColor = Less.color(color.slice(1));
let lighten = Less.functions.functionRegistry._data.lighten;
let lightColor = lighten(lColor, {value:30}).toRGB();
$preview.find('.btn-primary').css({
'background-color': color
});
$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`);
});
});
UI.confirmButton($remove, {
classes: 'btn-danger',
multiple: true
}, function () {
$remove.attr('disabled', 'disabled');
setColor('', () => {});
});
// let form = blocks.form([
var form = [labelCurrent,
label]
// ], blocks.nav([btn, remove, btn.spinner]));
return form
}
// 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) {
@ -226,7 +270,7 @@ define([
// }
// // flushCache();
// 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) {
@ -239,7 +283,7 @@ define([
// }
// // flushCache();
// done(true);
// UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
// UI.log(Messages.saved);
// })
@ -255,45 +299,36 @@ define([
// UI.log(Messages.saved);
// });
var nextPageForm = AppConfigScreen.appConfig(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();
displayForm(sendAdminDecree, 0)
});
var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0])
var logoInput = h('div.cp-onboardscreen-logo', logoBlock())
console.log(titleInput)
var logoInput = h('div.cp-onboardscreen-logo', logoBlock(), {style:'width:20%;height:20%'})
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')
$(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 form = blocks.form([
screenTitleDiv,
titleInput, descriptionInput,
// logoInput
// $(titleInput),descriptionInput, inputLogo
// , label, labelCurrent
screenTitleDiv,
titleInput, descriptionInput,
logoInput,
colorInput,
], 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) {
var restrict = blocks.activeCheckbox({
key: 'registration',
getState: function () {
@ -301,16 +336,16 @@ define([
},
query: function (val, setState) {
sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
if (e || response.error) {
UI.warn(Messages.error);
$input.val('');
console.error(e, response);
done(false);
return;
}
// flushCache();
// done(true);
UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
// if (e || response.error) {
// UI.warn(Messages.error);
// $input.val('');
// console.error(e, response);
// done(false);
// return;
// }
// // flushCache();
// // done(true);
// UI.log(Messages.saved);
})
},
@ -322,34 +357,50 @@ define([
return false
},
query: function (val, setState) {
sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
if (e || response.error) {
UI.warn(Messages.error);
$input.val('');
console.error(e, response);
done(false);
return;
}
// flushCache();
done(true);
UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
// sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
// if (e || response.error) {
// UI.warn(Messages.error);
// $input.val('');
// console.error(e, response);
// done(false);
// return;
// }
// // flushCache();
// done(true);
// 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/';
return;
})
var prev = blocks.activeButton('primary', '', Messages.settings_prev, function (done) {
displayForm(sendAdminDecree, 2)
})
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([
screenTitleDiv,
restrict, forceMFA],
[button])
grid],
[prev, save])
$(form).addClass('cp-onboardscreen-form')
return form
@ -363,24 +414,29 @@ define([
const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
const availableApps = []
function select(app) {
function select(app, appBlock) {
if (availableApps.indexOf(app) === -1) {
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')
} else {
availableApps.splice(availableApps.indexOf(app), 1)
$(`#${app}-block`).attr('class', 'inactive-app')
appBlock.remove('.cp-onboardscreen-checkmark')
}
}
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-row')
$(appBlock).addClass('cp-app-drive-new-doc')
$(grid).append(appBlock);
$(appBlock).on('click', () => select(app))
$(appBlock).on('click', () => select(app, $(appBlock)))
});
var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
@ -394,35 +450,28 @@ define([
// }
// // flushCache();
// done(true);
// UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
// UI.log(Messages.saved);
// })
UI.log('Messages._getKey(, [Messages.admin_appSelection])');
var nextPageForm = AppConfigScreen.mfaRegistrationScreen(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();
UI.log(Messages.saved);
displayForm(sendAdminDecree, 1)
});
Messages.settings_prev = 'Back'
var prev = blocks.activeButton('primary', '', Messages.settings_prev, function (done) {
displayForm(sendAdminDecree, 2)
})
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([
screenTitleDiv,
grid
], blocks.nav([save]));
], blocks.nav([prev, save]));
$(form).addClass('cp-onboardscreen-form')
return form
}

36
www/install/configscreen.css
View File

@ -81,9 +81,10 @@
.cp-admin-customize-apps-grid {
width: 40%;
color: blue;
width: 80%;
color: white;
height: 10px !important;
margin:auto;
}
@ -102,12 +103,37 @@
width: 50% !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;
$(function () {
Messages.admin_appSelection = 'App configuration saved'
if (LocalStore.isLoggedIn()) {
// already logged in, redirect to drive
document.location.href = '/drive/';
@ -63,10 +61,10 @@ define([
var showTitleScreen = function (sendAdminDecree) {
var showTitleScreen = function (sendAdminDecree, sendAdminRpc) {
var titleScreen = AppConfigScreen.titleConfig
var form = titleScreen(sendAdminDecree)
var form = titleScreen(sendAdminDecree, sendAdminRpc)
var elem = document.createElement('div');
elem.setAttribute('id', 'cp-loading');
@ -159,7 +157,12 @@ define([
// 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
var $colors = $(colors);
var palette = [''];
for (var i=1; i<=8; i++) { palette.push('color'+i); }
var selectedColor = '';
var resetThemeClass = function () {
$colors.find('.cp-kanban-palette').each(function (i, el) {
var $c = $(el);
$c.removeClass('cp-kanban-palette-card');
$c.removeClass('cp-kanban-palette-board');
if (isBoard) {
$c.addClass('cp-kanban-palette-board');
} else {
$c.addClass('cp-kanban-palette-card');
}
});
};
palette.forEach(function (color) {
var $color = $(h('span.cp-kanban-palette.fa'));
$color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
$color.click(function () {
if (offline) { return; }
if (color === selectedColor) { return; }
selectedColor = color;
$colors.find('.cp-kanban-palette').removeClass('fa-check');
var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
$col.addClass('fa-check');
// var $colors = $(colors);
// var palette = [''];
// for (var i=1; i<=8; i++) { palette.push('color'+i); }
// var selectedColor = '';
// var resetThemeClass = function () {
// $colors.find('.cp-kanban-palette').each(function (i, el) {
// var $c = $(el);
// $c.removeClass('cp-kanban-palette-card');
// $c.removeClass('cp-kanban-palette-board');
// if (isBoard) {
// $c.addClass('cp-kanban-palette-board');
// } else {
// $c.addClass('cp-kanban-palette-card');
// }
// });
// };
// palette.forEach(function (color) {
// var $color = $(h('span.cp-kanban-palette.fa'));
// $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
// $color.click(function () {
// if (offline) { return; }
// if (color === selectedColor) { return; }
// selectedColor = color;
// $colors.find('.cp-kanban-palette').removeClass('fa-check');
// var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
// $col.addClass('fa-check');
dataObject.color = color;
commit();
}).appendTo($colors);
});
var color = {
getValue: function () {
return selectedColor;
},
setValue: function (color) {
resetThemeClass();
$colors.find('.cp-kanban-palette').removeClass('fa-check');
var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
$col.addClass('fa-check');
selectedColor = color;
}
};
// dataObject.color = color;
// commit();
// }).appendTo($colors);
// });
// var color = {
// getValue: function () {
// return selectedColor;
// },
// setValue: function (color) {
// resetThemeClass();
// $colors.find('.cp-kanban-palette').removeClass('fa-check');
// var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
// $col.addClass('fa-check');
// selectedColor = color;
// }
// };
var button = [{
className: 'danger left',