From 08d2eea47a81f8fee331a29ef1c9070b811752f9 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Thu, 20 Apr 2023 00:14:59 -0700 Subject: [PATCH] Decouple history-file-tree styling out of editor file tree: - Extract/duplicate the style from editor file tree (only extract styling that's being used in history file tree) - Change some of the class name to avoid duplicated class name from the editor file tree - Revert change to editor file tree since it has been moved to history file tree GitOrigin-RevId: 6c3b20080c9b428363024db622f60e3540d919e6 --- .../editor/file-tree-history-react.pug | 2 +- .../file-tree/history-file-tree-folder.tsx | 1 + .../file-tree/history-file-tree-item.tsx | 24 ++-- .../history/components/history-file-tree.tsx | 2 +- .../stylesheets/app/editor/file-tree.less | 18 +-- .../stylesheets/app/editor/history-react.less | 130 ++++++++++++++++++ 6 files changed, 147 insertions(+), 30 deletions(-) diff --git a/services/web/app/views/project/editor/file-tree-history-react.pug b/services/web/app/views/project/editor/file-tree-history-react.pug index 234d8f1622..bcc29bb812 100644 --- a/services/web/app/views/project/editor/file-tree-history-react.pug +++ b/services/web/app/views/project/editor/file-tree-history-react.pug @@ -1,3 +1,3 @@ -aside.editor-sidebar.full-size.file-tree#history-file-tree( +aside.editor-sidebar.full-size.history-file-tree#history-file-tree( ng-show="history.isReact && ui.view == 'history'" ) diff --git a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-folder.tsx b/services/web/frontend/js/features/history/components/file-tree/history-file-tree-folder.tsx index d34389804d..1361fd6613 100644 --- a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-folder.tsx +++ b/services/web/frontend/js/features/history/components/file-tree/history-file-tree-folder.tsx @@ -27,6 +27,7 @@ export default function HistoryFileTreeFolder({ - +
+ {icons} +
) } diff --git a/services/web/frontend/js/features/history/components/history-file-tree.tsx b/services/web/frontend/js/features/history/components/history-file-tree.tsx index d8aaead216..9b8e70dc7f 100644 --- a/services/web/frontend/js/features/history/components/history-file-tree.tsx +++ b/services/web/frontend/js/features/history/components/history-file-tree.tsx @@ -17,7 +17,7 @@ export default function HistoryFileTree() {
  • diff --git a/services/web/frontend/stylesheets/app/editor/file-tree.less b/services/web/frontend/stylesheets/app/editor/file-tree.less index d5a2fac3e5..b40cac76c5 100644 --- a/services/web/frontend/stylesheets/app/editor/file-tree.less +++ b/services/web/frontend/stylesheets/app/editor/file-tree.less @@ -119,7 +119,9 @@ } .entity > .entity-name > button { - .reset-button; + background-color: transparent; + border: 0; + padding: 0; &:focus { outline: none; } @@ -129,20 +131,6 @@ text-overflow: ellipsis; text-align: left; padding-right: 32px; - font-weight: normal; - - .item-name-button-text { - display: inline-flex; - margin-right: 5px; - } - - .item-name-button-badge { - text-transform: capitalize; - - &:hover { - background-color: @neutral-20; - } - } } } diff --git a/services/web/frontend/stylesheets/app/editor/history-react.less b/services/web/frontend/stylesheets/app/editor/history-react.less index f582c560dc..1f8054411c 100644 --- a/services/web/frontend/stylesheets/app/editor/history-react.less +++ b/services/web/frontend/stylesheets/app/editor/history-react.less @@ -224,3 +224,133 @@ history-root { bottom: 16px; } } + +.history-file-tree { + display: flex !important; // To work around jQuery layout's inline styles + flex-direction: column; + flex-grow: 1; + max-height: 100%; + + ul.history-file-tree-list { + margin: 0; + overflow-x: hidden; + height: 100%; + flex-grow: 1; + position: relative; + overflow-y: auto; + + .history-file-tree-item > ul, + ul[role='tree'] { + margin-left: 22px; + } + + li.bottom-buffer { + min-height: @line-height-computed; + } + + li { + line-height: @file-tree-line-height; + position: relative; + + &:focus { + outline: none; + } + + .history-file-tree-item { + color: @file-tree-item-color; + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: clip; + user-select: none; + + &:focus { + outline: none; + } + + &:hover { + background-color: @file-tree-item-hover-bg; + + // When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the + // element not fill the entire file-tree width (as it's spaced from the left-hand side via margin) + // and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill + // the empty space. + .fake-full-width-bg(@file-tree-item-hover-bg); + } + + .history-file-tree-folder-button, + .history-file-tree-item-button { + .reset-button; + + &:focus { + outline: none; + } + } + + .history-file-tree-item-button { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; + padding-right: 40px; + font-weight: normal; + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + .history-file-tree-item-button-text { + display: inline-flex; + margin-right: 5px; + } + + .history-file-tree-item-button-badge { + text-transform: capitalize; + + &:hover { + background-color: @neutral-20; + } + } + } + } + + i.fa { + color: @file-tree-item-icon-color; + font-size: 14px; + + &.file-tree-icon { + margin-right: 4px; + margin-left: 8px; + } + + &.file-tree-folder-icon { + margin-right: 4px; + } + + &.file-tree-expand-icon { + margin-left: 8px; + } + } + + i.fa-folder-open, + i.fa-folder { + color: @file-tree-item-folder-color; + font-size: 14px; + } + } + + li.selected > .history-file-tree-item { + color: @file-tree-item-selected-color; + background-color: @file-tree-item-selected-bg; + font-weight: bold; + + > div > i.fa, + > button > i.fa, + > i.fa { + color: @file-tree-item-selected-color; + } + + .fake-full-width-bg(@file-tree-item-selected-bg); + } + } +}