fix(comment-map): adjust indicator height

jasperapp · Jun 26, 2020 · fc9abfb · fc9abfb
1 parent b345d6e
commit fc9abfb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/Electron/Component/WebViewComponentInjection/highlight-and-scroll.ts b/src/Electron/Component/WebViewComponentInjection/highlight-and-scroll.ts
@@ -143,13 +143,23 @@
  }
  }, {threshold: [0], rootMargin: '-40px'});
 
+ // create indicator
+ const indicatorWrapEl = document.createElement('div');
+ indicatorWrapEl.classList.add('highlight-indicator-wrap');
+ document.body.appendChild(indicatorWrapEl);
+
  const indicatorEl = document.createElement('div');
  indicatorEl.classList.add('highlight-indicator');
- document.body.appendChild(indicatorEl);
+ indicatorWrapEl.appendChild(indicatorEl);
 
  const rect = document.querySelector('.js-discussion').getBoundingClientRect();
  const timelineHeight = rect.height;
  const timelineOffset = rect.top + window.pageYOffset; //.js-discussionのheightを使うために、commentの絶対位置をオフセットする必要がある
+
+ // タイムラインの高さが小さいときは、インジケータも小さくする
+ const indicatorHeight = Math.min(timelineHeight / window.innerHeight, 1);
+ indicatorEl.style.height = `${indicatorHeight * 100}%`;
+
  for (const comment of highlightCommentEls) {
  // calc mark position
  const commentRect = comment.getBoundingClientRect();

diff --git a/src/Electron/Component/WebViewComponentInjection/style.css b/src/Electron/Component/WebViewComponentInjection/style.css
@@ -118,13 +118,21 @@
 }
 
 /*highlight indicator*/
-.highlight-indicator {
+.highlight-indicator-wrap {
  position: fixed;
  top: 150px;
  left: 4px;
- z-index: 9999;
  width: 10px;
- height: calc(100vh - 240px);
+ height: calc(100vh - 300px);
+ z-index: 9999;
+ display: flex;
+ align-items: center;
+}
+
+.highlight-indicator {
+ position: relative;
+ height: 100%;
+ width: 100%;
  background: #EAECEF;
  border-radius: 5px;
 }
@@ -133,7 +141,7 @@
  position: absolute;
  width: 100%;
  min-height: 10px;
- max-height: 80px;
+ /*max-height: 80px;*/
  background: #2CBE4F;
  cursor: pointer;
  /*border: solid 1px #1f9c35;*/