Commit a699110c authored by ransome1's avatar ransome1
Browse files

Enhanced shortcuts for MacOS, CSS optimizations

parent 76cd0033
......@@ -64,8 +64,8 @@ You can download sleek for Windows, MacOS and Linux from
3. Install dependencies `yarn install --production`
4. Build sleek `yarn build:windows` or `yarn build:linux` or `yarn build:macos`
### sleeks Roadmap 2021
A prioritized backlog for new features and known issues can be found on <a href="https://github.com/ransome1/sleek/projects/2">sleeks' roadmap for 2021</a>.
### sleeks state of development
A prioritized backlog of new features and known issues can be found <a href="https://github.com/ransome1/sleek/projects/2">here</a>.
### Features
* An existing todo.txt file can be used or a new one can be created
......@@ -114,16 +114,7 @@ A prioritized backlog for new features and known issues can be found on <a href=
- French
* Tabindex available
* Existing todos can be used as templates for new ones
* Basic keyboard shortcuts are available:
- New todo: CMD/CTRL + n
- Find todo: CMD/CTRL + f
- Show or hide completed todos: CMD/CTRL + h
- Toggle dark mode: CMD/CTRL + d
- Open file: CMD/CTRL + o
- Open settings: CMD/CTRL + ,
- Toggle side bar: CMD/CTRL + b
- Set priorities (available when add/edit window is open): CTRL+SHIFT+[A-Z]
- Submit todo (available when add/edit window is open): CTRL + Enter
* <a href="https://github.com/ransome1/sleek/wiki/Keyboard-shortcuts">Keyboard shortcuts</a> following todotxt.net
### Used libraries
- Electron: https://github.com/electron/electron
......
......@@ -999,12 +999,7 @@ nav ul:nth-child(2) {
position: absolute !important;
}
.modal.content .modal-card {
width: 900px !important;
height: auto;
z-index: 60;
background: #ebebeb;
padding: 1em 2em;
border-radius: 0.25rem;
}
.modal.content .modal-background {
z-index: 55;
......@@ -1012,6 +1007,7 @@ nav ul:nth-child(2) {
.modal.content .modal-card-body {
background: none;
display: none;
padding: 0 2em 2em 2em;
}
.modal.content .modal-card-body ul li a {
text-decoration: underline;
......@@ -1032,10 +1028,10 @@ nav ul:nth-child(2) {
left: -0.8em;
}
.modal.content .modal-card-body table.settings tr td:first-child {
width: 80%;
padding-right: 3em;
}
.modal.content .modal-card-body table.settings tr td:last-child {
min-width: 10em;
text-align: center;
}
.modal.content .modal-card-body table.shortcuts td .tag {
......@@ -1056,10 +1052,8 @@ nav ul:nth-child(2) {
margin: 0 auto;
}
.modal.content .tabs {
display: block;
height: 4em;
margin-bottom: 0;
overflow-x: shown;
display: flex;
flex-shrink: 0;
}
.modal.content .tabs li a {
border-width: 2px;
......@@ -5556,7 +5550,7 @@ button.dropdown-item.is-active {
.modal-card {
margin: 0 auto;
max-height: calc(100vh - 40px);
width: 800px;
width: 900px;
}
}
......
This diff is collapsed.
/*# sourceMappingURL=variables.css.map */
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"variables.css"}
\ No newline at end of file
......@@ -523,15 +523,25 @@
<td><span class="tag is-info is-large">H</span></td>
<td><span class="tag is-info is-large">H</span></td>
</tr>
<tr>
<td id="helpTabKeyboardTR8TD1"></td>
<td><span class="tag is-info is-large">B</span></td>
<td><span class="tag is-info is-large">B</span></td>
</tr>
<tr>
<td>Archive completed todos to done.txt file</td>
<td><span class="tag is-info is-large">A</span></td>
<td><span class="tag is-info is-large">A</span></td>
</tr>
<tr>
<td id="helpTabKeyboardTR4TD1"></td>
<td><span class="tag is-info is-large">D</span></td>
<td><span class="tag is-info is-large">D</span></td>
</tr>
<tr>
<td id="helpTabKeyboardTR8TD1"></td>
<td><span class="tag is-info is-large">B</span></td>
<td><span class="tag is-info is-large">B</span></td>
<td id="helpTabKeyboardTR6TD1"></td>
<td><span class="tag is-info is-large">,</span></td>
<td><span class="tag is-info is-large">,</span></td>
</tr>
<tr>
<td id="helpTabKeyboardTR9TD1"></td>
......@@ -539,14 +549,9 @@
<td><span class="tag is-info is-large">0</span></td>
</tr>
<tr>
<td>Archive completed todos to done.txt file</td>
<td><span class="tag is-info is-large">A</span></td>
<td><span class="tag is-info is-large">A</span></td>
</tr>
<tr>
<td id="helpTabKeyboardTR6TD1"></td>
<td><span class="tag is-dark is-large">Ctrl</span> <i class="fas fa-plus"></i> <span class="tag is-info is-large">,</span></td>
<td><span class="tag is-dark is-large">cmd</span> <i class="fas fa-plus"></i> <span class="tag is-info is-large">,</span></td>
<td id="helpTabKeyboardTR12TD1"></td>
<td><span class="tag is-info is-large">.</span></td>
<td><span class="tag is-info is-large">.</span></td>
</tr>
<tr>
<td id="helpTabKeyboardTR5TD1"></td>
......@@ -579,17 +584,17 @@
<tr>
<td>Increase/decrease due date</td>
<td><span class="tag is-dark is-large">Ctrl + Alt</span> <i class="fas fa-plus"></i> <span class="tag is-info is-large">Up/Down</span></td>
<td><span class="tag is-dark is-large">Ctrl + Alt</span> <i class="fas fa-plus"></i> <span class="tag is-info is-large">Up/Down</span></td>
<td><span class="tag is-dark is-large">cmd + Alt</span> <i class="fas fa-plus"></i> <span class="tag is-info is-large">Up/Down</span></td>
</tr>
<tr>
<td>Clear due date</td>
<td><span class="tag is-dark is-large">Ctrl + Alt</span> <i class="fas fa-plus"></i> <span class="tag is-info is-large">Right/Left</span></td>
<td><span class="tag is-dark is-large">Ctrl + Alt</span> <i class="fas fa-plus"></i> <span class="tag is-info is-large">Right/Left</span></td>
<td><span class="tag is-dark is-large">cmd + Alt</span> <i class="fas fa-plus"></i> <span class="tag is-info is-large">Right/Left</span></td>
</tr>
<tr>
<td id="helpTabKeyboardTR10TD1"></td>
<td><span class="tag is-dark is-large">Ctrl</span> <i class="fas fa-plus"></i> <span class="tag is-info is-large">Enter</span></td>
<td><span class="tag is-dark is-large">Ctrl</span> <i class="fas fa-plus"></i> <span class="tag is-info is-large">Enter</span></td>
<td><span class="tag is-dark is-large">cmd</span> <i class="fas fa-plus"></i> <span class="tag is-info is-large">Enter</span></td>
</tr>
</table>
</section>
......
......@@ -21,8 +21,6 @@ const helpTabDatesRecurrencesBody2 = document.getElementById("helpTabDatesRecurr
const helpTabDatesRecurrencesTitle1 = document.getElementById("helpTabDatesRecurrencesTitle1");
const helpTabDatesRecurrencesTitle2 = document.getElementById("helpTabDatesRecurrencesTitle2");
const helpTabKeyboardTitle = document.getElementById("helpTabKeyboardTitle");
const helpTabKeyboardTR10TD1 = document.getElementById("helpTabKeyboardTR10TD1");
const helpTabKeyboardTR11TD1 = document.getElementById("helpTabKeyboardTR11TD1");
const helpTabKeyboardTR1TD1 = document.getElementById("helpTabKeyboardTR1TD1");
const helpTabKeyboardTR1TH1 = document.getElementById("helpTabKeyboardTR1TH1");
const helpTabKeyboardTR2TD1 = document.getElementById("helpTabKeyboardTR2TD1");
......@@ -33,6 +31,9 @@ const helpTabKeyboardTR6TD1 = document.getElementById("helpTabKeyboardTR6TD1");
const helpTabKeyboardTR7TD1 = document.getElementById("helpTabKeyboardTR7TD1");
const helpTabKeyboardTR8TD1 = document.getElementById("helpTabKeyboardTR8TD1");
const helpTabKeyboardTR9TD1 = document.getElementById("helpTabKeyboardTR9TD1");
const helpTabKeyboardTR10TD1 = document.getElementById("helpTabKeyboardTR10TD1");
const helpTabKeyboardTR11TD1 = document.getElementById("helpTabKeyboardTR11TD1");
const helpTabKeyboardTR12TD1 = document.getElementById("helpTabKeyboardTR12TD1");
const helpTabPrioritiesBody = document.getElementById("helpTabPrioritiesBody");
const helpTabPrioritiesTitle = document.getElementById("helpTabPrioritiesTitle");
const settingsLanguage = document.getElementById("settingsLanguage");
......@@ -83,6 +84,7 @@ helpTabKeyboardTR7TD1.innerHTML = translations.helpTabKeyboardTR7TD1;
helpTabKeyboardTR8TD1.innerHTML = translations.toggleFilter;
helpTabKeyboardTR9TD1.innerHTML = translations.resetFilters;
helpTabKeyboardTR11TD1.innerHTML = translations.createFile;
helpTabKeyboardTR12TD1.innerHTML = translations.reload;
helpTabPrioritiesBody.innerHTML = translations.helpTabPrioritiesBody;
helpTabPrioritiesTitle.innerHTML = translations.helpTabPrioritiesTitle;
settingsTabAbout.innerHTML = translations.about;
......
......@@ -230,7 +230,7 @@ const createWindow = async function() {
if(typeof userData.data.sortCompletedLast != "boolean") userData.set("sortCompletedLast", false);
if(typeof userData.data.sortBy != "string") userData.set("sortBy", "priority");
if(typeof userData.data.zoom != "string") userData.set("zoom", "100");
if(typeof userData.data.tray != "boolean") userData.set("tray", false);
if(typeof appData.tray != "boolean") appData.tray = false;
if(!Array.isArray(userData.data.dismissedNotifications)) userData.set("dismissedNotifications", []);
if(!Array.isArray(userData.data.dismissedMessages)) userData.set("dismissedMessages", []);
if(!Array.isArray(userData.data.hideFilterCategories)) userData.set("hideFilterCategories", []);
......@@ -284,34 +284,61 @@ const createWindow = async function() {
// ########################################################################################################################
// MAIN MENU
// ########################################################################################################################
let subMenu;
if(appData.os==="mac") {
subMenu = [
{
label: translations.openFile,
click: function () {
openDialog("open");
}
},
{
label: translations.createFile,
click: function () {
openDialog("create");
}
},
{ type: "separator" },
{
role: "close",
accelerator: "Command+W",
label: translations.close
},
{
role: "quit",
accelerator: "Command+Q",
click: function() {
app.quit();
}
}
];
} else {
subMenu = [
{
label: translations.openFile,
click: function () {
openDialog("open");
}
},
{
label: translations.createFile,
click: function () {
openDialog("create");
}
},
{ type: "separator" },
{
role: "close",
label: translations.close
}
];
}
const menuTemplate = [
{
label: translations.file,
submenu: [
{
label: translations.openFile,
click: function () {
openDialog("open");
}
},
{
label: translations.createFile,
click: function () {
openDialog("create");
}
},
{ type: "separator" },
appData.os==="mac" ? {
role: "quit",
accelerator: "Command+Q",
click: function() {
app.quit();
}
} : {
role: "close",
label: translations.close
}
]
submenu: subMenu
},
{
label: translations.edit,
......
......@@ -443,6 +443,17 @@ function registerEvents() {
}
function registerKeyboardShortcuts() {
try {
// CMD/metaKey only works on keydown
window.addEventListener("keydown", function(event) {
// open file
if((event.ctrlKey || event.metaKey) && event.key === "o") {
window.api.send("openOrCreateFile", "open");
}
// create file
if((event.ctrlKey || event.metaKey) && event.key === "c") {
window.api.send("openOrCreateFile", "create");
}
}, true)
window.addEventListener("keyup", function(event) {
// open settings
if(event.key === "," && !modalForm.classList.contains("is-active") && document.activeElement.id!="todoTableSearch") {
......@@ -452,14 +463,6 @@ function registerKeyboardShortcuts() {
handleError(error);
});
}
// open file
if((event.ctrlKey || event.metaKey) && event.key === "o") {
window.api.send("openOrCreateFile", "open");
}
// create file
if((event.ctrlKey || event.metaKey) && event.key === "c") {
window.api.send("openOrCreateFile", "create");
}
// open help
if(event.key === "?" && !modalForm.classList.contains("is-active") && document.activeElement.id!="todoTableSearch") {
content.showContent(document.getElementById("modalHelp")).then(function(response) {
......@@ -546,13 +549,7 @@ function registerKeyboardShortcuts() {
}).catch(error => {
handleError(error);
});
} /*else if((event.ctrlKey || event.metaKey) && event.shiftKey && event.key.length===1 && event.key.match(/[_]/i)) {
form.setPriority(null).then(response => {
console.log(response);
}).catch(error => {
handleError(error);
});
}*/
}
// submit form
if(event.key==="Enter" && (event.ctrlKey || event.metaKey)) {
form.submitForm().then(response => {
......@@ -567,7 +564,6 @@ function registerKeyboardShortcuts() {
}).catch(function(error) {
handleError(error);
});
//this.classList.remove("is-active");
} else if(event.key === "Escape" && autoCompleteContainer.classList.contains("is-active")) {
autoCompleteContainer.classList.remove("is-active");
}
......@@ -584,21 +580,11 @@ function registerKeyboardShortcuts() {
form.setDueDate(0);
}
});
// for escape we have specific cases not applied to window
modalHelp.addEventListener ("keydown", function() {
if(event.key === "Escape") this.classList.remove("is-active");
});
modalChangeFile.addEventListener ("keydown", function () {
if(event.key === "Escape") {
resetModal().then(function(response) {
console.info(response);
}).catch(function(error) {
handleError(error);
});
}
});
modalSettings.addEventListener ("keydown", function() {
if(event.key === "Escape") this.classList.remove("is-active");
// event for closing modal windows
modal.forEach(function(element) {
element.addEventListener("keyup", function(event) {
if(event.key === "Escape") this.classList.remove("is-active");
});
});
autoCompleteContainer.addEventListener ("keydown", function() {
if(event.key === "Escape") this.classList.remove("is-active")
......
......@@ -971,12 +971,7 @@ nav {
position: absolute!important;
}
.modal-card {
width: 900px!important;
height: auto;
z-index: 60;
background: $light-grey;
padding: 1em 2em;
border-radius: 0.25rem;
}
.modal-background {
z-index: 55;
......@@ -984,9 +979,7 @@ nav {
.modal-card-body {
background: none;
display: none;
ul {
}
padding: 0 2em 2em 2em;
ul li a {
text-decoration: underline;
}
......@@ -1007,10 +1000,11 @@ nav {
}
}
table.settings tr td:first-child {
width: 80%;
//width: 80%;
padding-right: 3em;
}
table.settings tr td:last-child {
min-width: 10em;
text-align: center;
}
table.shortcuts td {
......@@ -1033,14 +1027,16 @@ nav {
display: block; margin: 0 auto;
}
.tabs {
display: block;
height: 4em;
margin-bottom: 0;
overflow-x: shown;
}
.tabs li a {
border-width: 2px;
margin-bottom: 0;
display: flex;
flex-shrink: 0;
//display: block;
//height: 4em;
//margin-bottom: 0;
//overflow-x: shown;
li a {
border-width: 2px;
margin-bottom: 0;
}
}
}
.dueDate {
......
......@@ -23,4 +23,4 @@ $modal-background-background-color: rgba(0, 0, 0, 0.25);
$modal-z: 50;
$family-sans-serif: "FreeSans", Helvetica, Arial, "Noto Sans", "DejaVu Sans", sans-serif;
$modal-content-width: 800px;
$modal-content-width: 900px;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment