bm-core-ui 2.11.9-beta.2 → 2.12.0-beta.12

package/build/BMCollectionView/BMCollectionViewFlowLayout.js

@@ -1670,6 +1670,11 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 		return this._prepareLayoutWithScrollbarOffset(NO);
 	},
 
+	/**
+	 * Set to `YES` while the current layout is using scrollbar offsets, `NO` otherwise.
+	 */
+	_usingScrollbarOffset: NO, // <Boolean>
+
 	/**
 	 * Prepares the layout, optionally taking the scrollbar size into account.
 	 * @param useOffset <Boolean>			When set to `YES` the layout will take the scrollbar size into account.
@@ -1680,6 +1685,8 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 			return;
 		}
 
+		this._usingScrollbarOffset = useOffset;
+
 		// When the scrollbar offset is used, invalidate any measurement that exceeds the available space.
 		if (this._expectedCellSize && this._collectionView.scrollBarSize) {
 			switch (this.orientation) {
@@ -1794,11 +1801,11 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 			// is measured up to at least the current collection view bounds
 			if (this._expectedCellSize && this._copy) {
 				target = target || {};
-				if (target.targetRect) {
-					target.targetRect = target.targetRect.rectByUnionWithRect(this.collectionView.bounds)
+				if (target.rect) {
+					target.rect = target.rect.rectByUnionWithRect(this.collectionView.bounds)
 				}
 				else {
-					target.targetRect = this.collectionView.bounds;
+					target.rect = this.collectionView.bounds;
 				}
 			}
 
@@ -3087,7 +3094,7 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 		return [BMLayoutConstraint.constraintWithView(cell, {
 			attribute: BMLayoutAttribute.Width, 
 			relatedBy: BMLayoutConstraintRelation.LessThanOrEquals, 
-			constant: this.collectionView.frame.size.width - this.sectionInsets.left - this.sectionInsets.right
+			constant: this.collectionView.frame.size.width - this.sectionInsets.left - this.sectionInsets.right - (this._usingScrollbarOffset ? this.collectionView.scrollBarSize : 0)
 		})]
 	},
 	

package/build/BMCollectionView/BMCollectionViewLayout.js

@@ -910,6 +910,19 @@ export var _BMCollectionViewTransitionLayout = function (attributes, initialSize
 };
 
 _BMCollectionViewTransitionLayout.prototype = BMExtend({}, BMCollectionViewLayout.prototype, {
+
+    /**
+     * When set to `YES` this transition layout will no longer perform updates.
+     */
+    _transitionStopped: NO, // <Boolean>
+
+    /**
+     * Stops the current transition in its tracks, instantly setting the final attributes on all cells.
+     */
+    _stopTransition() {
+		this._applyFinalAttributes();
+        this._transitionStopped = YES;
+    },
 	
 	/**
 	 * Controls how close to completion the transition is.
@@ -917,6 +930,12 @@ _BMCollectionViewTransitionLayout.prototype = BMExtend({}, BMCollectionViewLayou
 	_fraction: 0, // <Number>
 	get fraction() { return this._fraction; },
 	set fraction(fraction) {
+        // If this transition was stopped, don't perform any other changes
+        if (this._transitionStopped) {
+            this._fraction = fraction;
+            return;
+        }
+
 		// If this is no longer attached to a collection view, don't perform any changes
 		if (!this.collectionView) return;
 

package/build/BMCoreUI.css

@@ -1,14 +1,25 @@
 /* MARK: Collection view */
 
-.BMCollectionViewCellDragging {
+.BMCollectionViewCellDragging:not(.BMAnimationNode) {
 	opacity: .5 !important;
 }
 
+.BMCollectionViewCellInserting {
+	visibility: hidden !important;
+	opacity: 0 !important;
+}
+
+.BMAnimationNode {
+	position: fixed !important;
+	z-index: 999998 !important;
+	pointer-events: none;
+}
+
 .BMDragShadow .BMRipple {
 	visibility: hidden !important;
 }
 
-.BMDragShadow {
+.BMDragShadow, .BMAnimationNode {
 	backface-visibility: hidden;
 	-webkit-backface-visibility: hidden;
 }
@@ -54,6 +65,126 @@
 	font-weight: bolder;
 }
 
+/* MARK: Drag Session */
+
+.BMDragSessionIndicatorContainer {
+	position: fixed;
+	pointer-events: none;
+
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	z-index: 999999 !important;
+}
+
+.BMDragSessionIndicator {
+	background-color: rgba(0, 128, 255, 1);
+
+	color: white;
+	font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', sans-serif !important;
+	font-size: 18px !important;
+	font-weight: bold !important;
+
+	padding-left: 16px;
+	padding-right: 16px;
+
+	height: 24px;
+	border-radius: 12px;
+
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	box-shadow: 0px 4px 12px rgba(0, 0, 0, .33);
+
+	pointer-events: none;
+	transition: background-color .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+.BMDragSessionIndicatorBlue {
+	background-color: rgba(0, 128, 255, 1);
+}
+
+.BMDragSessionIndicatorRed {
+	background-color: rgba(220, 30, 0, 1);
+}
+
+.BMDragSessionIndicatorYellow {
+	background-color: rgb(255, 183, 0);
+}
+
+.BMDragSessionIndicatorGray {
+	background-color: rgb(108, 119, 124);
+}
+
+.BMDragSessionIndicatorGreen {
+	background-color: rgba(0, 200, 60, 1);
+}
+
+.BMDragSessionIndicatorIcon {
+	width: 16px;
+	height: 16px;
+
+	margin-right: 8px;
+
+	opacity: 1;
+
+	transition:
+		width .3s cubic-bezier(0.455, 0.03, 0.515, 0.955),
+		height .3s cubic-bezier(0.455, 0.03, 0.515, 0.955),
+		margin-right .3s cubic-bezier(0.455, 0.03, 0.515, 0.955),
+		opacity .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+.BMDragSessionIndicatorIcon.BMDragSessionIndicatorIconHidden {
+	width: 0;
+	height: 0;
+	margin-right: 0;
+	opacity: 0;
+}
+
+.BMDragSessionIndicatorItemCount {
+	transition: width .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+.BMDragSessionIndicatorMessage {
+	white-space: nowrap;
+	font-size: 16px !important;
+	font-weight: 500;
+
+	margin-left: 8px;
+
+	opacity: 1;
+
+	transition:
+		width .3s cubic-bezier(0.455, 0.03, 0.515, 0.955),
+		margin-left .3s cubic-bezier(0.455, 0.03, 0.515, 0.955),
+		opacity .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+.BMDragSessionIndicatorMessage.BMDragSessionIndicatorMessageHidden {
+	width: 0px;
+	opacity: 0;
+	margin-left: 0;
+}
+
+.BMDragSessionIndicatorMessage.BMDragSessionIndicatorMessageMeasurement {
+	transition: none;
+	visibility: hidden;
+	
+	font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', sans-serif !important;
+	font-size: 16px !important;
+
+	position: absolute;
+}
+
 /* MARK: Layout Guide */
 
 .BMLayoutGuideMask {
@@ -1393,21 +1524,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 }
 
 .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem {
-	height: 44px;
-	line-height: 44px;
-	border-top: 1px solid rgba(0, 0, 0, .1);
-}
-
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:first-child {
-	border-top-width: 0px;
-}
-
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted + .BMMenuItem {
-	border-top-color: rgba(0, 0, 0, .2);
-}
-
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted + .BMMenuDivider {
-	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1) inset;
+	height: 38px;
+	line-height: 38px;
 }
 
 .BMMenuIcon {
@@ -1465,48 +1583,104 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 
 @keyframes BMMenuItemActiveAnimation {
 	from {
-		background: transparent;
 		color: rgba(0, 0, 0, .8);
 	}
 
 	49% {
-		background: transparent;
 		color: rgba(0, 0, 0, .8);
 	}
 
 	50% {
-		background: rgb(0, 128, 255);
 		color: white;
 	}
 
 	to {
-		background: rgb(0, 128, 255);
 		color: white;
 	}
 }
 
-.BMLayoutEditorConstraintPopupOption:hover, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active, .BMMenuItem.BMMenuItemHighlighted {
-	background: rgb(0, 128, 255);
+@keyframes BMMenuItemActiveAnimationBackground {
+	from {
+		background: transparent;
+	}
+
+	49% {
+		background: transparent;
+	}
+
+	50% {
+		background: rgb(0, 128, 255);
+	}
+
+	to {
+		background: rgb(0, 128, 255);
+	}
+}
+
+.BMLayoutEditorConstraintPopupOption::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem::before,
+.BMMenuItem::before {
+	content: '';
+
+	position: absolute;
+
+	top: 0;
+	bottom: 0;
+
+	left: 4px;
+	right: 4px;
+
+	border-radius: 5px;
+
+	z-index: -1;
+}
+
+.BMLayoutEditorConstraintPopupOption:hover,
+.BMMenuItem.BMMenuItemHighlighted {
 	color: white;
 }
 
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active {
+	color: rgba(0, 0, 0, .8);
+}
+
+.BMLayoutEditorConstraintPopupOption:hover::before,
+.BMMenuItem.BMMenuItemHighlighted::before {
+	background: rgb(0, 128, 255);
+}
+
 .BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted {
 	background: white;
 	color: rgba(0, 0, 0, .8);
 }
 
-.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover {
+.BMLayoutEditorConstraintPopupOption:active,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover {
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
 }
 
+.BMLayoutEditorConstraintPopupOption:active::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active::before {
+	background: transparent;
+}
+
+
 .BMMenuItem.BMMenuItemActive {
 	animation: .15s linear BMMenuItemActiveAnimation;
 	animation-fill-mode: both;
 }
 
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive,
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted {
+.BMMenuItem.BMMenuItemActive::before {
+	animation: .15s linear BMMenuItemActiveAnimationBackground;
+	animation-fill-mode: both;
+}
+
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted::before {
 	animation: none;
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
@@ -1515,7 +1689,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	-webkit-backdrop-filter: brightness(80%);
 }
 
-.BMLayoutEditorConstraintPopupOptionHighlighted, .BMMenuItemHighlighted {
+.BMLayoutEditorConstraintPopupOptionHighlighted::before,
+.BMMenuItemHighlighted::before {
 	background: rgba(0, 128, 255, .5);
 }
 
@@ -1528,46 +1703,46 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		color: rgba(255, 255, 255, .45);
 	}
 
-	.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover {
+	.BMLayoutEditorConstraintPopupOption:active,
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover,
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active {
 		background: transparent;
 		color: white;
 	}
 
-	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem {
-		border-bottom-color: rgba(255, 255, 255, .1);
-	}
-
 	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive,
 	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted {
 		color: rgba(255, 255, 255, 1);
-	
+	}
+
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive::before,
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted::before {
 		backdrop-filter: brightness(110%);
 		-webkit-backdrop-filter: brightness(110%);
 	}
 
 	.BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted {
-		background: rgba(33, 33, 33, 1);
 		color: rgba(255, 255, 255, .9);
 	}
 
+	.BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted::before {
+		background: rgba(33, 33, 33, 1);
+	}
+
 	@keyframes BMMenuItemActiveAnimation {
 		from {
-			background: transparent;
 			color: rgba(255, 255, 255, .9);
 		}
 	
 		49% {
-			background: transparent;
 			color: rgba(255, 255, 255, .9);
 		}
 	
 		50% {
-			background: rgb(0, 128, 255);
 			color: white;
 		}
 	
 		to {
-			background: rgb(0, 128, 255);
 			color: white;
 		}
 	}
@@ -1703,12 +1878,6 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	flex-shrink: 0;
 }
 
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuDivider {
-	margin: 0;
-	height: 3px;
-	background: rgba(0, 0, 0, .1);
-}
-
 .BMLayoutEditorDetailsDividerCell {
 	background: rgba(0, 0, 0, .05);
 }