fix menu item icon padding in ie11

ONLYOFFICE · Oct 16, 2024 · cbbbb35 · cbbbb35
1 parent 5fdbb2f
commit cbbbb35
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 20 deletions.
diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js
@@ -112,7 +112,7 @@ define([
         tagName : 'li',
 
         template: _.template([
-            '<a id="<%= id %>" class="menu-item" style="<%= style %>" <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; if(!_.isUndefined(options.dataHint)) { %> data-hint="<%= options.dataHint %>" <% }; if(!_.isUndefined(options.dataHintDirection)) { %> data-hint-direction="<%= options.dataHintDirection %>" <% }; if(!_.isUndefined(options.dataHintOffset)) { %> data-hint-offset="<%= options.dataHintOffset %>" <% }; if(options.dataHintTitle) { %> data-hint-title="<%= options.dataHintTitle %>" <% }; %> >',
+            '<a id="<%= id %>" class="menu-item" <% if (_.isEmpty(iconCls)) { %> data-no-icon <% } %> style="<%= style %>" <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; if(!_.isUndefined(options.dataHint)) { %> data-hint="<%= options.dataHint %>" <% }; if(!_.isUndefined(options.dataHintDirection)) { %> data-hint-direction="<%= options.dataHintDirection %>" <% }; if(!_.isUndefined(options.dataHintOffset)) { %> data-hint-offset="<%= options.dataHintOffset %>" <% }; if(options.dataHintTitle) { %> data-hint-title="<%= options.dataHintTitle %>" <% }; %> >',
                 '<% if (!_.isEmpty(iconCls)) { %>',
                     '<span class="menu-item-icon <%= iconCls %>"></span>',
                 '<% } else if (!_.isEmpty(iconImg)) { %>',

diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
@@ -322,7 +322,7 @@ label {
                     .margin-right-8();
                 }
 
-                &:not(:has(.menu-item-icon)) {
+                &[data-no-icon] {
                     .padding-left-28();
                 }
             }

diff --git a/apps/pdfeditor/main/app/view/FileMenuPanels.js b/apps/pdfeditor/main/app/view/FileMenuPanels.js
@@ -1234,20 +1234,18 @@ define([], function () {
                             '<td class="right"><label id="id-info-page-size"></label></td>',
                         '</tr>',
                     '</tbody>',
+                    '<tbody>',
+                        '<tr>',
+                            '<td class="left"></td>',
+                            '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.okButtonText %></button></td>',
+                        '</tr>',
+                    '</tbody>',
                     // '<tr>',
                     //     '<td class="left"><label>' + this.txtEditTime + '</label></td>',
                     //     '<td class="right"><label id="id-info-edittime"></label></td>',
                     // '</tr>',
                 '</table>',
             '</div>',
-            '<div id="fms-flex-apply">',
-                '<table class="main">',
-                    '<tr>',
-                        '<td class="left"></td>',
-                        '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.okButtonText %></button></td>',
-                    '</tr>',
-                '</table>',
-            '</div>'
             ].join(''));
 
             this.infoObj = {PageCount: 0, WordsCount: 0, ParagraphCount: 0, SymbolsCount: 0, SymbolsWSCount:0};

diff --git a/apps/pdfeditor/main/resources/less/filemenu.less b/apps/pdfeditor/main/resources/less/filemenu.less
@@ -520,13 +520,7 @@
 
 #panel-info {
   #file-menu-panel & {
-    padding: 30px;
-
-    .flex-settings {
-      gap: 30px;
-      display: flex;
-      flex-direction: column;
-    }
+    padding: 0 30px;
   }
 
   .header {
@@ -535,14 +529,17 @@
     line-height: unset;
   }
 
+  table.main {
+    margin: 30px 0 18px;
+  }
+
   table {
     display: flex;
-    gap: 24px;
     flex-direction: column;
 
     tr {
       display: flex;
-      gap: 24px;
+      margin-bottom: 12px;
 
       td {
         .font-size-normal();
@@ -558,8 +555,10 @@
         }
 
         &.left {
+          display: block;
           width: 140px;
           flex-shrink: 0;
+          .margin-right(24px);
         }
 
         &.right {
@@ -574,14 +573,92 @@
 
     tbody {
       display: flex;
-      gap: 12px;
       flex-direction: column;
+
+      &:not(:last-of-type) {
+        margin-bottom: 12px;
+      }
+
+      &.properties-tab {
+        margin-bottom: 0;
+
+        tr {
+          margin-bottom: 10px;
+        }
+
+        td {
+          height: unset;
+        }
+
+        td.left {
+          display: flex;
+          align-items: center;
+          .margin-right-20();
+
+          label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+
+    tr.author-info {
+      align-items: flex-start;
+
+      td {
+        &.left {
+          height: 22px;
+        }
+
+        display: flex;
+        align-items: center;
+        & > *:not(:last-child) {
+          .margin-right-5();
+        }
+      }
+    }
+
+    .author-info tbody tr:last-child {
+      margin-bottom: 20px;
     }
 
     &.main {
       width: 100%;
     }
   }
+
+  #fms-flex-add-property {
+    margin-top: 10px;
+    td {
+      height: unset;
+    }
+  }
+
+  #fminfo-btn-add-property {
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    height: 24px;
+
+    span {
+      border-bottom: 1px dotted currentColor;
+      padding-bottom: 2px;
+    }
+  }
+
+  .custom-property-wrapper {
+    display: flex;
+    align-items: center;
+    & > *:not(:last-child) {
+      .margin-right-5();
+    }
+  }
+
+  .tool.close:before, .tool.close:after {
+    margin-top: 2px;
+  }
 }
 
 #panel-rights {