diff --git a/UI/Common/UIxPageFrame.m b/UI/Common/UIxPageFrame.m index 1f35c9ff1..b1526b935 100644 --- a/UI/Common/UIxPageFrame.m +++ b/UI/Common/UIxPageFrame.m @@ -589,6 +589,15 @@ /* browser/os identification */ +- (BOOL) disableInk +{ + WEClientCapabilities *cc; + + cc = [[context request] clientCapabilities]; + + return [[cc userAgentType] isEqualToString: @"IE"]; +} + - (BOOL) isCompatibleBrowser { WEClientCapabilities *cc; diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox index 66b6c5a94..3dc2ac165 100644 --- a/UI/Templates/UIxPageFrame.wox +++ b/UI/Templates/UIxPageFrame.wox @@ -6,7 +6,8 @@ xmlns:var="http://www.skyrix.com/od/binding" xmlns:const="http://www.skyrix.com/od/constant" xmlns:rsrc="OGo:url" - xmlns:label="OGo:label"> + xmlns:label="OGo:label" + xmlns:bool="OGo:bool"> @@ -31,9 +32,12 @@ + + + - + diff --git a/UI/WebServerResources/GNUmakefile b/UI/WebServerResources/GNUmakefile index e9d28dba2..f8631be87 100644 --- a/UI/WebServerResources/GNUmakefile +++ b/UI/WebServerResources/GNUmakefile @@ -5,7 +5,7 @@ include ../common.make WEBSERVER_RESOURCE_DIRS = css fonts img js JS_FILES = js/Administration.* js/Common.* js/Contacts.* js/Mailer.* js/Main.* js/Preferences.* js/Scheduler.* css/styles.* JS_LIB_FILES = js/vendor/angular-animate.* js/vendor/angular-aria.* js/vendor/angular-cookies.* js/vendor/angular-messages.* js/vendor/angular-file-upload.* js/vendor/FileSaver.* js/vendor/ng-sortable.* js/vendor/angular-material.* js/vendor/angular-sanitize.* js/vendor/angular-ui-router.* js/vendor/angular.* js/vendor/lodash.* -CSS_FILES = css/styles.css css/styles.css.map +CSS_FILES = css/styles.css css/styles.css.map css/no-animation.css css/no-animation.css.map .DEFAULT_GOAL := all diff --git a/UI/WebServerResources/Gruntfile.js b/UI/WebServerResources/Gruntfile.js index 2c9a051eb..17f1794a5 100644 --- a/UI/WebServerResources/Gruntfile.js +++ b/UI/WebServerResources/Gruntfile.js @@ -37,7 +37,8 @@ module.exports = function(grunt) { }, target: { files: { - 'css/styles.css': 'scss/styles.scss' + 'css/styles.css': 'scss/styles.scss', + 'css/no-animation.css': 'scss/core/no-animation.scss' }, }, }, @@ -47,17 +48,18 @@ module.exports = function(grunt) { map: true, processors: [ // See angular-material/gulp/util.js - require('autoprefixer')({browsers: [ - 'last 2 versions', - 'not ie <= 10', - 'not ie_mob <= 10', - 'last 4 Android versions', - 'Safari >= 8' - ]}) + require('autoprefixer')({ + browsers: [ + 'last 2 versions', + 'not ie <= 10', + 'not ie_mob <= 10', + 'last 4 Android versions', + 'Safari >= 8' + ] + }) ] - // We may consider using css grace (https://github.com/cssdream/cssgrace) for larger support }, - src: 'css/styles.css' + src: ['css/styles.css', 'css/no-animation.css'] } }, cssmin: { @@ -66,7 +68,8 @@ module.exports = function(grunt) { }, target: { files: { - 'css/styles.css': 'css/styles.css' + 'css/styles.css': 'css/styles.css', + 'css/no-animation.css': 'css/no-animation.css' } } }, diff --git a/UI/WebServerResources/scss/core/no-animation.scss b/UI/WebServerResources/scss/core/no-animation.scss new file mode 100644 index 000000000..dfc50c8df --- /dev/null +++ b/UI/WebServerResources/scss/core/no-animation.scss @@ -0,0 +1,300 @@ +/// no-animation.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*- + +/** + * Disable transitions and drop shadows for improved performance in some browsers. + * It is generated as an optional and distinct CSS file. + * + * See https://github.com/angular/material/issues/8329 + */ + +//-------------------------------- +// DISABLE ANIMATIONS +//-------------------------------- + +/** Disable tab-contents **/ +md-tabs.md-dynamic-height { + transition: none !important; +} + +md-tab-content.md-right:not(.md-active) { + animation: none; +} + +md-tab-content.md-left:not(.md-active) { + animation: none; +} + +md-tab-content.md-left:not(.md-active) *, +md-tab-content.md-right:not(.md-active) * { + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; +} + +md-tab-content.md-right, +md-tab-content.md-left { + transition: none !important; +} + +.md-tab { + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; +} + +md-tab-content { + transition: none !important; +} + +md-ink-bar.md-right, +md-ink-bar.md-left { + transition: none !important; +} + +/** Disable backdrop transition */ +md-backdrop { + transition: none !important; +} + +/** Disable slider animation for thumbs **/ +md-slider .md-focus-thumb { + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; + animation: none !important; +} + +md-slider ._md-thumb{ + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; +} + +md-option { + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; +} + +/** Disable dialogs **/ +md-dialog { + &.md-transition-out, + &.md-transition-in, + md-toolbar { + &, + .md-input, + md-input-container.md-input-has-value label, + md-input-container.md-input-has-value label:not(.md-no-float), + md-icon { + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; + } + } +} + +/** Disable cards **/ +md-card.sg-collapsed, +md-card.sg-expanded { + transition: none !important; +} + +/** Disable ripple **/ +.md-ripple, +.md-ripple-container, +sg-ripple { + transition: none !important; +} + +.md-ripple.md-ripple-remove { + animation: none !important; +} + +/** Disable progress bar **/ +.sg-progress-circular-floating { + transition: none !important; +} + +/** Disable checkbox **/ +md-checkbox ._md-icon { + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; +} + +/** Disable radio **/ +md-radio-button { + .md-on, + .md-off { + transition: none !important; + } +} + +.md-container::before { + transition: none !important; +} + +/** Disable buttons **/ +.md-button, +.md-button.md-fab { + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; +} + +/** Disable grid list **/ +md-grid-tile { + transition: none !important; +} + +/** Disable icons **/ +md-icon, +.md-icon { + transition: none !important; +} + +/** Disable fading labels **/ +md-input-container label { + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; +} + +/** Disable slider **/ +md-slider { + .md-thumb, + .md-thumb-container, //, ._md-focus-ring, ._md-track-fill, ._md-thumb { + .md-sign, + .md-sign::after, + .md-focus-ring, + .md-track-fill { + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; + } +} + +md-input-container .md-char-counter, md-input-container .md-input-message-animation { + transition: none !important; +} + +/** Disable tooltips **/ +.md-tooltip { + transition: none !important; +} + +/** Disable fab translation **/ +md-fab-speed-dial.sg-fab-bottom-center { + transition: none !important; +} + +md-fab-speed-dial.md-scale .md-fab-action-item { + transition: none !important; +} + +/** Disable dropdown animations */ +md-select-menu, +md-select-menu md-content { + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; +} + +.md-select-menu-container.md-leave { + transition: none !important; + transition-duration: 0ms !important; + transition-delay: 0ms !important; +} + +.md-open-menu-container.md-active, +.md-open-menu-container.md-active > md-menu-content > * { + transition: none !important; +} + +/** Disable datepicker and timepicker **/ +.md-datepicker-calendar-pane, +.sg-timepicker-time-pane { + transition: none !important; + transition-delay: 0ms !important; +} + +.md-datepicker-calendar, +.md-datepicker-calendar-pane .md-calendar, +.sg-timepicker-time, +.sg-timepicker-time-pane .md-calendar { + transition: none !important; +} + +/** Disable views translations **/ +.view-list, +.view-list--close, +.view-detail { + transition: none !important; +} + +.md-sidenav-left, +.md-sidenav-left .md-clickable { + transition: none !important; +} + +/** Disable custom rules **/ +.attendees { + transition: none !important; + transition-delay: 0ms !important; +} +.attendees-chips md-chips-wrap { + transition: none !important; +} + +//-------------------------------- +// DISABLE FLIPPING EFFECT +//-------------------------------- + +.sg-reversible { + transition: none !important; + position: relative; +} + +.sg-reversible.sg-flip, +.sg-reversible .sg-face, +.sg-reversible .sg-back { + position: relative; + transform: none !important; +} + +.sg-reversible .sg-back, +.sg-reversible.sg-flip .sg-face { + display: none; +} + +.sg-reversible.sg-flip .sg-back { + display: block; +} + +//-------------------------------- +// DISABLE BOX SHADOWS +//-------------------------------- + +md-card { + border: 1px solid rgba(0, 0, 0, .14) !important; + box-shadow: none !important; +} + +md-dialog { + border: 1px solid rgba(0, 0, 0, .14) !important; + box-shadow: none !important; +} + +md-select-menu { + border: 1px solid rgba(0, 0, 0, .14) !important; + box-shadow: none !important; +} + +.md-button.md-raised { + border: 1px solid rgba(0, 0, 0, .14) !important; + box-shadow: none !important; +} + +md-toast .md-toast-content { + box-shadow: none !important; +}