UI tweaks

philipp94831 · Oct 13, 2014 · 581ef14 · 581ef14
1 parent 0571038
commit 581ef14
Show file tree

Hide file tree

Showing 10 changed files with 216 additions and 60 deletions.
diff --git a/Chrome/fixed_navbar.css b/Chrome/fixed_navbar.css
@@ -17,4 +17,27 @@
 
 #leftColWrapper {
   position: fixed;
+}
+
+.scrollShade {
+  position: fixed;
+  z-index: 2;
+  background-color: #e9eaed;
+  box-sizing: border-box;
+  height: 12px;
+}
+
+#mainScrollShade {
+  border-bottom: 1px solid #e9eaed;
+  width: 164px;
+  margin-left: 20px;
+}
+
+#mainScrollShade.hovered,
+#mainScrollShade.scrolled {
+  border-bottom-color: rgba(0, 0, 0, .1);
+}
+
+#scrollShade {
+  width: 20px;
 }
diff --git a/Chrome/fixed_navbar.js b/Chrome/fixed_navbar.js
@@ -5,37 +5,90 @@ function handleResize() {
   var scrollbarHider = document.getElementById('scrollbarHider');
   if (scrollbarHider !== null) {
     scrollbarHider.style.display = 'none';
-    setTimeout(function() {
-      scrollbarHider.style.display = 'block'
-    }, 20);
+    scrollbarHider.offsetHeight;
+    scrollbarHider.style.display = 'block';
+  }
+  if (document.getElementById('navigationWrapper') !== null) {
+    handleScrollState();
   }
 }
 
 function fixNavbar() {
+  if (document.getElementById('leftColWrapper') === null && document.getElementById('pagelet_navigation') !== null) {
+
+    setUpDOM();
+
+    setUpEventListeners();
+
+    initializeScrollbar($('#navigationWrapper'));
+
+  }
+}
+
+function setUpDOM() {
+
   var pagelet_navigation = document.getElementById('pagelet_navigation');
-  if (document.getElementById('leftColWrapper') === null && pagelet_navigation !== null) {
-    var mainContainer = document.getElementById('mainContainer');
-    var leftCol = document.getElementById('leftCol');
-    var contentCol = document.getElementById('contentCol');
-    var leftColWrapper = document.createElement('div');
-    var scrollbarHider = document.createElement('div');
-    var navigationWrapper = document.createElement('div');
-    leftColWrapper.id = 'leftColWrapper';
-    scrollbarHider.id = 'scrollbarHider';
-    navigationWrapper.id = 'navigationWrapper';
-    mainContainer
-      .appendChild(leftColWrapper)
-      .appendChild(leftCol)
-      .appendChild(scrollbarHider)
-      .appendChild(navigationWrapper)
-      .appendChild(pagelet_navigation);
-    mainContainer.appendChild(contentCol);
-    $.when($('#navigationWrapper').slimScroll({
-      height: '100%',
-      distance: '8px'
-    })).done(function(element) {
-      document.getElementsByClassName('slimScrollBar')[0].style.display = 'none';
-      handleOptions();
-    });
+  var mainContainer = document.getElementById('mainContainer');
+  var leftCol = document.getElementById('leftCol');
+  var contentCol = document.getElementById('contentCol');
+
+  var leftColWrapper = document.createElement('div');
+  var scrollbarHider = document.createElement('div');
+  var navigationWrapper = document.createElement('div');
+  var mainScrollShade = document.createElement('div');
+  var scrollShade = document.createElement('div');
+
+  leftColWrapper.id = 'leftColWrapper';
+  scrollbarHider.id = 'scrollbarHider';
+  navigationWrapper.id = 'navigationWrapper';
+  mainScrollShade.id = 'mainScrollShade';
+  mainScrollShade.className = 'scrollShade';
+  scrollShade.id = 'scrollShade';
+  scrollShade.className = 'scrollShade';
+
+  mainContainer
+    .appendChild(leftColWrapper)
+    .appendChild(leftCol)
+    .appendChild(scrollbarHider)
+    .appendChild(mainScrollShade);
+  scrollbarHider.appendChild(scrollShade);
+  scrollbarHider
+    .appendChild(navigationWrapper)
+    .appendChild(pagelet_navigation);
+  mainContainer.appendChild(contentCol);
+
+}
+
+function handleScrollState() {
+  if (document.getElementById('navigationWrapper').scrollTop !== 0) {
+    $('#mainScrollShade').addClass('scrolled');
+  } else {
+    $('#mainScrollShade').removeClass('scrolled');
   }
+}
+
+function setUpEventListeners() {
+
+  $('#navigationWrapper').hover(function() {
+    $('#mainScrollShade').addClass('hovered');
+  }, function() {
+    $('#mainScrollShade').removeClass('hovered');
+  });
+
+  $('#navigationWrapper').scroll(function() {
+    handleScrollState();
+  });
+
+}
+
+function initializeScrollbar(element) {
+
+  $.when(element.slimScroll({
+    height: '100%',
+    distance: '8px'
+  })).done(function() {
+    document.getElementsByClassName('slimScrollBar')[0].style.display = 'none';
+    handleOptions();
+  });
+
 }
diff --git a/Chrome/manifest.json b/Chrome/manifest.json
@@ -1,7 +1,7 @@
 {
   "name":"FB fixed navbar",
   "description":"Freezes left navigation pane on Facebook",
-  "version":"1.1.1",
+  "version":"1.1.2",
   "manifest_version":2,
   "author": "Philipp Schirmer",
   "icons": {
@@ -16,7 +16,7 @@
     {
       "matches": ["*://www.facebook.com/*"],
       "css": ["fixed_navbar.css"],
-      "js": ["jquery-1.11.1.min.js", "jquery.slimscroll.min.js", "fixed_navbar_options.js", "fixed_navbar.js"],
+      "js": ["jquery-1.11.1.min.js", "jquery.slimscroll.min.js", "platform.js", "fixed_navbar.js"],
       "run_at": "document_end"
     }
   ]

diff --git a/Chrome/fixed_navbar_options.js → Chrome/platform.js b/Chrome/fixed_navbar_options.js → Chrome/platform.js
diff --git a/Firefox/data/fixed_navbar.css b/Firefox/data/fixed_navbar.css
@@ -17,4 +17,27 @@
 
 #leftColWrapper {
   position: fixed;
+}
+
+.scrollShade {
+  position: fixed;
+  z-index: 2;
+  background-color: #e9eaed;
+  box-sizing: border-box;
+  height: 12px;
+}
+
+#mainScrollShade {
+  border-bottom: 1px solid #e9eaed;
+  width: 164px;
+  margin-left: 20px;
+}
+
+#mainScrollShade.hovered,
+#mainScrollShade.scrolled {
+  border-bottom-color: rgba(0, 0, 0, .1);
+}
+
+#scrollShade {
+  width: 20px;
 }
diff --git a/Firefox/data/fixed_navbar.js b/Firefox/data/fixed_navbar.js
@@ -5,37 +5,90 @@ function handleResize() {
   var scrollbarHider = document.getElementById('scrollbarHider');
   if (scrollbarHider !== null) {
     scrollbarHider.style.display = 'none';
-    setTimeout(function() {
-      scrollbarHider.style.display = 'block'
-    }, 20);
+    scrollbarHider.offsetHeight;
+    scrollbarHider.style.display = 'block';
+  }
+  if (document.getElementById('navigationWrapper') !== null) {
+    handleScrollState();
   }
 }
 
 function fixNavbar() {
+  if (document.getElementById('leftColWrapper') === null && document.getElementById('pagelet_navigation') !== null) {
+
+    setUpDOM();
+
+    setUpEventListeners();
+
+    initializeScrollbar($('#navigationWrapper'));
+
+  }
+}
+
+function setUpDOM() {
+
   var pagelet_navigation = document.getElementById('pagelet_navigation');
-  if (document.getElementById('leftColWrapper') === null && pagelet_navigation !== null) {
-    var mainContainer = document.getElementById('mainContainer');
-    var leftCol = document.getElementById('leftCol');
-    var contentCol = document.getElementById('contentCol');
-    var leftColWrapper = document.createElement('div');
-    var scrollbarHider = document.createElement('div');
-    var navigationWrapper = document.createElement('div');
-    leftColWrapper.id = 'leftColWrapper';
-    scrollbarHider.id = 'scrollbarHider';
-    navigationWrapper.id = 'navigationWrapper';
-    mainContainer
-      .appendChild(leftColWrapper)
-      .appendChild(leftCol)
-      .appendChild(scrollbarHider)
-      .appendChild(navigationWrapper)
-      .appendChild(pagelet_navigation);
-    mainContainer.appendChild(contentCol);
-    $.when($('#navigationWrapper').slimScroll({
-      height: '100%',
-      distance: '8px'
-    })).done(function(element) {
-      document.getElementsByClassName('slimScrollBar')[0].style.display = 'none';
-      handleOptions();
-    });
+  var mainContainer = document.getElementById('mainContainer');
+  var leftCol = document.getElementById('leftCol');
+  var contentCol = document.getElementById('contentCol');
+
+  var leftColWrapper = document.createElement('div');
+  var scrollbarHider = document.createElement('div');
+  var navigationWrapper = document.createElement('div');
+  var mainScrollShade = document.createElement('div');
+  var scrollShade = document.createElement('div');
+
+  leftColWrapper.id = 'leftColWrapper';
+  scrollbarHider.id = 'scrollbarHider';
+  navigationWrapper.id = 'navigationWrapper';
+  mainScrollShade.id = 'mainScrollShade';
+  mainScrollShade.className = 'scrollShade';
+  scrollShade.id = 'scrollShade';
+  scrollShade.className = 'scrollShade';
+
+  mainContainer
+    .appendChild(leftColWrapper)
+    .appendChild(leftCol)
+    .appendChild(scrollbarHider)
+    .appendChild(mainScrollShade);
+  scrollbarHider.appendChild(scrollShade);
+  scrollbarHider
+    .appendChild(navigationWrapper)
+    .appendChild(pagelet_navigation);
+  mainContainer.appendChild(contentCol);
+
+}
+
+function handleScrollState() {
+  if (document.getElementById('navigationWrapper').scrollTop !== 0) {
+    $('#mainScrollShade').addClass('scrolled');
+  } else {
+    $('#mainScrollShade').removeClass('scrolled');
   }
+}
+
+function setUpEventListeners() {
+
+  $('#navigationWrapper').hover(function() {
+    $('#mainScrollShade').addClass('hovered');
+  }, function() {
+    $('#mainScrollShade').removeClass('hovered');
+  });
+
+  $('#navigationWrapper').scroll(function() {
+    handleScrollState();
+  });
+
+}
+
+function initializeScrollbar(element) {
+
+  $.when(element.slimScroll({
+    height: '100%',
+    distance: '8px'
+  })).done(function() {
+    document.getElementsByClassName('slimScrollBar')[0].style.display = 'none';
+    handleOptions();
+  });
+
 }
diff --git a/Firefox/data/fixed_navbar_options.js → Firefox/data/platform.js b/Firefox/data/fixed_navbar_options.js → Firefox/data/platform.js
diff --git a/Firefox/lib/main.js b/Firefox/lib/main.js
@@ -4,7 +4,7 @@ var prefs = require("sdk/simple-prefs").prefs;
 
 pageMod.PageMod({
   include: "*.facebook.com",
-  contentScriptFile: [data.url("jquery-1.11.1.min.js"), data.url("jquery.slimscroll.min.js"), data.url("fixed_navbar_options.js"), data.url("fixed_navbar.js")],
+  contentScriptFile: [data.url("jquery-1.11.1.min.js"), data.url("jquery.slimscroll.min.js"), data.url("platform.js"), data.url("fixed_navbar.js")],
   contentStyleFile: data.url("fixed_navbar.css"),
   contentScriptWhen: "end",
   onAttach: function(worker) {

diff --git a/Firefox/package.json b/Firefox/package.json
@@ -5,7 +5,7 @@
   "description": "Freezes left navigation pane on Facebook",
   "author": "Philipp Schirmer",
   "license": "MPL 2.0",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "preferences": [{
     "name": "useScrollbar",
     "title": "Use scrollbar",

diff --git a/README.md b/README.md
@@ -7,13 +7,13 @@ Chrome
 ------
 
 Download at [Chrome Web Store](https://chrome.google.com/webstore/detail/hijonlkmghfbdpcmbimegkoogkfpckkl)  
-Download [.crx](https://github.com/philipp94831/FB-fixed-navbar/releases/download/v1.1.1/FB-fixed-navbar.crx)
+Download [.crx](https://github.com/philipp94831/FB-fixed-navbar/releases/download/v1.1.2/FB-fixed-navbar.crx)
 
 Firefox
 -------
 
 Download at [Add-ons for Firefox](https://addons.mozilla.org/addon/fb-fixed-navbar/)  
-Download [.xpi](https://github.com/philipp94831/FB-fixed-navbar/releases/download/v1.1.1/FB-fixed-navbar.xpi)
+Download [.xpi](https://github.com/philipp94831/FB-fixed-navbar/releases/download/v1.1.2/FB-fixed-navbar.xpi)
 
 Using
 -----
@@ -28,6 +28,10 @@ Found a Bug? [File it!](https://github.com/philipp94831/FB-fixed-navbar/issues)
 
 [Changelog:](https://github.com/philipp94831/FB-fixed-navbar/releases)
 
+[1.1.2:](https://github.com/philipp94831/FB-fixed-navbar/releases/tag/v1.1.2)
+
+- UI tweaks
+
 [1.1.1:](https://github.com/philipp94831/FB-fixed-navbar/releases/tag/v1.1.1)
 
 - Added option to disable/enable scrollbar