change appearing of action bars

WorldBrain · Jun 13, 2024 · 2655d2c · 2655d2c
1 parent 921911d
commit 2655d2c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/annotations/components/AnnotationEditable.tsx b/src/annotations/components/AnnotationEditable.tsx
@@ -1016,6 +1016,7 @@ export default class AnnotationEditable extends React.Component<Props, State> {
                     compactVersion={this.props.compactVersion}
                     inFocus={this.props.isInFocus}
                     inPageMode={this.props.contextLocation === 'in-page'}
+                    inEditMode={isEditing || isEditingHighlight}
                 >
                     <ItemBoxBottom
                         borderTop={false}
@@ -1066,6 +1067,7 @@ export default class AnnotationEditable extends React.Component<Props, State> {
                 compactVersion={this.props.compactVersion}
                 inFocus={this.props.isInFocus}
                 inPageMode={this.props.contextLocation === 'in-page'}
+                inEditMode={isEditing || isEditingHighlight}
             >
                 <ShareMenuContainer>
                     <PrimaryAction
@@ -1649,6 +1651,7 @@ const DefaultFooterStyled = styled.div<{
     hoverCard: boolean
     inFocus: boolean
     inPageMode?: boolean
+    inEditMode?: boolean
 }>`
     display: none;
     bottom: 0px;
@@ -1658,7 +1661,7 @@ const DefaultFooterStyled = styled.div<{
     padding: 0 10px 0px 10px;
     box-sizing: border-box;
     border-radius: 0 0 12px 12px;
-    position: absolute;
+    position: relative;
     animation: ${slideInFromBottom} 0.1s ease-out;
     background: ${(props) => props.theme.colors.black}98;
     backdrop-filter: blur(5px);
@@ -1677,6 +1680,12 @@ const DefaultFooterStyled = styled.div<{
         css`
             display: flex;
         `}
+    ${(props) =>
+        props.inEditMode &&
+        css`
+            display: flex;
+            position: relative;
+        `}
     ${(props) =>
         props.inPageMode &&
         css`
@@ -1832,7 +1841,8 @@ const ContentContainer = styled.div<{ isEditMode: boolean }>`
     ${(props) =>
         props.isEditMode &&
         css`
-            /* margin-bottom: 10px; */
+            grid-gap: 10px;
+            padding-top: 5px;
         `}
 `
 const BtnContainerStyled = styled.div`

diff --git a/src/dashboard-refactor/search-results/components/page-result.tsx b/src/dashboard-refactor/search-results/components/page-result.tsx
@@ -1149,6 +1149,7 @@ const FooterBar = styled.div<{
     shouldShow: boolean
     inFocus: boolean
     inPageMode?: boolean
+    inTitleEditMode?: boolean
 }>`
     bottom: 0;
     width: 100%;
@@ -1158,7 +1159,7 @@ const FooterBar = styled.div<{
     background: unset;
     backdrop-filter: unset;
     margin-top: -5px;
-    position: absolute;
+    position: relative;
     animation: ${slideInFromBottom} 0.1s cubic-bezier(0.22, 0.61, 0.36, 1)
         forwards;
     display: none;
@@ -1172,6 +1173,12 @@ const FooterBar = styled.div<{
             position: relative;
             display: flex;
         `};
+    ${(props) =>
+        props.inTitleEditMode &&
+        css`
+            display: flex;
+            position: relative;
+        `};
     ${(props) =>
         props.shouldShow &&
         css`