Optimize exdraw module code (#8315)

* optimize code

* optimize code

---------

Co-authored-by: 小强 <shuntian@Mac.lan>

frontend/src/pages/excalidraw-editable-viewer/index.js

@@ -80,7 +80,7 @@ function ExcalidrawEdiableViewer() {
         </div>
 
         <div className='doc-ops'>
-          <span className="collaborator-name">{gettext('Username')}:</span>
+          <span className="collaborator-name">{gettext('Your name')}:</span>
           {!isEditName && (
             <span className="collaborator-name">{username}</span>
           )}

frontend/src/pages/excalidraw-editor/extension/select-image-dialog/index.css

@@ -1,25 +1,12 @@
-.sdoc-file-select-dialog {
+.exdraw-file-select-dialog {
   max-width: 520px;
 }
 
-.sdoc-file-select-dialog .sdoc-file-select-modal {
+.exdraw-file-select-dialog .file-select-modal {
   width: 520px;
 }
 
-.sdoc-file-select-dialog .sdoc-file-select-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 1rem;
-  border-top: 1px solid #e9ecef;
-}
-
-.sdoc-file-select-dialog .highlight-bg-color {
-  background-color: #FF8000;
-  border-color: #FF8000;
-}
-
-.sdoc-file-select-dialog .modal-header-container {
+.exdraw-file-select-dialog .modal-header-container {
   display: flex;
   position: relative;
   justify-content: space-between;
@@ -30,7 +17,15 @@
   border-bottom: 1px solid #e9ecef;
 }
 
-.modal-title-container {
+.exdraw-file-select-dialog .file-select-container .file-select-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #e9ecef;
+}
+
+.exdraw-file-select-dialog .modal-header-container .modal-title-container {
   flex: 0 1 auto;
   white-space: nowrap;
   position: relative;
@@ -40,7 +35,7 @@
   margin: auto;
 }
 
-.search-container {
+.exdraw-file-select-dialog .modal-header-container .search-container {
   display: flex;
   flex: 1;
   align-items: center;
@@ -48,29 +43,19 @@
   margin-right: 8px;
 }
 
-.sdoc-close-dialog {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  cursor: pointer;
-}
-
-.search-container .search-icon-container .sdoc-find-replace,
-.modal-header-container .sdoc-close1 {
+.exdraw-file-select-dialog .search-container .search-disable-container .sdoc-find-replace {
   font-size: 16px;
   color: #666666;
 }
 
-.search-container .search-icon-container .sdoc-find-replace:hover,
-.modal-header-container .sdoc-close1:hover {
+.exdraw-file-select-dialog .search-container .search-disable-container .sdoc-find-replace:hover {
   background-color: #EFEFEF;
   border-radius: 3px;
   height: 28px;
   width: 28px;
 }
 
-.sdoc-files-search-popover {
+.exdraw-file-select-dialog .search-container .search-disable-container .sdoc-files-search-popover {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -78,75 +63,75 @@
   cursor: pointer;
 }
 
-.sdoc-files-search-popover-container {
+.exdraw-file-select-dialog .search-container .sdoc-files-search-popover-container {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 200px;
 }
 
-.sdoc-search-wrapper {
+.exdraw-file-select-dialog .search-container .search-enable-container {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
 }
 
-.sdoc-search-input {
+.exdraw-file-select-dialog .search-container .search-enable-container .search-input {
   flex: 1;
   height: 28px;
   padding: 0 25px;
   line-height: 28px;
-
 }
 
-.sdoc-search-input::placeholder {
+.exdraw-file-select-dialog .search-container .search-enable-container .search-input::placeholder {
   color: #868E96;
   font-size: 14px;
 }
 
-.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-close,
-.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-search {
+.exdraw-file-select-dialog .search-container .search-enable-container .sdoc-find-replace,
+.exdraw-file-select-dialog .search-container .search-enable-container .sdoc-close1 {
+  position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 20px;
-}
-
-.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-close1,
-.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-find-replace {
+  height: 20px;
   color: #666666;
   font-size: 14px;
 }
 
-.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-close1:hover {
+.exdraw-file-select-dialog .search-container .search-enable-container .sdoc-close1:hover {
   background-color: #EFEFEF;
   border-radius: 3px;
-  height: 20px;
-  width: 20px;
 }
 
-.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-search {
-  position: absolute;
+.exdraw-file-select-dialog .search-container .search-enable-container .sdoc-find-replace {
   left: 4px;
 }
 
-.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-close {
-  position: absolute;
+.exdraw-file-select-dialog .search-container .search-enable-container .sdoc-close1 {
   right: 4px;
 }
 
-.sdoc-file-info .item-right-icon {
+.exdraw-file-select-dialog .modal-header-container .sdoc-close1 {
   display: flex;
   align-items: center;
-  height: 100%;
+  justify-content: center;
+  width: 28px;
+  cursor: pointer;
+  font-size: 16px;
+  color: #666666;
 }
 
-.sdoc-file-info .item-right-icon {
-  right: 8px;
-  position: absolute;
+.exdraw-file-select-dialog .modal-header-container .sdoc-close1:hover {
+  background-color: #EFEFEF;
+  border-radius: 3px;
+  height: 28px;
+  width: 28px;
 }
 
-.sdoc-file-info .item-right-icon svg {
-  fill: #666;
+.exdraw-file-select-dialog .file-select-container .highlight-bg-color {
+  background-color: #FF8000;
+  border-color: #FF8000;
 }

frontend/src/pages/excalidraw-editor/extension/select-image-dialog/index.js

@@ -67,27 +67,31 @@ const SelectSdocFileDialog = ({ isOpen, insertImage, closeDialog }) => {
   }, [isOpenSearch]);
 
   return (
-    <Modal isOpen={isOpen} autoFocus={false} zIndex={1071} returnFocusAfterClose={false} className="sdoc-file-select-dialog" contentClassName="sdoc-file-select-modal">
+    <Modal isOpen={isOpen} autoFocus={false} zIndex={1071} returnFocusAfterClose={false} className="exdraw-file-select-dialog" contentClassName="file-select-modal">
       <div className='modal-header-container'>
         <h5 className='modal-title-container'>{gettext('Select image')}</h5>
         <div className='search-container'>
-          {!isOpenSearch && <div className='search-icon-container'><div className='sdocfont sdoc-find-replace sdoc-files-search-popover' onClick={toggleSearch} ></div></div>}
+          {!isOpenSearch && (
+            <div className='search-disable-container'>
+              <div className='sdocfont sdoc-find-replace sdoc-files-search-popover' onClick={toggleSearch} ></div>
+            </div>
+          )}
           {isOpenSearch && (
-            <div className='sdoc-files-search-popover-container'>
-              <div className='sdoc-search-wrapper'>
-                <div className='sdocfont sdoc-find-replace sdoc-search'></div>
-                <Input autoFocus className='sdoc-search-input' onKeyUp={handleInputKeyDown} onChange={handleSearchInputChange} id='sdoc-search' placeholder={gettext('Search')} />
-                <div className='sdocfont sdoc-close1 sdoc-close' onClick={toggleSearch}></div>
+            <div className='files-search-popover-container'>
+              <div className='search-enable-container'>
+                <div className='sdocfont sdoc-find-replace'></div>
+                <Input autoFocus className='search-input' onKeyUp={handleInputKeyDown} onChange={handleSearchInputChange} placeholder={gettext('Search')} />
+                <div className='sdocfont sdoc-close1' onClick={toggleSearch}></div>
               </div>
             </div>
           )}
         </div>
-        <div className='sdocfont sdoc-close1 sdoc-close-dialog' onClick={closeDialog}></div>
+        <div className='sdocfont sdoc-close1' onClick={closeDialog}></div>
       </div>
       <ModalBody className='p-0'>
-        <div className='sdoc-file-select-container'>
+        <div className='file-select-container'>
           <LocalImage fileType='image' onSelectedFile={onSelectedFile} toggle={closeDialog} searchContent={searchContent} isOpenSearch={isOpenSearch} />
-          <div className='sdoc-file-select-footer'>
+          <div className='file-select-footer'>
             <Button color='secondary' className='mr-2' onClick={closeDialog}>{gettext('Cancel')}</Button>
             <Button color='primary' className='highlight-bg-color' disabled={!currentSelectedFile} onClick={onSubmit}>{gettext('Confirm')}</Button>
           </div>

frontend/src/pages/excalidraw-editor/extension/select-image-dialog/local-image/index.css

@@ -103,6 +103,18 @@
   height: 36px;
 }
 
+.sdoc-file-info .item-right-icon {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  position: absolute;
+  right: 8px;
+}
+
+.sdoc-file-info .item-right-icon svg {
+  fill: #666;
+}
+
 .sdoc-folder-container.sdoc-folder-search-results .sdoc-file-name,
 .sdoc-search-folder-name {
   height: 19.5px;