Get bookmark entry point in place

2021-06-23 20:27:51 +02:00 · 2021-06-23 20:27:51 +02:00 · b7d4130f7b
parent 95e5ddf923
commit b7d4130f7b
5 changed files with 140 additions and 47 deletions
--- a/index.html
+++ b/index.html
@ -18,21 +18,21 @@
          <path fill="#c9d1d9" fill-rule="evenodd"
            d="M1,3 C1,1.89543 1.89543,1 3,1 L9,1 C9.96059,1 10.763,1.6772 10.9559,2.58023 L13.9947,4.33469 C14.9513,4.88698 15.279,6.11016 14.7267,7.06674 C13.4456,9.28574 11,13.5146 10.8452,13.7866 C10.457,14.4688 9.81319,15 9,15 L3,15 C1.89543,15 1,14.1046 1,13 L1,3 Z M3,3 L9,3 L9,13 L3,13 L3,3 Z M11,9.52164 L12.9947,6.06674 L11,4.91511 L11,9.52164 Z" />
        </svg>
-        <span id="issues-count"></span>
+        <span id="issues-count">Issues</span>
      </div>
      <div class="count" onclick="goToDetail('Merge requests')">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <path fill="#c9d1d9" fill-rule="evenodd"
            d="M10,0 L10,2.60002 C12.2108812,3.04881281 13.8920863,4.95644867 13.9950026,7.27443311 L14,7.5 L14,11.2676 C14.5978,11.6134 15,12.2597 15,13 C15,14.1046 14.1046,15 13,15 C11.8954,15 11,14.1046 11,13 C11,12.3166462 11.342703,11.713387 11.8656124,11.3526403 L12,11.2676 L12,7.5 C12,6.259091 11.246593,5.19415145 10.1722389,4.73766702 L10,4.67071 L10,7 L6,3.5 L10,0 Z M3,1 C4.10457,1 5,1.89543 5,3 C5,3.68333538 4.65729704,4.28663574 4.13438762,4.6473967 L4,4.73244 L4,11.2676 C4.5978,11.6134 5,12.2597 5,13 C5,14.1046 4.10457,15 3,15 C1.89543,15 1,14.1046 1,13 C1,12.3166462 1.34270296,11.713387 1.86561238,11.3526403 L2,11.2676 L2,4.73244 C1.4022,4.38663 1,3.74028 1,3 C1,1.89543 1.89543,1 3,1 Z" />
        </svg>
-        <span id="mrs-count"></span>
+        <span id="mrs-count">MRs</span>
      </div>
      <div class="count" onclick="goToDetail('To-Do list')">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <path fill="#c9d1d9" fill-rule="evenodd"
            d="M4,4 L9,4 C9.55228,4 10,3.55228 10,3 C10,2.44772 9.55228,2 9,2 L4,2 C2.89543,2 2,2.89543 2,4 L2,12 C2,13.1046 2.89543,14 4,14 L12,14 C13.1046,14 14,13.1046 14,12 L14,10 C14,9.44771 13.5523,9 13,9 C12.4477,9 12,9.44771 12,10 L12,12 L4,12 L4,4 Z M15.2071,2.29289 C14.8166,1.90237 14.1834,1.90237 13.7929,2.29289 L8.5,7.58579 L7.70711,6.79289 C7.31658,6.40237 6.68342,6.40237 6.29289,6.79289 C5.90237,7.18342 5.90237,7.81658 6.29289,8.20711 L7.79289,9.70711 C7.98043,9.89464 8.23478,10 8.5,10 C8.76522,10 9.01957,9.89464 9.20711,9.70711 L15.2071,3.70711 C15.5976,3.31658 15.5976,2.68342 15.2071,2.29289 Z" />
        </svg>
-        <span id="todos-count"></span>
+        <span id="todos-count">To-Dos</span>
      </div>
    </div>
  </div>
@ -42,18 +42,21 @@
      <span id="commits-count"></span>
      <button id="prev-commit" onclick="changeCommit(false)">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-          <path fill="#c9d1d9" fill-rule="evenodd" d="M10.707085,3.70711 C11.097605,3.31658 11.097605,2.68342 10.707085,2.29289 C10.316555,1.90237 9.683395,1.90237 9.292865,2.29289 L4.292875,7.29289 C3.902375,7.68342 3.902375,8.31658 4.292875,8.70711 L9.292865,13.7071 C9.683395,14.0976 10.316555,14.0976 10.707085,13.7071 C11.097605,13.3166 11.097605,12.6834 10.707085,12.2929 L6.414185,8 L10.707085,3.70711 Z"/>
+          <path fill="#c9d1d9" fill-rule="evenodd"
+            d="M10.707085,3.70711 C11.097605,3.31658 11.097605,2.68342 10.707085,2.29289 C10.316555,1.90237 9.683395,1.90237 9.292865,2.29289 L4.292875,7.29289 C3.902375,7.68342 3.902375,8.31658 4.292875,8.70711 L9.292865,13.7071 C9.683395,14.0976 10.316555,14.0976 10.707085,13.7071 C11.097605,13.3166 11.097605,12.6834 10.707085,12.2929 L6.414185,8 L10.707085,3.70711 Z" />
        </svg>
      </button>
      <button id="next-commit" onclick="changeCommit(true)">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-          <path fill="#c9d1d9" fill-rule="evenodd" d="M5.29289,3.70711 C4.90237,3.31658 4.90237,2.68342 5.29289,2.29289 C5.68342,1.90237 6.31658,1.90237 6.70711,2.29289 L11.7071,7.29289 C12.0976,7.68342 12.0976,8.31658 11.7071,8.70711 L6.70711,13.7071 C6.31658,14.0976 5.68342,14.0976 5.29289,13.7071 C4.90237,13.3166 4.90237,12.6834 5.29289,12.2929 L9.58579,8 L5.29289,3.70711 Z"/>
+          <path fill="#c9d1d9" fill-rule="evenodd"
+            d="M5.29289,3.70711 C4.90237,3.31658 4.90237,2.68342 5.29289,2.29289 C5.68342,1.90237 6.31658,1.90237 6.70711,2.29289 L11.7071,7.29289 C12.0976,7.68342 12.0976,8.31658 11.7071,8.70711 L6.70711,13.7071 C6.31658,14.0976 5.68342,14.0976 5.29289,13.7071 C4.90237,13.3166 4.90237,12.6834 5.29289,12.2929 L9.58579,8 L5.29289,3.70711 Z" />
        </svg>
-        
      </button>
    </div>
  </div>
-  <div id="pipeline"></div>
+  <div id="pipeline">
+    <div class="commit empty"></div>
+  </div>
  <div class="headline">
    <div>Recently viewed</div>
  </div>
@ -111,6 +114,15 @@
  <div class="headline">
    <div>Bookmarks</div>
  </div>
+  <div id="bookmarks">
+    <div id="new-bookmark">
+      <div><span id="cta">Add a new GitLab bookmark</span> 🔖</div>
+      <div id="cta-description">Bookmarks are helpful when you have an issue/merge request you will have to come back to
+        repeatedly.</div>
+      <div id="bookmark-input"><input id="bookmark-link" placeholder="Enter your link here..." /><button type="submit"
+          onclick="addBookmark(document.getElementById('bookmark-link').value)">Add</button></div>
+    </div>
+  </div>
  <div id="detail-view">
    <div class="header" onclick="goToOverview()">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
--- 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 = "<div class=\\"commit\\"></div>"')
            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 = '<a href=\\"' + user.web_url + '\\" target=\\"_blank\\"><img src=\\"' + user.avatar_url + '?width=64\\" /><div class=\\"user-information\\"><span class=\\"user-name\\">' + user.name + '</span><span class=\\"username\\">@' + user.username + '</span></div></a>'
        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 = '<ul class=\\"list-container\\">'
+    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 += '<li class=\\"history-entry\\">'
-            mrsString += '<a href=\\"' + mr.web_url + '\\" target=\\"_blank\\">' + escapeHtml(mr.title) + '</a><span class=\\"namespace-with-time\\">Updated ' + timeSince(new Date(mr.updated_at)) + ' ago &middot; ' + mr.references.full.split('#')[0] + '</span></div></li>'
+        if (mrs.length > 0) {
+            mrsString = '<ul class=\\"list-container\\">'
+            for (mr of mrs) {
+                mrsString += '<li class=\\"history-entry\\">'
+                mrsString += '<a href=\\"' + mr.web_url + '\\" target=\\"_blank\\">' + escapeHtml(mr.title) + '</a><span class=\\"namespace-with-time\\">Updated ' + timeSince(new Date(mr.updated_at)) + ' ago &middot; ' + mr.references.full.split('#')[0] + '</span></div></li>'
+            }
+            mrsString += '</ul>' + displayPagination(keysetLinks, type)
+        } else {
+            mrsString = '<div class=\\"empty\\">No merge requests.</div>'
        }
-        mrsString += '</ul>' + 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 = '<img id=\\"project-detail-avatar\\" src=\\"' + project.avatar_url + '?width=64\\" />'
-    }else{
+    } else {
        logo = '<div id=\\"project-detail-name-avatar\\">' + project.name.charAt(0).toUpperCase() + '</div>'
    }
-    mb.window.webContents.executeJavaScript('document.getElementById("detail-headline").innerHTML = "<div id=\\"project-detail-information\\">' + logo + '<div><span class=\\"namespace\\">' + project.namespace.name + '</span><span class=\\"name\\">' + project.name + '</span></div></div>"')
+    mb.window.webContents.executeJavaScript('document.getElementById("detail-headline").innerHTML = "<div id=\\"project-detail-information\\">' + logo + '<div><span class=\\"project-namespace\\">' + project.namespace.name + '</span><span class=\\"project-name\\">' + project.name + '</span></div></div>"')
 }

 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 = '<img src=\\"' + project.avatar_url + '?width=64\\" />'
-        }else{
+        } else {
            logo = '<div id=\\"project-name\\">' + project.name.charAt(0).toUpperCase() + '</div>'
        }
        //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 '<div class=\\"commit\\">' + logo + '<div class=\\"commit-information\\"><a href=\\"' + commit.web_url + '\\" target=\\"_blank\\">' + commit.title + '</a><div><span class=\\"namespace-with-time\\">' + timeSince(new Date(commit.committed_date.split('.')[0] + 'Z')) + ' ago &middot; ' + project.name_with_namespace + '</span></div></div></div>'
 }

+function addBookmark(link) {
+    console.log(link)
+}
+
 function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
--- 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', () => {
--- 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)
 }
--- 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;