Merge pull request #4327 from weseek/imprv/highlighting-for-keyword

imprv: Highlighting searching keyword
weseek · Sep 18, 2021 · bfde366 · bfde366
2 parents 35e4951 + f2efed6
commit bfde366
Show file tree

Hide file tree

Showing 15 changed files with 29 additions and 1 deletion.
diff --git a/packages/app/src/components/Page/RevisionRenderer.jsx b/packages/app/src/components/Page/RevisionRenderer.jsx
@@ -69,7 +69,7 @@ class RevisionRenderer extends React.PureComponent {
         .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
         .replace(/(^"|"$)/g, ''); // for phrase (quoted) keyword
       const keywordExp = new RegExp(`(${k}(?!(.*?")))`, 'ig');
-      returnBody = returnBody.replace(keywordExp, '<em class="highlighted">$&</em>');
+      returnBody = returnBody.replace(keywordExp, '<em class="highlighted-keyword">$&</em>');
     });
 
     return returnBody;

diff --git a/packages/app/src/styles/_variables.scss b/packages/app/src/styles/_variables.scss
@@ -2,6 +2,13 @@
 $growi-green: #74bc46;
 $growi-blue: #175fa5;
 
+//== Marker Color
+$grw-marker-yellow: #ff6;
+$grw-marker-red: #f6c;
+$grw-marker-blue: #6cf;
+$grw-marker-cyan: #6ff;
+$grw-marker-green: #6f6;
+
 $font-family-for-staff-credit: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
 $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
 

diff --git a/packages/app/src/styles/theme/_apply-colors.scss b/packages/app/src/styles/theme/_apply-colors.scss
@@ -17,6 +17,7 @@ $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcol
 $color-seen-user: #549c79 !default;
 $reload-btn-rc-color: $gray-500;
 $reload-btn-cs-color: $gray-500;
+$bgcolor-keyword-highlighted: $grw-marker-yellow !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -461,6 +462,10 @@ ul.pagination {
     }
   }
 
+  .highlighted-keyword {
+    background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
+  }
+
   a {
     color: $color-link-wiki;
 

diff --git a/packages/app/src/styles/theme/antarctic.scss b/packages/app/src/styles/theme/antarctic.scss
@@ -52,6 +52,7 @@ html[dark] {
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
   $bgcolor-blinked-section: rgba($primary, 0.15);
+  //$bgcolor-keyword-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: black;

diff --git a/packages/app/src/styles/theme/christmas.scss b/packages/app/src/styles/theme/christmas.scss
@@ -44,6 +44,7 @@ html[dark] {
   $bgcolor-card: $gray-50;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-blinked-section: rgba($primary, 0.5);
+  //$bgcolor-keyword-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: #112744;

diff --git a/packages/app/src/styles/theme/default.scss b/packages/app/src/styles/theme/default.scss
@@ -23,6 +23,7 @@ html[light] {
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
   $bgcolor-blinked-section: rgba($primary, 0.1);
+  //$bgcolor-keyword-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: #112744;
@@ -124,6 +125,7 @@ html[dark] {
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($bgcolor-global, 5%);
   $bgcolor-blinked-section: rgba($primary, 0.4);
+  $bgcolor-keyword-highlighted: darken($grw-marker-red, 30%);
 
   // Font colors
   $color-global: $gray-400;

diff --git a/packages/app/src/styles/theme/future.scss b/packages/app/src/styles/theme/future.scss
@@ -12,6 +12,7 @@ html[dark] {
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themecolor, 5%);
   $bgcolor-blinked-section: rgba($primary, 0.4);
+  $bgcolor-keyword-highlighted: darken($grw-marker-red, 30%);
 
   // Font colors
   $color-global: #95abba;

diff --git a/packages/app/src/styles/theme/halloween.scss b/packages/app/src/styles/theme/halloween.scss
@@ -40,6 +40,7 @@ html[dark] {
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: $bgcolor-global;
   $bgcolor-blinked-section: rgba($primary, 0.4);
+  $bgcolor-keyword-highlighted: darkviolet;
 
   // Font colors
   $color-global: #e9af2b;

diff --git a/packages/app/src/styles/theme/hufflepuff.scss b/packages/app/src/styles/theme/hufflepuff.scss
@@ -36,6 +36,7 @@ html[light] {
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-100;
   $bgcolor-blinked-section: rgba($primary, 0.5);
+  $bgcolor-keyword-highlighted: $grw-marker-green;
 
   // Font colors
   $color-global: $subthemecolor;
@@ -175,6 +176,7 @@ html[dark] {
   $bgcolor-inline-code: $subthemecolor;
   $bgcolor-card: darken($themedark, 5%);
   $bgcolor-blinked-section: rgba($primary, 0.5);
+  $bgcolor-keyword-highlighted: darken($grw-marker-cyan, 40%);
 
   // Font colors
   $color-global: #efe2cf;

diff --git a/packages/app/src/styles/theme/island.scss b/packages/app/src/styles/theme/island.scss
@@ -12,6 +12,7 @@ html[dark] {
   $bgcolor-global: lighten($color-themelight, 10%);
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-blinked-section: rgba($primary, 0.3);
+  //$bgcolor-keyword-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: #112744;

diff --git a/packages/app/src/styles/theme/kibela.scss b/packages/app/src/styles/theme/kibela.scss
@@ -35,6 +35,8 @@ html[dark] {
   $bgcolor-global: $themelight;
   $bgcolor-inline-code: lighten($subthemecolor, 70%);
   $bgcolor-card: $lightthemecolor;
+  //$bgcolor-keyword-highlighted: $grw-marker-yellow;
+
   $color-header: $bgcolor-theme;
   $color-global: #3c4a60;
   $color-link: rgb(74, 109, 204);

diff --git a/packages/app/src/styles/theme/mono-blue.scss b/packages/app/src/styles/theme/mono-blue.scss
@@ -15,6 +15,7 @@ html[light] {
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: darken($themelight, 5%);
   $bgcolor-blinked-section: rgba($primary, 0.1);
+  //$bgcolor-keyword-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: $themecolor;
@@ -113,6 +114,7 @@ html[dark] {
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themedark, 5%);
   $bgcolor-blinked-section: rgba($primary, 0.5);
+  $bgcolor-keyword-highlighted: darken($grw-marker-red, 30%);
 
   // Font colors
   $color-global: #d3d4d4;

diff --git a/packages/app/src/styles/theme/nature.scss b/packages/app/src/styles/theme/nature.scss
@@ -46,6 +46,7 @@ html[dark] {
   $bgcolor-card: #f1ffe4;
   $bgcolor-subnav: #fafafa;
   $bgcolor-blinked-section: rgba($primary, 0.1);
+  //$bgcolor-keyword-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: #460039;

diff --git a/packages/app/src/styles/theme/spring.scss b/packages/app/src/styles/theme/spring.scss
@@ -35,6 +35,7 @@ html[dark] {
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
   $bgcolor-blinked-section: rgba($primary, 0.5);
+  $bgcolor-keyword-highlighted: $grw-marker-cyan;
 
   // Font colors
   $color-global: black;

diff --git a/packages/app/src/styles/theme/wood.scss b/packages/app/src/styles/theme/wood.scss
@@ -44,6 +44,7 @@ html[dark] {
   $bgcolor-global: white;
   $bgcolor-card: #ece8de;
   $bgcolor-blinked-section: rgba($primary, 0.3);
+  $bgcolor-keyword-highlighted: $grw-marker-blue;
 
   // Font colors
   // $color-global: black;