baladiwei
/
gitdock
mirror of https://mirror.trustie.net/root/gitdock.git
0
0
Fork 0
Code Issues Releases Wiki Activity

Complete restyling of file selector

This commit is contained in:
Marcel van Remmerden 2022-02-15 17:44:15 +01:00
parent 56db03f8ad
commit 6302d0b2cd
No known key found for this signature in database
GPG Key ID: 3AD81256454B7FFB
4 changed files with 88 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
login.html
View File

@ -216,13 +216,17 @@
placeholder="z.B. https://gitlab.mydomain.com"
/>
</div>
<div id="custom-cert-path" class="instance-details-input">
<label>Custom Certificate <small>optional</small></label>
<input type="checkbox" id="certificate-checkbox" name="certificate-checkbox" />
<label for="certificate-checkbox">I need to use a custom certificate.</label>
<div id="certificate-details">
<button onclick="chooseCertificate()" id="custom-cert-path-button">
Choose certificate file
Choose file
</button>
<button class="hidden" onclick="resetCertificate()" id="custom-cert-path-reset">
<!--<svg xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.75 3V1.5h4.5V3h-4.5Zm-1.5 0V1a1 1 0 0 1 1-1h5.5a1 1 0 0 1 1 1v2h2.5a.75.75 0 0 1 0 1.5h-.365l-.743 9.653A2 2 0 0 1 11.148 16H4.852a2 2 0 0 1-1.994-1.847L2.115 4.5H1.75a.75.75 0 0 1 0-1.5h2.5Zm-.63 1.5h8.76l-.734 9.538a.5.5 0 0 1-.498.462H4.852a.5.5 0 0 1-.498-.462L3.62 4.5Z"/></svg>-->
Change file
</button>
<span class="hidden" id="custom-cert-path-text"></span>
<button class="hidden" onclick="resetCertificate()" id="custom-cert-path-reset">Reset</button>
</div>
<button
type="submit"

53
myApp.js
View File

@ -662,41 +662,17 @@ ipcMain.on('change-show-dock-icon', (event, arg) => {
});
ipcMain.on('choose-certificate', () => {
mb.window.setAlwaysOnTop(true);
const filepaths = dialog.showOpenDialogSync();
setTimeout(() => {
mb.window.setAlwaysOnTop(false);
}, 200);
if (filepaths) {
const filepath = filepaths[0].replace(/\\/g, '/'); // convert \ to / otherwise separators get lost on windows
mb.window.webContents.executeJavaScript(
'document.getElementById("custom-cert-path-button").classList.add("hidden")',
);
mb.window.webContents.executeJavaScript(
`document.getElementById("custom-cert-path-text").innerText="${filepath}"`,
);
mb.window.webContents.executeJavaScript(
'document.getElementById("custom-cert-path-text").classList.remove("hidden")',
);
mb.window.webContents.executeJavaScript(
'document.getElementById("custom-cert-path-reset").classList.remove("hidden")',
);
}
chooseCertificate();
});
ipcMain.on('reset-certificate', () => {
mb.window.webContents.executeJavaScript(
'document.getElementById("custom-cert-path-button").classList.remove("hidden")',
);
mb.window.webContents.executeJavaScript(
'document.getElementById("custom-cert-path-text").innerText=""',
);
mb.window.webContents.executeJavaScript(
'document.getElementById("custom-cert-path-text").classList.add("hidden")',
);
mb.window.webContents.executeJavaScript(
'document.getElementById("custom-cert-path-reset").classList.add("hidden")',
);
chooseCertificate();
});
ipcMain.on('start-login', () => {
@ -769,7 +745,7 @@ if (store.access_token && store.user_id && store.username) {
});
} else {
mb.on('after-create-window', () => {
// mb.window.webContents.openDevTools()
mb.window.webContents.openDevTools();
mb.window.loadURL(`file://${__dirname}/login.html`).then(() => {
changeTheme(store.theme, false);
mb.showWindow();
@ -837,6 +813,29 @@ function setupCommandPalette() {
});
}
function chooseCertificate() {
mb.window.setAlwaysOnTop(true);
const filepaths = dialog.showOpenDialogSync();
setTimeout(() => {
mb.window.setAlwaysOnTop(false);
}, 200);
if (filepaths) {
const filepath = filepaths[0].replace(/\\/g, '/'); // convert \ to / otherwise separators get lost on windows
mb.window.webContents.executeJavaScript(
'document.getElementById("custom-cert-path-button").classList.add("hidden")',
);
mb.window.webContents.executeJavaScript(
`document.getElementById("custom-cert-path-text").innerText="${filepath}"`,
);
mb.window.webContents.executeJavaScript(
'document.getElementById("custom-cert-path-text").classList.remove("hidden")',
);
mb.window.webContents.executeJavaScript(
'document.getElementById("custom-cert-path-reset").classList.remove("hidden")',
);
}
}
function openSettingsPage() {
// eslint-disable-next-line no-underscore-dangle
if (!mb._isVisible) {

1
src/icons.js
View File

@ -15,7 +15,6 @@ module.exports = {
'<svg xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m9.5 14.5-6-2.5V4l6-2.5v13Zm-6.885-1.244A1 1 0 0 1 2 12.333V3.667a1 1 0 0 1 .615-.923L8.923.115A1.5 1.5 0 0 1 11 1.5V2h1.25c.966 0 1.75.783 1.75 1.75v8.5A1.75 1.75 0 0 1 12.25 14H11v.5a1.5 1.5 0 0 1-2.077 1.385l-6.308-2.629ZM11 12.5h1.25a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H11v9Z"/></svg>',
removeIcon:
'<svg xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.75 3V1.5h4.5V3h-4.5Zm-1.5 0V1a1 1 0 0 1 1-1h5.5a1 1 0 0 1 1 1v2h2.5a.75.75 0 0 1 0 1.5h-.365l-.743 9.653A2 2 0 0 1 11.148 16H4.852a2 2 0 0 1-1.994-1.847L2.115 4.5H1.75a.75.75 0 0 1 0-1.5h2.5Zm-.63 1.5h8.76l-.734 9.538a.5.5 0 0 1-.498.462H4.852a.5.5 0 0 1-.498-.462L3.62 4.5Z"/></svg>',
todosAllDoneIllustration:
'<svg width="150" height="110" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 293 216"><g fill="none" fill-rule="evenodd"><g transform="rotate(-5 211.388 -693.89)"><rect width="163.6" height="200" x=".2" stroke="#BBB" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 9" rx="6"/><g transform="translate(24 38)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#6B4FBB" opacity=".5" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#6B4FBB" opacity=".5" rx="1.5"/></g><g transform="translate(24 83)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g><g transform="translate(24 130)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g></g><path fill="#FFCE29" d="M30 11l-1.8 4-2-4-4-1.8 4-2 2-4 2 4 4 2M286 60l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8M263 97l-2 4-2-4-4-2 4-2 2-4 2 4 4 2M12 85l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8"/></g></svg>',
};

58
style.css
View File

@ -71,10 +71,18 @@ input,
cursor: pointer;
margin-bottom: 0.5rem;
}
#login-page #instance-checkbox {
#login-page #login-gitlab-button {
margin-bottom: 1rem;
}
#login-page #login-instance-button {
margin-top: 1rem;
}
#login-page #instance-checkbox,
#login-page #certificate-checkbox {
margin-left: 0;
}
#login-page #instance-checkbox ~ #instance-details {
#login-page #instance-checkbox ~ #instance-details,
#login-page #certificate-checkbox ~ #certificate-details {
display: none;
margin-top: 0.5rem;
}
@ -90,13 +98,55 @@ input,
box-sizing: border-box;
outline: none;
}
#login-page #instance-checkbox ~ #instance-details .instance-details-input label {
#login-page #instance-checkbox ~ #instance-details .instance-details-input label,
#login-page #certificate-checkbox ~ #certificate-details label {
font-weight: bold;
}
#login-page #instance-checkbox:checked ~ #instance-details {
#login-page #instance-checkbox:checked ~ #instance-details,
#login-page #certificate-checkbox:checked ~ #certificate-details {
display: flex;
flex-direction: column;
}
#login-page #certificate-checkbox:checked ~ #certificate-details {
margin-bottom: 0.5rem;
flex-direction: row;
align-items: center;
}
#login-page #certificate-checkbox:checked ~ #login-instance-button {
margin-top: 0.5rem;
}
#login-page #certificate-checkbox:checked ~ #certificate-details #custom-cert-path-button,
#login-page
#certificate-checkbox:checked
~ #certificate-details
#custom-cert-path-reset:not(.hidden) {
min-width: fit-content;
border: 1px solid var(--hover-color);
font-size: 0.875rem;
padding: 0.5rem;
background-color: var(--lighter-background-color);
border-radius: 0.375rem;
color: var(--text-color);
box-sizing: border-box;
outline: none;
cursor: pointer;
}
#login-page
#certificate-checkbox:checked
~ #certificate-details
#custom-cert-path-text:not(.hidden) {
width: 100%;
padding: 7px;
cursor: not-allowed;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#login-page #certificate-checkbox:checked ~ #certificate-details #custom-cert-path-reset svg {
width: 16px;
height: 16px;
margin: 0;
}
#login-page #instance-checkbox:checked ~ #instance-details .instance-details-input {
display: flex;
flex-direction: column;