diff --git a/index.html b/index.html index 972d47f..c9e0b6e 100644 --- a/index.html +++ b/index.html @@ -18,21 +18,21 @@ - + Issues
- + MRs
- + To-Dos
@@ -42,18 +42,21 @@ -
+
+
+
Recently viewed
@@ -111,6 +114,15 @@
Bookmarks
+
+
+
Add a new GitLab bookmark 🔖
+
Bookmarks are helpful when you have an issue/merge request you will have to come back to + repeatedly.
+
+
+
diff --git a/myApp.js b/myApp.js index cd79d26..bf084a5 100644 --- a/myApp.js +++ b/myApp.js @@ -28,7 +28,7 @@ const mb = menubar({ showOnAllWorkspaces: false, icon: __dirname + '/assets/gitlab.png', browserWindow: { - width: 550, + width: 600, height: 650, webPreferences: { preload: __dirname + '/preload.js', @@ -132,10 +132,14 @@ if (access_token && user_id && username) { }) ipcMain.on('change-commit', (event, arg) => { - mb.window.webContents.executeJavaScript('document.getElementById("pipeline").innerHTML = ""') + mb.window.webContents.executeJavaScript('document.getElementById("pipeline").innerHTML = "
"') changeCommit(arg) }) + ipcMain.on('add-bookmark', (event, arg) => { + addBookmark(arg) + }) + mb.window.webContents.setWindowOpenHandler(({ url }) => { shell.openExternal(url); return { action: 'deny' }; @@ -198,7 +202,7 @@ function getUser() { let userString = '
' + user.name + '@' + user.username + '
' mb.window.webContents.executeJavaScript('document.getElementById("user").innerHTML = "' + userString + '"') }) - fetch('https://gitlab.com/api/v4/issues_statistics?scope=all&assignee_id=' + user_id + '&access_token=' + access_token).then(result => { + /*fetch('https://gitlab.com/api/v4/issues_statistics?scope=all&assignee_id=' + user_id + '&access_token=' + access_token).then(result => { return result.json() }).then(stats => { mb.window.webContents.executeJavaScript('document.getElementById("issues-count").innerHTML = "' + stats.statistics.counts.opened + '"') @@ -212,8 +216,7 @@ function getUser() { fetch('https://gitlab.com/api/v4/todos?&per_page=1&pagination=keyset&access_token=' + access_token).then(result => { let count = result.headers.get('x-total') mb.window.webContents.executeJavaScript('document.getElementById("todos-count").innerHTML = "' + count + '"') - return result.json() - }) + })*/ } function getLastCommits() { @@ -232,20 +235,20 @@ function getLastCommits() { function changeCommit(forward = true) { let nextCommit - let index = recentCommits.findIndex(commit => commit.id == currentCommit.id) - if(forward) { - if(index == recentCommits.length -1) { + let index = recentCommits.findIndex(commit => commit.id == currentCommit.id) + if (forward) { + if (index == recentCommits.length - 1) { nextCommit = recentCommits[0] index = 1 - }else{ + } else { nextCommit = recentCommits[index + 1] index += 2 } - }else{ - if(index == 0) { - nextCommit = recentCommits[recentCommits.length -1] + } else { + if (index == 0) { + nextCommit = recentCommits[recentCommits.length - 1] index = recentCommits.length - }else{ + } else { nextCommit = recentCommits[index - 1] } } @@ -484,19 +487,24 @@ function getIssues(url = 'https://gitlab.com/api/v4/issues?scope=assigned_to_me& } function getMRs(url = 'https://gitlab.com/api/v4/merge_requests?scope=assigned_to_me&state=opened&order_by=updated_at&per_page=' + numberOfMRs + '&access_token=' + access_token) { - let mrsString = '
    ' + let mrsString = '' let type = "'MRs'" let keysetLinks - console.log(url) fetch(url).then(result => { + console.log(url) keysetLinks = result.headers.get('Link') return result.json() }).then(mrs => { - for (mr of mrs) { - mrsString += '
  • ' - mrsString += '' + escapeHtml(mr.title) + 'Updated ' + timeSince(new Date(mr.updated_at)) + ' ago · ' + mr.references.full.split('#')[0] + '
' + if (mrs.length > 0) { + mrsString = '
' + } + mrsString += '' + displayPagination(keysetLinks, type) + } else { + mrsString = '
No merge requests.
' } - mrsString += '' + displayPagination(keysetLinks, type) mb.window.webContents.executeJavaScript('document.getElementById("detail-content").innerHTML = "' + mrsString + '"') }) } @@ -558,12 +566,12 @@ function displayPagination(keysetLinks, type) { function displayProjectPage(project) { let logo - if(project.avatar_url && project.avatar_url != null && project.visibility == 'public') { + if (project.avatar_url && project.avatar_url != null && project.visibility == 'public') { logo = '' - }else{ + } else { logo = '
' + project.name.charAt(0).toUpperCase() + '
' } - mb.window.webContents.executeJavaScript('document.getElementById("detail-headline").innerHTML = "
' + logo + '
' + project.namespace.name + '' + project.name + '
"') + mb.window.webContents.executeJavaScript('document.getElementById("detail-headline").innerHTML = "
' + logo + '
' + project.namespace.name + '' + project.name + '
"') } function displayCommit(commit, project) { @@ -594,9 +602,9 @@ function displayCommit(commit, project) { } } } else { - if(project.avatar_url && project.avatar_url != null && project.visibility == 'public') { + if (project.avatar_url && project.avatar_url != null && project.visibility == 'public') { logo = '' - }else{ + } else { logo = '
' + project.name.charAt(0).toUpperCase() + '
' } //TODO When https://gitlab.com/gitlab-org/gitlab/-/issues/20924 is fixed, get users avatar here @@ -610,6 +618,10 @@ function displayCommit(commit, project) { return '
' + logo + '
' + commit.title + '
' + timeSince(new Date(commit.committed_date.split('.')[0] + 'Z')) + ' ago · ' + project.name_with_namespace + '
' } +function addBookmark(link) { + console.log(link) +} + function escapeHtml(unsafe) { return unsafe .replace(/&/g, "&") diff --git a/preload.js b/preload.js index 9451775..a16760f 100644 --- a/preload.js +++ b/preload.js @@ -1,14 +1,15 @@ const { contextBridge, ipcRenderer } = require('electron') -contextBridge.exposeInMainWorld('electron',{ - goToDetail: (value) => ipcRenderer.send('detail-page', value), - goToOverview: () => ipcRenderer.send('go-to-overview'), - switchIssues: (value) => ipcRenderer.send('switch-issues', value), - switchMRs: (value) => ipcRenderer.send('switch-mrs', value), - switchPage: (value) => ipcRenderer.send('switch-page', value), - searchRecent: (value) => ipcRenderer.send('search-recent', value), - changeCommit: (value) => ipcRenderer.send('change-commit', value) - } +contextBridge.exposeInMainWorld('electron', { + goToDetail: (value) => ipcRenderer.send('detail-page', value), + goToOverview: () => ipcRenderer.send('go-to-overview'), + switchIssues: (value) => ipcRenderer.send('switch-issues', value), + switchMRs: (value) => ipcRenderer.send('switch-mrs', value), + switchPage: (value) => ipcRenderer.send('switch-page', value), + searchRecent: (value) => ipcRenderer.send('search-recent', value), + changeCommit: (value) => ipcRenderer.send('change-commit', value), + addBookmark: (value) => ipcRenderer.send('add-bookmark', value) +} ) window.addEventListener('DOMContentLoaded', () => { diff --git a/renderer.js b/renderer.js index 53fc440..3ab10d0 100644 --- a/renderer.js +++ b/renderer.js @@ -46,4 +46,8 @@ function searchRecent(input) { function changeCommit(value) { window.electron.changeCommit(value) +} + +function addBookmark(value) { + window.electron.addBookmark(value) } \ No newline at end of file diff --git a/style.css b/style.css index fa412e5..1e9cf37 100644 --- a/style.css +++ b/style.css @@ -60,14 +60,18 @@ a:hover { display: flex; flex-grow: 1; justify-content: flex-end; + margin: -0.375rem 0 -0.25rem; + margin-right: -0.5rem; } #header #counts .count { - height: 1rem; - padding: 0.5rem 0.25rem 0.5rem 0.75rem; + padding: 0.5rem 0.25rem 0.25rem; margin-left: 0.25rem; border-radius: 0.375rem; align-items: center; display: flex; + flex-direction: column; + color: #aaa; + font-size: 0.825rem; } #header #counts .count:hover { background-color: #30363d; @@ -147,6 +151,7 @@ a:hover { background-color: #0d1117; border: 1px solid #30363d; border-radius: 0.375rem; + min-height: 2.5rem; } .commit:hover { background-color: #161b22; @@ -240,6 +245,55 @@ a:hover { font-size: 0.825rem; color: #aaa; } +#bookmarks #new-bookmark { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + border: 2px dashed #21262d; + border-radius: 0.375rem; + padding: 1rem 3rem; + background-color: #0d1117; +} +#bookmarks #new-bookmark #cta { + margin: 0 0.5rem 0.5rem 0; + font-weight: 1.125rem; + font-weight: bold; + display: inline-block; +} +#bookmarks #new-bookmark #cta-description { + font-size: 0.825rem; + color: #aaa; +} +#bookmarks #new-bookmark #bookmark-input { + margin-top: 1rem; + display: flex; + align-items: center; + width: 100%; +} +#bookmarks #new-bookmark #bookmark-input input { + width: 100%; + margin-right: 0.5rem; + border: 1px solid #161b22; + font-size: 0.875rem; + padding: 0.5rem 0.75rem; + background-color: #161b22; + border-radius: 0.375rem; + color: #c9d1d9; + box-sizing: border-box; + outline: none; +} +#bookmarks #new-bookmark #bookmark-input button { + background-color: #0d1117; + border: 1px solid #30363d; + color: #c9d1d9; + font-size: 0.875rem; + border-radius: 0.375rem; + padding: 0.5rem 0.75rem; + display: flex; + align-items: center; + cursor: pointer; +} #detail-view { position: fixed; width: 100vw; @@ -279,7 +333,12 @@ a:hover { font-size: 0.875rem; color: #aaa; } -#detail-view .headline .namespace { +#detail-view .headline .name { + font-size: 1.25rem; + font-weight: bold; + color: #c9d1d9; +} +#detail-view .headline .project-namespace { font-size: 0.825rem; } #detail-view .headline #project-detail-name-avatar { @@ -293,7 +352,7 @@ a:hover { margin-right: 0.75rem; font-size: 1rem; } -#detail-view .headline .name { +#detail-view .headline .project-name { margin: 0.125rem 0.5rem 0 0; font-size: 1rem; font-weight: bold; @@ -384,6 +443,12 @@ a:hover { #detail-view #detail-content .list-container.history-list-container { margin-top: 0; } +#detail-view #detail-content .empty { + display: flex; + align-items: center; + justify-content: center; + min-height: 3rem; +} #detail-view #detail-content #pagination { display: flex; justify-content: space-between; @@ -392,7 +457,7 @@ a:hover { background-color: #0d1117; border: 1px solid #30363d; color: #c9d1d9; - font-size: 1rem; + font-size: 0.875rem; border-radius: 0.375rem; padding: 0.5rem 0.75rem 0.5rem 0.5rem; display: flex; @@ -403,9 +468,8 @@ a:hover { background-color: #161b22; } #detail-view #detail-content #pagination button svg { - width: 1rem; + width: 0.875rem; margin-right: 0.25rem; - margin-bottom: 2px; } #detail-view #detail-content #pagination button.next { padding: 0.5rem 0.5rem 0.5rem 0.75rem;