flex order title

src/components/toolbar/extensions/android.scss

@@ -14,7 +14,7 @@ $toolbar-android-button-text-color:       #007aff !default;
   height: $toolbar-android-height;
   background: $toolbar-android-background;
 
-  .bar-inner-title {
+  .bar-title {
     font-size: $toolbar-android-title-font-size;
   }
 

src/components/toolbar/extensions/ios.scss

@@ -35,22 +35,22 @@ $toolbar-ios-button-background-color:       transparent !default;
     content: '';
   }
 
+  .bar-primary-item {
+    @include flex-order(2);
+  }
+
   .bar-title {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    @include flex-order(3);
+    font-size: $toolbar-ios-title-font-size;
+    text-align: center;
   }
 
   .bar-inner-title {
-    font-size: $toolbar-ios-title-font-size;
-    text-align: center;
     opacity: 0;
   }
 
-  .bar-spacer {
-    @include flex(1);
+  .bar-secondary-item {
+    @include flex-order(4);
   }
 
   .button {

src/components/toolbar/toolbar.js

@@ -24,7 +24,6 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
       <div class="bar-item bar-primary-item">
         <content select="ion-nav-items[side=primary]"></content>
       </div>
-      <div class="bar-spacer"></div>
       <div class="bar-item bar-secondary-item">
         <content select="ion-nav-items[side=secondary]"></content>
       </div>
@@ -37,9 +36,10 @@ export class Toolbar {
 
     this.config = configFactory.create(this);
 
-    window.requestAnimationFrame(() => {
+    // TODO: make more better plz
+    setTimeout(() => {
       this.alignTitle()
-    })
+    }, 32)
   }
 
   alignTitle() {
@@ -50,74 +50,29 @@ export class Toolbar {
 
     if (this.textAlign !== 'center') return
 
-    let barItemElements = ele.querySelectorAll('.bar-item')
-
-    let x, barItem
-    let barItemKeys = []
-    let barItems = {}
-
-    for (x = 0; x < (barItemElements && barItemElements.length); x++) {
-      barItem = barItemElements[x]
-
-      barItemKeys.push(barItem.offsetLeft)
-
-      barItems[barItem.offsetLeft] = {
-        left: barItem.offsetLeft,
-        right: barItem.offsetLeft + barItem.offsetWidth
+    // dont bother if the title is already too long
+    if (this.titleEle.offsetWidth < this.titleEle.scrollWidth) {
+      if (!this.isTitleVisible) {
+        this.titleEle.style.opacity = this.isTitleVisible = 1
       }
+      return
     }
 
-    barItemKeys.sort((a, b) => a - b)
+    let leftMargin = this.titleEle.offsetLeft
+    let rightMargin = ele.offsetWidth - (leftMargin + this.titleEle.offsetWidth)
+    let centerMargin = leftMargin - rightMargin
 
-    let largestGap = null
+    this.titleEle.style.margin = `0 ${centerMargin}px 0 0`
 
-    for (x = 1; x < barItemKeys.length; x++) {
-      let leftItem = barItems[barItemKeys[x - 1]]
-      let rightItem = barItems[barItemKeys[x]]
-
-      let gapWidth = rightItem.left - leftItem.right
-
-      if (!largestGap || gapWidth > largestGap.width) {
-        largestGap = {
-          width: gapWidth,
-          left: leftItem.right,
-          right: rightItem.left
-        }
+    window.requestAnimationFrame(() => {
+      if (this.titleEle.offsetWidth < this.titleEle.scrollWidth) {
+        this.titleEle.style.margin = ''
+        this.titleEle.style.textAlign = 'left'
       }
-    }
-
-    let marginLeft = 0
-    let marginRight = 0
-
-    if (largestGap) {
-      marginLeft = largestGap.left
-      marginRight = largestGap.right
-    }
-
-    let barWidth = ele.offsetWidth
-    let centeredMargin = Math.max(marginLeft, barWidth - marginRight)
-    let newMargin = `0 ${centeredMargin}px`
-
-    if (newMargin !== this.titleMargin) {
-      this.titleEle.style.margin = this.titleMargin = newMargin
-      if (this.titleTextAlgin !== '') {
-        this.titleEle.style.textAlign = this.titleTextAlgin = ''
+      if (!this.isTitleVisible) {
+        this.titleEle.style.opacity = this.isTitleVisible = 1
       }
-
-      // if an ellipsis is being shown, open up the right side
-      // as far as it can before hitting right side buttons
-      window.requestAnimationFrame(() => {
-        if (this.titleEle.offsetWidth < this.titleEle.scrollWidth) {
-          this.titleEle.style.margin = `0 ${barWidth - marginRight}px 0 ${centeredMargin}px`
-          this.titleEle.style.textAlign = this.titleTextAlgin = 'left'
-        }
-        if (!this.isTitleVisible) {
-          this.titleEle.style.opacity = 1
-          this.isTitleVisible = true
-        }
-      })
-    }
-
+    })
   }
 
 }

src/components/toolbar/toolbar.scss

@@ -34,14 +34,26 @@ $toolbar-background:              #f7f7f8 !default;
   @include flex-align-items(center);
 }
 
-.bar-spacer {
-  @include flex(none);
+.toolbar .button {
+  background: transparent;
+  border: none;
+}
+
+.back-button {
+  @include flex-display();
+  @include flex-order(1);
+}
+
+.back-button-icon {
+  margin-right: 5px;
+  min-width: 12px;
 }
 
 .bar-title {
   @include flex-display();
   @include flex(1);
   @include flex-align-items(center);
+  @include flex-order(2);
 }
 
 .bar-inner-title {
@@ -52,16 +64,10 @@ $toolbar-background:              #f7f7f8 !default;
   text-overflow: ellipsis;
 }
 
-.back-button {
-  @include flex-display();
+.bar-primary-item {
+  @include flex-order(3);
 }
 
-.back-button-icon {
-  margin-right: 5px;
-  min-width: 12px;
-}
-
-.toolbar .button {
-  background: transparent;
-  border: none;
+.bar-secondary-item {
+  @include flex-order(4);
 }