Browse Source

style(pdf): polish toolbar icons & area highlight mixed color

charlie 4 years ago
parent
commit
a47e82c51f

+ 1 - 1
src/main/frontend/components/block.cljs

@@ -449,7 +449,7 @@
      (if (and (= "pdf" ext-name)
               (string/ends-with? (util/node-path.dirname full-path) config/local-assets-dir))
        [:a.asset-ref.is-pdf
-        {:href "javascript:;"
+        {:href "javascript:void(0);"
          :on-click (fn [e]
                      (when-let [current (pdf-assets/inflate-asset (util/node-path.basename full-path))]
                        (state/set-state! :pdf/current current)

+ 11 - 2
src/main/frontend/components/svg.cljs

@@ -606,12 +606,21 @@
    [:svg {:fill "none" :width size :height size :viewBox "0 0 24 24" :stroke "currentColor"}
     [:path {:stroke-linecap "round" :stroke-linejoin "round" :stroke-width "2" :d "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"}]]))
 
-(defn area
-  ([] area 16)
+(defn icon-area
+  ([] icon-area 16)
   ([size]
    [:svg {:viewBox "0 0 1024 1024" :version "1.1" :width size :height size :stroke "currentColor"}
     [:path {:d "M844.992 115.008H179.008c-35.328 0-64 28.672-64 64v665.984c0 35.328 28.672 64 64 64h665.984c35.328 0 64-28.672 64-64V179.008c0-35.328-28.672-64-64-64zM364.672 844.992H217.6L844.992 217.6v147.072l-480.32 480.32z m480.32-401.152v147.2l-254.016 253.952H443.84l401.152-401.152z m-187.648-264.832h147.072l-625.408 625.408V657.28l478.336-478.336zM179.008 578.112V431.04l252.032-252.032h147.136L179.008 578.112z m172.864-399.104l-172.864 172.8v-172.8h172.864z m318.272 665.984l174.848-174.848v174.848h-174.848z" :fill "currentColor"}]]))
 
+(defn icon-info
+  ([] (icon-info 16))
+  ([size]
+   [:svg {:viewBox "0 0 1024 1024" :width size :height size :stroke "currentColor"}
+    [:path {:d "M512 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z m0-844.8c-206.506667 0-375.466667 168.96-375.466667 375.466667 0 206.506667 168.96 375.466667 375.466667 375.466667 206.506667 0 375.466667-168.96 375.466667-375.466667 0-206.506667-168.96-375.466667-375.466667-375.466667z" :p-id "2326" :fill "currentColor"}]
+    [:path {:d "M512 796.714667a46.08 46.08 0 0 1-46.933333-46.933334v-269.056c0-26.624 20.352-46.933333 46.933333-46.933333 26.581333 0 46.933333 20.309333 46.933333 46.933333v269.056c0 26.624-20.352 46.933333-46.933333 46.933334zM512 364.928a46.08 46.08 0 0 1-46.933333-46.933333V274.218667c0-26.624 20.352-46.933333 46.933333-46.933334 26.581333 0 46.933333 20.309333 46.933333 46.933334v43.776c0 26.624-21.888 46.933333-46.933333 46.933333z" :p-id "2327" :fill "currentColor"}]]))
+
+
+
 (defn view-list
   ([] (view-list 16))
   ([size]

+ 2 - 2
src/main/frontend/extensions/pdf/highlights.cljs

@@ -798,7 +798,7 @@
           {:title    (str "Area highlight (" (if front-utils/mac? "⌘" "alt") ")")
            :class    (if area-mode? "is-active")
            :on-click #(set-area-mode! (not area-mode?))}
-          (svg/area 18)]
+          (svg/icon-area 18)]
 
          ;; zoom
          [:a.button
@@ -822,7 +822,7 @@
            :on-click #(do
                         (p/let [ret (pdf-utils/get-meta-data$ viewer)]
                           (state/set-modal! (make-docinfo-in-modal ret))))}
-          (svg/info)]
+          (svg/icon-info)]
 
          [:a.button
           {:on-click #(state/set-state! :pdf/current nil)}

+ 5 - 4
src/main/frontend/extensions/pdf/pdf.css

@@ -79,10 +79,6 @@
           background-color: transparent;
           transition: none;
 
-          &.is-info {
-            opacity: .3;
-          }
-
           &.is-active {
             opacity: 1;
             border-bottom: 2px solid #969494;
@@ -480,6 +476,11 @@
     .extensions__pdf-toolbar {
       background: linear-gradient(0deg, rgba(255, 255, 255, 0) 10%, rgb(15 31 37) 100%)
     }
+
+    .extensions__pdf-hls-area-region {
+      mix-blend-mode: revert;
+      opacity: .4;
+    }
   }
 
   &[data-theme=warm] {