feat: 图片高亮样式调整

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pagenote",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "description": "highlight and annotation the webpage",
   "main": "dist/pagenote.js",
   "scripts": {

src/component/DropLabel.js

@@ -2,6 +2,7 @@ import { h } from 'preact';
 import { useState,useRef } from 'preact/hooks';
 import i18n from '../locale/i18n'
 import Popover from '../component/tip/Popover'
+import Tag from '../assets/tag2.svg'
 import  style from './droplabel.module.scss';
 
 export default function DropLabels({categories=[{label:'default'}],onSelected,currentCategories,onSet}) {
@@ -80,13 +81,14 @@ export default function DropLabels({categories=[{label:'default'}],onSelected,cu
                 </div>
             }>
                 <div className='category-title'>
-                    {currentCategories.size===0?
-                      <span className='category-name'>{i18n.t('add_a_category')}</span>:''}
-                    {
-                        displayCategories.map((item)=>(
-                          <span className='category-name' >{item}</span>
-                        ))
-                    }
+                    <Tag />
+                    <div className='categories'>
+                        {
+                            displayCategories.map((item)=>(
+                              <span className='category-name' >{item}</span>
+                            ))
+                        }
+                    </div>
                 </div>
             </Popover>
         </div>

src/component/LightRefAnotation.js

@@ -6,24 +6,30 @@ import MoreAction from "../assets/more-action.svg";
 import ImageIcon from '../assets/image.svg'
 
 export default  function LightRefAnotation({step}) {
-  const text = step.text||step.tip;
+  const text = step.text||'';
   const notion = step.text!==step.tip?step.tip:'';
   const imgs = step.images || [];
   return(
     <pagenote-ref-anotation data-insign={step.isInview?'1':''} style={{'--fill-color':(step.isActive&&step.isInview)?step.bg:'#fff'}}>
       <pagenote-light-ref>
         <span>
           {text.substring(0,28)}
-          {imgs.length?<ImageIcon style={{verticalAlign:'sub',margin:'0 4px'}} />:''}
+          {imgs.length?<Popover trigger='hover' message={imgs.map((img)=>(
+            <div>
+              <img style='max-width:100px' src={img.url} alt={img.alt}/>
+            </div>
+          ))}>
+            <ImageIcon style={{verticalAlign:'sub',margin:'0 4px'}} />
+          </Popover>:''}
         </span>
       </pagenote-light-ref>
       <pagenote-light-anotation>
         {
           step.isActive && notion &&
           <pagenote-block>
-            <pagenote-block>
-              {new Date(step.time).toLocaleDateString()}
-            </pagenote-block>
+            {/*<pagenote-block>*/}
+            {/*  {new Date(step.time).toLocaleDateString()}*/}
+            {/*</pagenote-block>*/}
             <pagenote-block dangerouslySetInnerHTML={{__html: notion}}>
 
             </pagenote-block>

src/component/droplabel.module.scss

@@ -9,7 +9,10 @@
     //padding: 6px;
     line-height: 1em;
     svg{
-      vertical-align: text-bottom;
+      vertical-align: top;
+    }
+    .categories{
+      padding-left: 20px;
     }
     .category-name{
       display: inline-block;

src/component/tip/popover.less

@@ -8,7 +8,7 @@
 @border-radius-base     : 6px;
 @overlay-shadow              : 0 0 4px rgba(0, 0, 0, 0.17);
 //** Tooltip text color
-@tooltip-color: #fff;
+@tooltip-color: #848484;
 //** Tooltip background color
 @tooltip-bg: #fff;
 @tooltip-opacity: 0.9;

src/pagenote-core.js

@@ -796,4 +796,4 @@ PagenoteCore.prototype.CONSTANT = {
     STORE_KEYS_VERSION_2_VALIDATE:["x","y","id","text","tip","bg","time","isActive","offsetX","offsetY","parentW","pre","suffix","images"],
 };
 
-PagenoteCore.prototype.version = "4.3.1";
+PagenoteCore.prototype.version = "4.3.2";

src/widget/LightActionBar.js

@@ -54,8 +54,11 @@ export default class ActionBars extends Component{
 
     document.addEventListener('click',(e)=>{
       const target = e.target;
-      if(target._light){
-        target._light.toggle(undefined,false)
+      const parentTarget = e.target.parentNode;
+      const light = target._light || ( parentTarget ? parentTarget._light : null );
+
+      if(light){
+        light.toggle(undefined,false)
       }
     },{capture:true});
   }

src/widget/widget.scss

@@ -527,6 +527,10 @@
             &:hover{
                 opacity: 0.85;
             }
+
+            &[data-type='img']{
+                outline: 1px solid var(--bgcolor);
+            }
         }
         &[data-note='1']{
             //&:before{
@@ -551,9 +555,9 @@
             }
         }
 
-        &[data-type='img']{
-           border: 1px solid var(--bgcolor);
-        }
+        //&[data-type='img']{
+        //   outline: 1px solid var(--bgcolor);
+        //}
 
         pagenote-tag-edit{
             display: block;