replace timeline button and fix css

microsoft · Dec 13, 2024 · c55f004 · c55f004
1 parent f1e8fe3
commit c55f004
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/theme/image-editor/imageEditor.less b/theme/image-editor/imageEditor.less
@@ -96,6 +96,7 @@
     border: 2px solid #4067b3;
     border-bottom: none;
     display: flex;
+    flex-shrink: 0;
 }
 
 .image-editor-header-left,

diff --git a/theme/image-editor/timeline.less b/theme/image-editor/timeline.less
@@ -7,14 +7,21 @@
     flex-direction: column;
 }
 
+.image-editor-timeline-frames {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding: 0.4rem 0;
+}
+
 .image-editor-timeline-frame {
     border: 1px var(--sidebar-icon-inactive-color) solid;
     color: var(--sidebar-icon-inactive-color);
 
     border-radius: 0.25rem;
     width: 6rem;
     height: 6rem;
-    margin: 0.4rem;
+    margin: 0 0.4rem;
 
     transition: border 0.2s, color 0.2s, background-color 0.2s;
     overflow: hidden;
@@ -126,6 +133,20 @@
     background-color: #aeaeae;
 }
 
+.common-button.image-editor-button.add-frame-button {
+    height: 2rem;
+    width: 6rem;
+    margin: 0 0.4rem;
+
+    border: 1px solid var(--sidebar-icon-inactive-color);
+    transition: color 0.1s, border-color 0.1s;
+
+    &:hover {
+        border-color: var(--sidebar-icon-active-color);
+        filter: none;
+    }
+}
+
 /* .timeline-frame-actions */
 
 

diff --git a/webapp/src/components/ImageEditor/Timeline.tsx b/webapp/src/components/ImageEditor/Timeline.tsx
@@ -6,6 +6,7 @@ import { dispatchChangeCurrentFrame, dispatchNewFrame, dispatchDuplicateFrame, d
 
 import { TimelineFrame } from "./TimelineFrame";
 import { bindGestureEvents, ClientCoordinates } from "./util";
+import { Button } from "../../../../react-common/components/controls/Button";
 
 interface TimelineProps {
     colors: string[];
@@ -81,9 +82,12 @@ export class TimelineImpl extends React.Component<TimelineProps, TimelineState>
                                     deleteFrame={this.deleteFrame} />
                             </div>
                         }
-                        <div className="image-editor-timeline-frame collapsed" role="button" onClick={this.newFrame}>
-                            <span className="ms-Icon ms-Icon--Add" />
-                        </div>
+                        <Button
+                            className="image-editor-button add-frame-button toggle"
+                            title={lf("Add new frame")}
+                            onClick={this.newFrame}
+                            leftIcon="ms-Icon ms-Icon--Add"
+                        />
                     </div>
                 </div>
             </div>