Fix bin and add doc on sass styling

butterfly/bin/butterfly_help

@@ -9,7 +9,7 @@ with image('image/png'):
     with open(
             os.path.join(
                 os.path.abspath(os.path.dirname(__file__)),
-                '../butterfly/static/images/favicon.png'), 'rb') as i:
+                '../static/images/favicon.png'), 'rb') as i:
         print(base64.b64encode(i.read()).decode('ascii'))
 print("""
 Butterfly is a xterm compliant terminal built with python and javascript.
@@ -21,13 +21,32 @@ Butterfly is a xterm compliant terminal built with python and javascript.
   {strong}[Alt] + [z]             : {reset}Escape: don't catch the next pressed key. Useful for using native search for example. ([Alt] + [z] then [Ctrl] + [f]).
   {strong}[Ctrl] + [c] <<hold>>   : {reset}Cut the output when [Ctrl] + [c] is not enough.
 
+
 {title}Butterfly programs:{reset}
   {strong}bcat  : {reset}A wrapper around cat allowing to display images as <img> instead of binary.
   {strong}bopen : {reset}Open a new terminal at specified location.
   {strong}b16M  : {reset}Test the 16M colors support in terminal.
   {strong}bhr   : {reset}Put a html hr. This is a test and needs --allow-html-escapes flag.
   {strong}bcal  : {reset}Display current month using html. This is a test and needs --allow-html-escapes flag.
+
+
+{title}Styling butterfly:{reset}
+  To style butterfly in sass, you need to have the libsass python library installed.
+
+  You will have to:
+    $ cp {main} ~/.butterfly/style.sass
+  or for system wide:
+    # cp {main} /etc/butterfly/style.sass
+  and then edit this file.
+
+  You can also copy the imported sass files in the same dir.
+  Sass files are compiled on the fly so just reload your tab to see the changes.
+
+  It is also possible to use a style.css file and re do all the styling in css exclusively.\
 """.format(
     title=ansi_colors.light_blue,
     strong=ansi_colors.white,
-    reset=ansi_colors.reset))
+    reset=ansi_colors.reset,
+    main=os.path.normpath(os.path.join(
+                os.path.abspath(os.path.dirname(__file__)),
+                '../sass/main.sass'))))

butterfly/routes.py

@@ -133,7 +133,7 @@ class TermWebSocket(Route, tornado.websocket.WebSocketHandler):
             "s" if not tornado.options.options.unsecure else "",
             tornado.options.options.host, tornado.options.options.port)
         env["PATH"] = '%s:%s' % (os.path.abspath(os.path.join(
-            os.path.dirname(__file__), '..', 'bin')), env.get("PATH"))
+            os.path.dirname(__file__), 'bin')), env.get("PATH"))
 
         if not tornado.options.options.unsecure or (
                 self.socket.local and

butterfly/sass/_all_fx.sass

@@ -0,0 +1,6 @@
+body
+  &.copied
+    transform: scale(1.05)
+
+  &.pasted
+    transform: scale(.95)

butterfly/sass/_light_fx.sass

@@ -15,12 +15,7 @@
 /* You should have received a copy of the GNU General Public License */
 /* along with this program.  If not, see <http://www.gnu.org/licenses/>. */
 
-$fg: #fff !default
-$shadow: 6px !default
-$shadow-alpha: .5 !default
-
 body
-  text-shadow: 0 0 $shadow rgba($fg, $shadow-alpha)
   transition: 200ms
   transform-origin: bottom
 
@@ -59,12 +54,6 @@ body
       opacity: .2
       font-weight: 900
 
-  &.copied
-    transform: scale(1.05)
-
-  &.pasted
-    transform: scale(.95)
-
   &.stopped
     -webkit-filter: brightness(50%)
     filter: brightness(50%)

butterfly/sass/_text_fx.sass

@@ -0,0 +1,6 @@
+$fg: #fff !default
+$shadow: 6px !default
+$shadow-alpha: .5 !default
+
+body
+  text-shadow: 0 0 $shadow rgba($fg, $shadow-alpha)

butterfly/sass/main.sass

@@ -15,11 +15,25 @@
 /* You should have received a copy of the GNU General Public License */
 /* along with this program.  If not, see <http://www.gnu.org/licenses/>. */
 
-@import font
+
-@import fx
+
+/* Theses are the various imported style files
+/* You can put this file in /etc/butterfly/style.sass or ~/.butterfly/style.sass
+/* To customize the style of your terminal.
+/* THIS NEEDS the python `libsass` library to be installed.
+/* You can also copy the imported files in those dirs, they will be imported prioritarily.
+
+@import font /* You can change this file to import any webfont
+
+/* You can comment / uncomment the following to enable/disable terminal effects.
+@import light_fx
+@import text_fx /* Comment this one to remove the blurry text
+/* @import all_fx
+
 @import colors
-@import 16_colors
+@import 16_colors /* The color theme is defined in this one
 @import 256_colors
+
 @import layout
 @import cursor
 @import term_styles

butterfly/static/ext.js

@@ -401,39 +401,6 @@
     return sel.modify('extend', 'forward', 'character');
   });
 
-  document.addEventListener('DOMContentLoaded', function() {
-    var req;
-    return;
-    req = null;
-    return butterfly.native_scroll_to = function(scroll) {
-      var diff, e, scroll_step, step;
-      if (scroll == null) {
-        scroll = -1;
-      }
-      e = butterfly.parent;
-      if (req) {
-        cancelAnimationFrame(req);
-      }
-      if (scroll === -1 || (scroll > e.scrollHeight - e.getBoundingClientRect().height)) {
-        scroll = e.scrollHeight - e.getBoundingClientRect().height;
-      }
-      diff = scroll - e.scrollTop;
-      if (diff === 0) {
-        return;
-      }
-      step = diff / 25;
-      scroll_step = function() {
-        if (Math.abs(e.scrollTop - scroll) < Math.abs(step)) {
-          return e.scrollTop = scroll;
-        } else {
-          e.scrollTop += step;
-          return req = requestAnimationFrame(scroll_step);
-        }
-      };
-      return req = requestAnimationFrame(scroll_step);
-    };
-  });
-
   if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
     ctrl = false;
     alt = false;

butterfly/static/main.css

@@ -77,7 +77,6 @@ body {
 /* You should have received a copy of the GNU General Public License */
 /* along with this program.  If not, see <http://www.gnu.org/licenses/>. */
 body {
-  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
   transition: 200ms;
   transform-origin: bottom; }
   body.bell {
@@ -109,10 +108,6 @@ body {
       transform: rotate(-45deg);
       opacity: .2;
       font-weight: 900; }
-  body.copied {
-    transform: scale(1.05); }
-  body.pasted {
-    transform: scale(.95); }
   body.stopped {
     -webkit-filter: brightness(50%);
     filter: brightness(50%); }
@@ -121,6 +116,14 @@ body {
   body.locked::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 0, 0, 0.8); }
 
+body {
+  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5); }
+
+body.copied {
+  transform: scale(1.05); }
+body.pasted {
+  transform: scale(.95); }
+
 /* *-* coding: utf-8 *-* */
 /* This file is part of butterfly */
 /* butterfly Copyright (C) 2014  Florian Mounier */

setup.py

@@ -33,6 +33,7 @@ options = dict(
             'static/main.css',
             'static/*.min.js',
             'templates/index.html',
+            'bin/*',
             'templates/motd'
         ]
     },