Просмотр исходного кода

Make the switch to editor/pdf button to have the same height (#12110)

GitOrigin-RevId: 5ceaad73c6c6b74ce2b6e8bbc79563bfad6ab34b
M Fahru 3 лет назад
Родитель
Сommit
ed42d0c9ca

+ 5 - 3
services/web/frontend/js/features/pdf-preview/components/switch-to-editor-button.tsx

@@ -25,10 +25,12 @@ function SwitchToEditorButton() {
       bsStyle={null}
       bsSize="xs"
       onClick={handleClick}
-      className="switch-to-editor-btn btn-secondary"
+      className="switch-to-editor-btn toolbar-btn-secondary btn-secondary"
     >
-      <Icon type="code" className="me-1" />
-      {t('switch_to_editor')}
+      <Icon type="code" className="toolbar-btn-secondary-icon" />
+      <span className="toolbar-btn-secondary-text">
+        {t('switch_to_editor')}
+      </span>
     </Button>
   )
 }

+ 3 - 3
services/web/frontend/js/features/source-editor/components/switch-to-pdf-button.js

@@ -25,10 +25,10 @@ function SwitchToPDFButton() {
       bsStyle={null}
       bsSize="xs"
       onClick={handleClick}
-      className="toolbar-btn-secondary btn-secondary"
+      className="switch-to-pdf-btn toolbar-btn-secondary btn-secondary"
     >
-      <Icon type="file-pdf-o" className="me-1" />
-      {t('switch_to_pdf')}
+      <Icon type="file-pdf-o" className="toolbar-btn-secondary-icon" />
+      <span className="toolbar-btn-secondary-text">{t('switch_to_pdf')}</span>
     </Button>
   )
 }

+ 0 - 4
services/web/frontend/stylesheets/app/editor/pdf.less

@@ -15,10 +15,6 @@
   }
 }
 
-.pdf .toolbar.toolbar-pdf when (@is-overleaf-light = false) {
-  border-bottom: 0;
-}
-
 .toolbar-pdf-orphan,
 .toolbar-pdf-left,
 .toolbar-pdf-right {

+ 15 - 0
services/web/frontend/stylesheets/app/editor/toolbar.less

@@ -433,3 +433,18 @@
   padding-bottom: 0px;
   margin-bottom: 0.5px;
 }
+
+.switch-to-editor-btn {
+  margin-right: 7px;
+}
+
+.switch-to-editor-btn,
+.switch-to-pdf-btn {
+  text-align: left;
+  display: flex;
+  align-items: center;
+
+  .toolbar-btn-secondary-icon {
+    margin-right: 5px;
+  }
+}