Themes: Added 'Frosty Mint' with glass-like effect #82

src/javascript/session.js

@@ -356,6 +356,7 @@
 
             OSjs.Session.triggerHook('onSessionLoaded');
 
+            wm.onSessionLoaded();
             doAutostart();
           });
         });

src/javascript/window.js

@@ -169,6 +169,8 @@
       this._$disabled     = null;                 // DOMElement: Window Disabled Overlay
       this._$iframefix    = null;                 // DOMElement: Window IFrame Fix Overlay
       this._$resize       = null;                 // DOMElement: Window Resizer
+      this._$frost        = null;
+      this._$frostc       = null;
 
       this._rendered      = false;                // If Window has been initially rendered
       this._appRef        = appRef || null;       // Reference to Application Window was created from
@@ -578,6 +580,71 @@
     this._updateIframeFix();
   };
 
+  Window.prototype._destroyFrost = function() {
+    if ( this._$frost && this._$frost.parentNode ) {
+      this._$frost.parentNode.removeChild(this._$frost);
+    }
+    this._$frost = null;
+    this._$frostc = null;
+  };
+
+  Window.prototype._generateFrost = function(cb) {
+    cb = cb || function() {};
+
+    if ( !window.html2canvas ) {
+      cb();
+      return;
+    }
+
+    var wm = OSjs.Core.getWindowManager();
+    var theme = wm ? wm.getStyleTheme(true) : null;
+    var enabled = theme && theme.style && (theme.style.frost === true);
+    this._$element.removeAttribute('data-html2canvas-ignore');
+
+    if ( !enabled && this._$frost ) {
+      this._destroyFrost();
+    }
+
+    if ( this._state.minimized || !enabled ) {
+      cb();
+      return;
+    }
+
+
+    if ( !this._$frost ) {
+      this._$frost = document.createElement('canvas');
+      this._$frost.className = 'WindowFrost';
+    }
+
+    if ( !this._$frost.parentNode ) {
+      this._$top.appendChild(this._$frost);
+    }
+
+    var self = this;
+    this._$element.setAttribute('data-html2canvas-ignore', 'true');
+    window.html2canvas(document.body).then(function(c) {
+      self._$element.removeAttribute('data-html2canvas-ignore');
+      self._$frostc = c;
+      self._updateFrost();
+      cb();
+    });
+  };
+
+  Window.prototype._updateFrost = function() {
+    if ( !this._$frost || !this._$frostc ) { return; }
+
+    var rect = {
+      x: this._position.x,
+      y: this._position.y,
+      h: 32,
+      w: this._dimension.w
+    };
+
+    this._$frost.width = rect.w;
+    this._$frost.height = rect.h;
+    this._$frost.getContext('2d').drawImage(this._$frostc, rect.x, rect.y, rect.w, rect.h, 0, 0, rect.w, rect.h);
+  };
+
   /**
    * Destroy the Window
    *
@@ -614,6 +681,8 @@
 
     this._fireHook('destroy');
 
+    this._destroyFrost();
+
     // Children etc
     if ( this._parent ) {
       this._parent._removeChild(this);
@@ -1169,9 +1238,11 @@
       var self = this;
       setTimeout(function() {
         self._fireHook('maximize');
+        self._generateFrost();
       }, getAnimDuration());
     } else {
       this._fireHook('maximize');
+      this._generateFrost();
     }
 
     return true;
@@ -1216,12 +1287,15 @@
       var self = this;
       setTimeout(function() {
         self._fireHook('restore');
+        self._generateFrost();
       }, getAnimDuration());
     } else {
       this._fireHook('restore');
+      this._generateFrost();
     }
 
     this._focus();
+
   };
 
   /**
@@ -1234,7 +1308,9 @@
    * @method  Window::_focus()
    */
   Window.prototype._focus = function(force) {
+    var wasFocused = this._state.focused;
     if ( !this._$element ) { return false; }
+    var wasFocused = this._state.focused;
 
     //if ( !force && this._state.focused ) { return false; }
     //console.debug(this._name, '>' , 'OSjs::Core::Window::_focus()');
@@ -1265,6 +1341,10 @@
       this._$iframefix.style.display = 'none';
     }
 
+    if ( !wasFocused && wm._sessionLoaded ) {
+      this._generateFrost();
+    }
+
     return true;
   };
 
@@ -1380,9 +1460,11 @@
     if ( anim ) {
       setTimeout(function() {
         self._fireHook('resized');
+        self._generateFrost();
       }, getAnimDuration());
     } else {
       this._fireHook('resized');
+      this._generateFrost();
     }
   };
 
@@ -1416,6 +1498,8 @@
 
     this._onResize();
 
+    this._updateFrost();
+
     return true;
   };
 
@@ -1466,6 +1550,9 @@
     this._$element.style.left = x + 'px';
     this._position.x          = x;
     this._position.y          = y;
+
+    this._updateFrost();
+
     return true;
   };
 

src/javascript/windowmanager.js

@@ -343,6 +343,7 @@
     this._lastWin        = null;
     this._mouselock      = true;
     this._stylesheet     = null;
+    this._sessionLoaded  = false;
 
     // Important for usage as "Application"
     this.__name    = (name || 'WindowManager');
@@ -451,6 +452,35 @@
     attachWindowEvents(w, this);
   };
 
+  /**
+   * Applies the "frost" effect to all windows (if available)
+   *
+   * @return void
+   * @method WindowManager::_frostWindows()
+   */
+  WindowManager.prototype._frostWindows = function() {
+    var idx = 0;
+    var total = this._windows.length;
+    var self = this;
+
+    function _next() {
+      if ( idx >= total-1 ) {
+        return;
+      }
+      var win = self._windows[idx];
+      idx++;
+
+      if ( win ) {
+        win._generateFrost(function() {
+          _next();
+        });
+      } else {
+        _next();
+      }
+    }
+    _next();
+  };
+
   /**
    * Add a Window
    *
@@ -475,6 +505,11 @@
 
     w._inited();
 
+    if ( this._currentWin && (this._currentWin._wid !== w._wid) && this._sessionLoaded ) {
+      this._currentWin._generateFrost();
+    }
+    this._windows.push(w);
+
     return w;
   };
 
@@ -488,22 +523,30 @@
    * @method  WindowManager::removeWindow()
    */
   WindowManager.prototype.removeWindow = function(w) {
+    var self = this;
     if ( !(w instanceof Window) ) {
       console.warn('OSjs::Core::WindowManager::removeWindow()', 'Got', w);
       throw new Error('removeWindow() expects a "Window" class');
     }
-    console.log('OSjs::Core::WindowManager::removeWindow()');
+    console.log('OSjs::Core::WindowManager::removeWindow()', w._wid);
 
     var result = false;
-    var self = this;
     this._windows.forEach(function(win, i) {
       if ( win && win._wid === w._wid ) {
         self._windows[i] = null;
         result = true;
-        return false;
       }
-      return true;
+      return result ? false : true;
     });
+
+    if ( result ) {
+      setTimeout(function() {
+        if ( self._currentWin ) {
+          self._currentWin._generateFrost();
+        }
+      }, this.getAnimDuration()+100);
+    }
+
     return result;
   };
 
@@ -598,6 +641,16 @@
     // Implement in your WM
   };
 
+  WindowManager.prototype.onSessionLoaded = function() {
+    if ( this._sessionLoaded ) { return; }
+
+    var self = this;
+    setTimeout(function() {
+      self._frostWindows();
+      self._sessionLoaded = true;
+    }, 500);
+  };
+
   WindowManager.prototype.resize = function(ev, rect) {
     // Implement in your WM
   };

src/packages/default/CoreWM/main.js

@@ -826,6 +826,8 @@
 
     this.createStylesheet(styles);
 
+    this._frostWindows();
+
     return true;
   };
 

src/packages/default/FileManager/main.css

@@ -4,9 +4,9 @@
 }
 .Window_ApplicationFileManagerWindow .FileManagerPanedView {
   position : absolute;
-  top : 35px;
+  top : 40px;
   left : 5px;
-  bottom : 32px;
+  bottom : 36px;
   right : 5px;
 }
 .Window_ApplicationFileManagerWindow .FileManagerPanedView .Sidebar .Separator {

src/stylesheets/theme.less

@@ -315,7 +315,7 @@ body, input, button, textarea, label, select {
  * GUIMenuBar
  */
 .GUIMenuBar {
-  border-bottom : 1px solid @theme_base_border_color;
+  border-bottom : 1px solid @theme_secondary_border_color;
   padding : 2px;
 }
 .GUIMenuBar > ul > li {
@@ -335,18 +335,18 @@ body, input, button, textarea, label, select {
  */
 .GUIStatusBar {
   background : @theme_base_bg_color;
-  border-top : 1px solid @theme_base_border_color;
+  border-top : 1px solid @theme_secondary_border_color;
 }
 
 /**
  * GUITabs
  */
 .GUITabs .TabContents {
-  border : 1px solid @theme_base_border_color;
+  border : 1px solid @theme_secondary_border_color;
 }
 .GUITabs .Tabs .Tab.Active {
   background : @theme_base_bg_color;
-  border : 1px solid @theme_base_border_color;
+  border : 1px solid @theme_secondary_border_color;
   border-bottom : 1px solid @theme_base_bg_color;
 }
 .GUITabs .Tabs .Tab {

src/stylesheets/window.css

@@ -104,6 +104,15 @@
   height : 20px;
   margin : 1px;
 }
+.Window > .WindowTop > .WindowFrost {
+  position : absolute;
+  top : 0px;
+  left : 0px;
+  width : 100%;
+  height : 100%;
+  -webkit-filter : blur(4px);
+  opacity : .5;
+}
 .WindowButtons > .WindowButton {
   padding : 0;
   margin : 2px;

src/themes/styles/frosty/base.less

@@ -0,0 +1 @@
+../../../stylesheets/theme.less

src/themes/styles/frosty/metadata.json

@@ -0,0 +1,11 @@
+{
+  "name": "frosty",
+  "title": "Frosty Mint (EXPERIMENTAL. Requires html2canvas)",
+  "style": {
+    "frost": true,
+    "window": {
+      "margin": 35,
+      "border": 3
+    }
+  }
+}