richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

One last attempt to get display: flex working with dimmers

dimmer-flex
jlukic 10 years ago
parent
64f0be8ee7
commit
6a3fba922f
7 changed files with 77 additions and 162 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      RELEASE-NOTES.md
  2. 2
      src/definitions/modules/dimmer.js
  3. 23
      src/definitions/modules/dimmer.less
  4. 87
      src/definitions/modules/modal.js
  5. 37
      src/definitions/modules/modal.less
  6. 59
      src/definitions/modules/transition.js
  7. 30
      src/themes/default/modules/modal.variables

1
RELEASE-NOTES.md
View File

@ -192,6 +192,7 @@
- **Menu** - `dropdown menu` in a `secondary pointing menu` or `tabular menu` now receive distinct active styling from other `active item`
- **Menu** - Fixed arrow position in `pointing menu` to be more consistent, round to exact pixels and account for arrow border width
- **Menu** - Fix issue with `pointing` arrow having too high a `z-index` and appearing above `ui dropdown menu`
- **Modal** - Modal headers will now correctly adjust sizes using `ui header` variations
- **Modal** - `scrollable modal` now correctly adds padding below modal
- **Modal** - Modal with `detachable: false` inside `ui sidebar` `pusher` element will now show correctly
- **Popup** - Popup now correctly adjusts if `data` attributes change

2
src/definitions/modules/dimmer.js
View File

@ -219,6 +219,7 @@ $.fn.dimmer = function(parameters) {
$dimmer
.transition({
animation : settings.transition + ' in',
displayType : 'flex',
queue : false,
duration : module.get.duration(),
useFailSafe : true,
@ -264,6 +265,7 @@ $.fn.dimmer = function(parameters) {
.transition({
animation : settings.transition + ' out',
queue : false,
displayType : 'flex',
duration : module.get.duration(),
useFailSafe : true,
onStart : function() {

23
src/definitions/modules/dimmer.less
View File

@ -35,6 +35,13 @@
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: @textAlign;
vertical-align: @verticalAlign;
@ -51,20 +58,6 @@
z-index: @zIndex;
}
/* Dimmer Content */
.ui.dimmer > .content {
width: 100%;
height: 100%;
display: @contentDisplay;
user-select: text;
}
.ui.dimmer > .content > * {
display: @contentChildDisplay;
vertical-align: @verticalAlign;
color: @textColor;
}
/* Loose Coupling */
.ui.segment > .ui.dimmer {
border-radius: inherit !important;
@ -82,7 +75,7 @@
.dimmed.dimmable > .ui.animating.dimmer,
.dimmed.dimmable > .ui.visible.dimmer,
.ui.active.dimmer {
display: block;
display: flex !important;
opacity: @visibleOpacity;
}

87
src/definitions/modules/modal.js
View File

@ -166,10 +166,6 @@ $.fn.modal = function(parameters) {
refresh: function() {
module.remove.scrolling();
module.cacheSizes();
module.set.screenHeight();
module.set.type();
module.set.position();
},
refreshModals: function() {
@ -316,10 +312,6 @@ $.fn.modal = function(parameters) {
if( module.is.animating() || !module.is.active() ) {
module.showDimmer();
module.cacheSizes();
module.set.position();
module.set.screenHeight();
module.set.type();
module.set.clickaway();
if( !settings.allowMultiple && $otherModals.filter('.' + className.active).length > 0) {
@ -411,7 +403,6 @@ $.fn.modal = function(parameters) {
$dimmable.dimmer('hide', function() {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
module.remove.clickaway();
module.remove.screenHeight();
}
});
}
@ -492,14 +483,6 @@ $.fn.modal = function(parameters) {
;
}
},
screenHeight: function() {
if(module.cache.height > module.cache.pageHeight) {
module.debug('Removing page height');
$body
.css('height', '')
;
}
},
keyboardShortcuts: function() {
module.verbose('Removing keyboard shortcuts');
$document
@ -512,28 +495,6 @@ $.fn.modal = function(parameters) {
}
},
cacheSizes: function() {
var
modalHeight = $module.outerHeight()
;
if(module.cache === undefined || modalHeight !== 0) {
module.cache = {
pageHeight : $(document).outerHeight(),
height : modalHeight + settings.offset,
contextHeight : (settings.context == 'body')
? $(window).height()
: $dimmable.height()
};
}
module.debug('Caching modal and container sizes', module.cache);
},
can: {
fit: function() {
return ( ( module.cache.height + (settings.padding * 2) ) < module.cache.contextHeight);
}
},
is: {
active: function() {
return $module.hasClass(className.active);
@ -557,7 +518,7 @@ $.fn.modal = function(parameters) {
autofocus: function() {
if(settings.autofocus) {
var
$inputs = $module.find(':input:visible'),
$inputs = $module.filter(':input').filter(':visible'),
$autofocus = $inputs.filter('[autofocus]'),
$input = ($autofocus.length > 0)
? $autofocus
@ -573,17 +534,6 @@ $.fn.modal = function(parameters) {
;
}
},
screenHeight: function() {
if( module.can.fit() ) {
$body.css('height', '');
}
else {
module.debug('Modal is taller than page content, resizing page height');
$body
.css('height', module.cache.height + (settings.padding * 2) )
;
}
},
active: function() {
$module.addClass(className.active);
},
@ -591,37 +541,6 @@ $.fn.modal = function(parameters) {
$dimmable.addClass(className.scrolling);
$module.addClass(className.scrolling);
},
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
if(!module.othersActive()) {
module.remove.scrolling();
}
}
else {
module.verbose('Modal cannot fit on screen setting to scrolling');
module.set.scrolling();
}
},
position: function() {
module.verbose('Centering modal on page', module.cache);
if(module.can.fit()) {
$module
.css({
top: '',
marginTop: -(module.cache.height / 2)
})
;
}
else {
$module
.css({
marginTop : '',
top : $document.scrollTop()
})
;
}
},
undetached: function() {
$dimmable.addClass(className.undetached);
}
@ -831,9 +750,7 @@ $.fn.modal.settings = {
context : 'body',
queue : false,
duration : 500,
easing : 'easeOutExpo',
offset : 0,
duration : 400,
transition : 'scale',
// padding with edge of page

37
src/definitions/modules/modal.less
View File

@ -25,12 +25,13 @@
.ui.modal {
display: none;
position: fixed;
z-index: @zIndex;
top: 50%;
left: 50%;
text-align: left;
min-height: 0;
flex: 0 1 auto;
z-index: @zIndex;
background: @background;
border: @border;
@ -38,7 +39,7 @@
border-radius: @borderRadius;
user-select: text;
will-change: top, left, margin, transform, opacity;
will-change: margin, transform, opacity;
}
.ui.modal > :first-child:not(.icon),
@ -91,13 +92,16 @@
padding: @headerPadding;
box-shadow: @headerBoxShadow;
font-size: @headerFontSize;
line-height: @headerLineHeight;
font-weight: @headerFontWeight;
color: @headerColor;
border-bottom: @headerBorder;
}
.ui.modal > .header:not(.ui) {
font-size: @headerFontSize;
}
/*--------------
Content
---------------*/
@ -338,8 +342,6 @@
overflow: hidden;
}
.scrolling.dimmable.dimmed > .dimmer {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling.dimmable > .dimmer {
position: fixed;
@ -349,25 +351,6 @@
margin: @scrollingMargin auto !important;
}
/* undetached scrolling */
.scrolling.undetached.dimmable.dimmed {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling.undetached.dimmable.dimmed > .dimmer {
overflow: hidden;
}
.scrolling.undetached.dimmable .ui.scrolling.modal {
position: absolute;
left: 50%;
margin-top: @scrollingMargin !important;
}
/* Coupling with Sidebar */
.undetached.dimmable.dimmed > .pusher {
z-index: auto;
}
@media only screen and (max-width : @computerBreakpoint) {
.ui.scrolling.modal {
margin-top: @mobileScrollingMargin;

59
src/definitions/modules/transition.js
View File

@ -110,7 +110,7 @@ $.fn.transition = function() {
refresh: function() {
module.verbose('Refreshing display type on next animation');
delete module.displayType;
module.remove.displayType();
},
forceRepaint: function() {
@ -136,7 +136,7 @@ $.fn.transition = function() {
delay: function(interval) {
var
isReverse = (settings.reverse === true),
isReverse = (settings.reverse === true),
shouldReverse = (settings.reverse == 'auto' && module.get.direction() == className.outward),
delay
;
@ -301,9 +301,11 @@ $.fn.transition = function() {
displayType = module.get.displayType(),
overrideStyle = style + 'display: ' + displayType + ' !important;'
;
$module.css('display', '');
module.refresh();
if( $module.css('display') !== displayType ) {
$module
.css('display', '')
;
module.remove.displayType();
if( $module.css('display') !== displayType ) { // bad
module.verbose('Setting inline visibility to', displayType);
$module
.attr('style', overrideStyle)
@ -333,13 +335,13 @@ $.fn.transition = function() {
;
},
hidden: function() {
if(!module.is.hidden()) {
if(!module.is.hidden()) { // bad
$module
.addClass(className.transition)
.addClass(className.hidden)
;
}
if($module.css('display') !== 'none') {
if($module.css('display') !== 'none') { // bad
module.verbose('Overriding default display to hide element');
$module
.css('display', 'none')
@ -360,6 +362,11 @@ $.fn.transition = function() {
$module.data(metadata.displayType, displayType);
}
},
direction: function(direction) {
if(direction) {
$module.data(metadata.direction, direction);
}
},
transitionExists: function(animation, exists) {
$.fn.transition.exists[animation] = exists;
module.verbose('Saving existence of transition', animation, exists);
@ -438,6 +445,9 @@ $.fn.transition = function() {
display: function() {
$module.css('display', '');
},
displayType: function() {
delete module.displayType;
},
direction: function() {
$module
.removeClass(className.inward)
@ -516,18 +526,25 @@ $.fn.transition = function() {
},
direction: function(animation) {
// quickest manually specified direction
var
direction
;
animation = animation || settings.animation;
if(typeof animation === 'string') {
animation = animation.split(' ');
$.each(animation, function(index, word){
if(word === className.inward) {
return className.inward;
direction = className.inward;
}
else if(word === className.outward) {
return className.outward;
direction = className.outward;
}
});
}
// return found direction
if(direction) {
return direction;
}
// slower backup
if( !module.can.transition() ) {
return 'static';
@ -640,18 +657,7 @@ $.fn.transition = function() {
.addClass(className.inward)
.css('animationName')
;
displayType = $clone
.attr('class', elementClass)
.removeAttr('style')
.removeClass(className.hidden)
.removeClass(className.visible)
.show()
.css('display')
;
module.verbose('Determining final display state', displayType);
module.save.displayType(displayType);
$clone.remove();
if(currentAnimation != inAnimation) {
module.debug('Direction exists for animation', animation);
directionExists = true;
@ -664,6 +670,19 @@ $.fn.transition = function() {
module.debug('Static animation found', animation, displayType);
directionExists = false;
}
displayType = $clone
.attr('class', elementClass)
.removeAttr('style')
.removeClass(className.hidden)
.removeClass(className.visible)
.show()
.css('display')
;
module.verbose('Determining final display state', displayType);
module.save.displayType(displayType);
$clone.remove();
module.save.transitionExists(animation, directionExists);
}
return (transitionExists !== undefined)

30
src/themes/default/modules/modal.variables
View File

@ -83,11 +83,11 @@
@largeMonitorWidth: 900px;
@widescreenMonitorWidth: 950px;
@mobileMargin: 0em 0em 0em -(@mobileWidth / 2);
@tabletMargin: 0em 0em 0em -(@tabletWidth / 2);
@computerMargin: 0em 0em 0em -(@computerWidth / 2);
@largeMonitorMargin: 0em 0em 0em -(@largeMonitorWidth / 2);
@widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2);
@mobileMargin: 0em;
@tabletMargin: 0em;
@computerMargin: 0em;
@largeMonitorMargin: 0em;
@widescreenMonitorMargin: 0em;
@fullScreenWidth: 95%;
@fullScreenOffset: (100% - @fullScreenWidth) / 2;
@ -130,11 +130,11 @@
@smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio);
@smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio);
@smallMobileMargin: 0em 0em 0em -(@smallMobileWidth / 2);
@smallTabletMargin: 0em 0em 0em -(@smallTabletWidth / 2);
@smallComputerMargin: 0em 0em 0em -(@smallComputerWidth / 2);
@smallLargeMonitorMargin: 0em 0em 0em -(@smallLargeMonitorWidth / 2);
@smallWidescreenMonitorMargin: 0em 0em 0em -(@smallWidescreenMonitorWidth / 2);
@smallMobileMargin: 0em;
@smallTabletMargin: 0em;
@smallComputerMargin: 0em;
@smallLargeMonitorMargin: 0em;
@smallWidescreenMonitorMargin: 0em;
@largeHeaderSize: 1.6em;
@largeMobileWidth: @mobileWidth;
@ -143,8 +143,8 @@
@largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio);
@largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio);
@largeMobileMargin: 0em 0em 0em -(@largeMobileWidth / 2);
@largeTabletMargin: 0em 0em 0em -(@largeTabletWidth / 2);
@largeComputerMargin: 0em 0em 0em -(@largeComputerWidth / 2);
@largeLargeMonitorMargin: 0em 0em 0em -(@largeLargeMonitorWidth / 2);
@largeWidescreenMonitorMargin: 0em 0em 0em -(@largeWidescreenMonitorWidth / 2);
@largeMobileMargin: 0em;
@largeTabletMargin: 0em;
@largeComputerMargin: 0em;
@largeLargeMonitorMargin: 0em;
@largeWidescreenMonitorMargin: 0em;
Write Preview
Loading…
Cancel
Save