Onboarding application grid UI

This commit is contained in:
David Benque 2024-06-21 10:47:52 +01:00
parent 4c465965af
commit 040c63b533
3 changed files with 27 additions and 34 deletions

View File

@ -39,30 +39,39 @@
.cp-admin-customize-apps-grid, .cp-admin-customize-options-grid {
display: grid;
gap: 0.25rem;
.cp-appblock {
}
gap: 0.5rem;
}
.cp-admin-customize-apps-grid {
grid-template-columns: 1fr 1fr 1fr;
.cp-appblock {
background-color: fade(@cryptpad_text_col, 10%);
padding: 0.3rem;
padding: 0.5rem;
border-radius: @variables_radius;
font-size: 1.2em;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
.iconColors_main();
&:hover {
cursor: pointer;
}
i.cp-icon {
font-size: 2.8rem;
}
.cp-app-name {
flex-grow: 1;
}
}
.cp-inactive-app {
background-color: transparent;
opacity: 0.75;
.cp-on-enabled {
visibility: hidden;
}
}
.cp-active-app {
background-color: fade(@cryptpad_text_col, 10%);
.cp-on-enabled {
visibility: visible;
}
@ -70,7 +79,6 @@
}
.cp-admin-customize-options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}

View File

@ -42,19 +42,6 @@
justify-content: center;
}
}
.cp-appblock {
.iconColors_main();
}
.cp-inactive-app {
.cp-on-enabled {
visibility: hidden;
}
}
.cp-active-app {
.cp-on-enabled {
visibility: visible;
}
}
}
}
@ -76,21 +63,16 @@
.cp-onboardscreen-screentitle {
text-align: center;
font-size: 1rem;
.cp-onboardscreen-maintitle {
float:center;
padding:10px;
h1.cp-onboardscreen-title {
font-family: "IBM Plex Mono";
color: @cryptpad_color_link;
font-size: 1.5rem;
font-weight: 500;
}
margin-bottom: 1rem;
h1.cp-onboardscreen-title {
font-family: "IBM Plex Mono";
color: @cryptpad_color_link;
font-size: 1.5rem;
font-weight: 500;
}
}
.cp-instance-form {
margin-top: 1rem;
display: flex;
flex-direction: row;
gap: 2rem;
@ -138,6 +120,7 @@ nav.cp-onboardscreen-nav {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: 1rem;
}

View File

@ -236,9 +236,11 @@ define([
allApps.forEach(app => {
let name = Messages.type[app] || app;
let icon = UI.getNewIcon(app);
let appBlock = h('div.cp-appblock', [
let appBlock = h('div.cp-appblock',
{tabindex:0, role:"button"},
[
icon,
h('span', name),
h('span.cp-app-name', name),
h('i.fa.fa-check.cp-on-enabled')
]);
let $app = $(appBlock).appendTo($grid);
@ -312,7 +314,7 @@ define([
});
let mfaOption = h('div', [
let mfaOption = h('div.cp-optionblock', [
forceMFA,
h('br'),
h('span', Messages.admin_onboardingMfa)