Fix display tabs of open files on one line + Fix dropdown position wh…

…en scrolled too far
SuperblocksHQ · Nov 23, 2018 · 373d4ac · 373d4ac
1 parent b459dc1
commit 373d4ac
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 44 deletions.
diff --git a/src/components/projecteditor/panes.js b/src/components/projecteditor/panes.js
@@ -27,6 +27,9 @@ export default class Panes extends Component {
         super(props);
         this.panes = [];
         this.activePaneId = null;
+        this.state = {
+            mousePosition: 0
+        }
         props.router.register('panes', this);
     }
 
@@ -161,7 +164,7 @@ export default class Panes extends Component {
     tabRightClicked = (e, id) => {
         // We save the pane id for when closing all other panes.
         e.preventDefault();
-        this.setState({ showContextMenuPaneId: id });
+        this.setState({ showContextMenuPaneId: id, mousePosition: e.pageX });
     };
 
     tabClicked = (e, id) => {
@@ -247,7 +250,7 @@ export default class Panes extends Component {
         const selected = style.selected;
         const html = this.panes.map((pane, index) => {
             const contextMenu = (
-                <div className={style.contextMenu}>
+                <div className={classnames([style.contextMenu])} style={{left: this.state.mousePosition}}>
                     <div className={style.item} onClick={this.closeAllPanes}>
                         Close all
                     </div>
@@ -261,41 +264,40 @@ export default class Panes extends Component {
             cls[tab] = true;
             cls[selected] = isSelected;
             return (
-                <div key={index}>
-                    <div
+                <div
+                    key={index}
+                    onMouseDown={e => this.tabClicked(e, pane.id)}
+                    onContextMenu={e => this.tabRightClicked(e, pane.id)}
+                >
+                    <DropdownContainer
                         className={classnames(cls)}
-                        onMouseDown={e => this.tabClicked(e, pane.id)}
-                        onContextMenu={e => this.tabRightClicked(e, pane.id)}
+                        dropdownContent={contextMenu}
+                        useRightClick={true}
                     >
-                        <DropdownContainer
-                            dropdownContent={contextMenu}
-                            useRightClick={true}
-                        >
-                            <div className={style.tabContainer}>
-                                <div className={style.title}>
-                                    <div className={style.icon}>
-                                        {pane.getIcon()}
-                                    </div>
-                                    <div className={style.title2}>
-                                        {pane.getTitle()}
-                                    </div>
+                        <div className={style.tabContainer}>
+                            <div className={style.title}>
+                                <div className={style.icon}>
+                                    {pane.getIcon()}
                                 </div>
-                                <div className={style.close}>
-                                    <button className="btnNoBg"
-                                        onClick={ e =>
-                                            this.tabClickedClose(e, pane.id)
-                                        }
-                                    >
-                                        <IconClose />
-                                    </button>
+                                <div className={style.title2}>
+                                    {pane.getTitle()}
                                 </div>
                             </div>
-                        </DropdownContainer>
-                    </div>
+                            <div className={style.close}>
+                                <button className="btnNoBg"
+                                    onClick={ e =>
+                                        this.tabClickedClose(e, pane.id)
+                                    }
+                                >
+                                    <IconClose />
+                                </button>
+                            </div>
+                        </div>
+                    </DropdownContainer>
                 </div>
             );
         });
-        return <div>{html}</div>;
+        return <React.Fragment>{html}</React.Fragment>;
     };
 
     getPaneHeight = () => {

diff --git a/src/components/projecteditor/style.less b/src/components/projecteditor/style.less
@@ -58,22 +58,20 @@
             width: 100%;
             overflow-y: hidden;
             overflow-x: auto;
+            display: flex;
             .tab {
                 padding: 10px 12px 10px 12px;
-                display: flex;
-                align-items: center;
-                align-content: center;
-                float: left;
-                min-width: 60px;
                 background-color: #2D2D2D;
                 cursor: pointer;
                 color: #969696;
                 .tabContainer {
-                    div {
-                        float: left;
-                    }
+                    display: flex;
                     .title {
-                        padding-right: 10px;
+                        padding-right: 10px; 
+                        display: flex;
+                        div {
+                            display: flex;
+                        }
                         .icon {
                             margin-right: 10px;
                         }
@@ -95,7 +93,7 @@
             .contextMenu {
                 display: block;
                 position: fixed;
-                margin-left: 40px;
+                margin-left: -40px;
                 margin-top: 15px;
                 background-color: #141414;
                 z-index: 1;
@@ -124,11 +122,6 @@
         .panes {
             width: 100%;
             height: 100%;
-            /*&:after {*/
-                /*content: " ";*/
-                /*display: block;*/
-                /*clear: both;*/
-            /*}*/
             .pane {
                 display: none;
                 &.visible {