Rework style paradigm

butterfly/bin/butterfly_help

@@ -16,9 +16,9 @@ print("""
 Butterfly is a xterm compliant terminal built with python and javascript.
 
 {title}Terminal functionalities:{reset}
-  {strong}[Alt] + [a]             : {reset}Set an alarm which sends a notification when a modification is detected. (Add a regexp with [Shift])
-  {strong}[Ctrl] + [Shift] + [Up] : {reset}Trigger visual selection mode. Hitting [Enter] inserts the selection in the prompt.
+  {strong}[Alt] + [a]             : {reset}Set an alarm which sends a notification when a modification is detected. (Ring on regexp match with [Shift])
   {strong}[Alt] + [s]             : {reset}Open theme selection prompt. Use [Alt] + [Shift] + [s] to refresh current theme.
+  {strong}[Ctrl] + [Shift] + [Up] : {reset}Trigger visual selection mode. Hitting [Enter] inserts the selection in the prompt.
   {strong}[ScrollLock]            : {reset}Lock the scrolling to the current position. Press again to release.
   {strong}[Ctrl] + [c] <<hold>>   : {reset}Cut the output when [Ctrl] + [c] is not enough.
   {strong}[Alt] + [z]             : {reset}Escape: don't catch the next pressed key.

butterfly/sass/_16_colors.sass

@@ -18,35 +18,19 @@
 
 /* Here are the 16 "normal" colors for theming */
 
-/* Black */
-+termcolor(0,  #2e3436)
-/* Red */
-+termcolor(1,  #cc0000)
-/* Green */
-+termcolor(2,  #4e9a06)
-/* Yellow */
-+termcolor(3,  #c4a000)
-/* Blue */
-+termcolor(4,  #3465a4)
-/* Magenta */
-+termcolor(5,  #75507b)
-/* Cyan */
-+termcolor(6,  #06989a)
-/* White */
-+termcolor(7,  #d3d7cf)
-/* Bright Black */
-+termcolor(8,  #555753)
-/* Bright Red */
-+termcolor(9,  #ef2929)
-/* Bright Green */
-+termcolor(10, #8ae234)
-/* Bright Yellow */
-+termcolor(11, #fce94f)
-/* Bright Blue */
-+termcolor(12, #729fcf)
-/* Bright Magenta */
-+termcolor(13, #ad7fa8)
-/* Bright Cyan */
-+termcolor(14, #34e2e2)
-/* Bright White */
-+termcolor(15, #eeeeec)
++termcolor(0,  nth($colors, 1))
++termcolor(1,  nth($colors, 2))
++termcolor(2,  nth($colors, 3))
++termcolor(3,  nth($colors, 4))
++termcolor(4,  nth($colors, 5))
++termcolor(5,  nth($colors, 6))
++termcolor(6,  nth($colors, 7))
++termcolor(7,  nth($colors, 8))
++termcolor(8,  nth($colors, 9))
++termcolor(9,  nth($colors, 10))
++termcolor(10, nth($colors, 11))
++termcolor(11, nth($colors, 12))
++termcolor(12, nth($colors, 13))
++termcolor(13, nth($colors, 14))
++termcolor(14, nth($colors, 15))
++termcolor(15, nth($colors, 16))

butterfly/sass/_256_colors.sass

@@ -15,11 +15,9 @@
 /* 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: #f4ead5 !default
-$bg: #110f13 !default
-
 /* Here are the 240 xterm colors */
 /* See http://upload.wikimedia.org/wikipedia/en/1/15/Xterm_256color_chart.svg */
+
 $st: 00, 95, 135, 175, 215, 255
 
 @for $i from 0 through 215
@@ -32,5 +30,5 @@ $st: 00, 95, 135, 175, 215, 255
   $l: 8 + $i * 10
   +termcolor($i + 232, rgb($l, $l, $l))
 
-+termcolor(256, $bg)
-+termcolor(257, $fg)
++termcolor(256, $default-bg)
++termcolor(257, $default-fg)

butterfly/sass/_colors.sass

@@ -15,14 +15,13 @@
 /* You should have received a copy of the GNU General Public License */
 /* along with this program.  If not, see <http://www.gnu.org/licenses/>. */
 
-$shadow: 0 !default
-$shadow-alpha: 0 !default
-
-
 =termcolor($i, $color)
   .bg-color-#{$i}
     background-color: $color
     &.reverse-video
+      @if $color == transparent
+        color: $reverse-transparent !important
+      @else
         color: $color !important
 
   .fg-color-#{$i}

butterfly/sass/_cursor.sass

@@ -15,9 +15,6 @@
 /* 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-alpha: 0 !default
-
 .focus .cursor
   transition: 300ms
 

butterfly/sass/_font.sass

@@ -27,4 +27,5 @@ $weights: (ExtraLight 100) (Light 300) (Regular 400) (Medium 500) (Semibold 600)
 
 body
   font-family: "SourceCodePro"
+  font-size: $font-size
   line-height: 1.2

butterfly/sass/_layout.sass

@@ -22,21 +22,20 @@ html, body
   background-color: $bg
   color: $fg
 
-
 body
   white-space: nowrap
   overflow-x: hidden
   overflow-y: scroll
 
   &::-webkit-scrollbar
-    background: $bg
-    width: .75em
+    background: $scroll-bg
+    width: $scroll-width
 
   &::-webkit-scrollbar-thumb
-    background: rgba($fg, .1)
+    background: $scroll-fg
 
   &::-webkit-scrollbar-thumb:hover
-    background: rgba($fg, .15)
+    background: $scroll-fg-hover
 
   /* Pop ups */
   .hidden
@@ -52,7 +51,10 @@ body
 
     form
       padding: 1.5em
-      background: rgba(127, 127, 127, .5)
+      background: $popup-bg
+      color: $popup-fg
+      font-size: $popup-fs
+
       h2
         margin: .5em
       select

butterfly/sass/_styles.sass

@@ -0,0 +1,38 @@
+/* *-* coding: utf-8 *-* */
+/* This file is part of butterfly */
+
+/* butterfly Copyright (C) 2015  Florian Mounier */
+/* This program is free software: you can redistribute it and/or modify */
+/* it under the terms of the GNU General Public License as published by */
+/* the Free Software Foundation, either version 3 of the License, or */
+/* (at your option) any later version. */
+
+/* This program is distributed in the hope that it will be useful, */
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of */
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the */
+/* GNU General Public License for more details. */
+
+/* You should have received a copy of the GNU General Public License */
+/* along with this program.  If not, see <http://www.gnu.org/licenses/>. */
+
+/* Theses are the various imported style files
+/* THIS NEEDS the python `libsass` library to be installed.
+/* You can copy the imported files in the theme dir, they will be imported prioritarily.
+
+/* You can change this file to import any webfont:
+@import font
+
+/* You can comment / uncomment the following to enable/disable terminal effects.
+@import light_fx
+/* Comment this one to remove the blurry text:
+@import text_fx
+/* @import all_fx
+
+@import colors
+/* The color theme is defined in this one:
+@import 16_colors
+@import 256_colors
+
+@import layout
+@import cursor
+@import term_styles

butterfly/sass/_variables.sass

@@ -0,0 +1,48 @@
+/* *-* coding: utf-8 *-* */
+/* This file is part of butterfly */
+
+/* butterfly Copyright (C) 2015  Florian Mounier */
+/* This program is free software: you can redistribute it and/or modify */
+/* it under the terms of the GNU General Public License as published by */
+/* the Free Software Foundation, either version 3 of the License, or */
+/* (at your option) any later version. */
+
+/* This program is distributed in the hope that it will be useful, */
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of */
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the */
+/* GNU General Public License for more details. */
+
+/* Variables */
+
+/** Font Size
+$font-size: 1em !default
+
+/** Colors */
+/* Foreground */
+$fg: #f4ead5 !default
+/* Background */
+$bg: #110f13 !default
+
+$default-bg: $bg !default
+$default-fg: $fg !default
+
+$reverse-transparent: $bg !default
+
+/* 16 Colors in this orders :Black, Red, Green, Yellow, Blue, Magenta, Cyan, White, Bright Black, Bright Red, Bright Green, Bright Yellow, Bright Blue, Bright Magenta, Bright Cyan, Bright White */
+$colors: #2e3436, #cc0000, #4e9a06, #c4a000, #3465a4, #75507b, #06989a, #d3d7cf, #555753, #ef2929, #8ae234, #fce94f, #729fcf, #ad7fa8, #34e2e2, #eeeeec !default
+
+/** Text effects */
+$shadow: 0 !default
+$shadow-alpha: 0 !default
+
+/** Scroll */
+$scroll-bg: $bg !default
+$scroll-fg: rgba($fg, .1) !default
+$scroll-fg-hover: rgba($fg, .1) !default
+$scroll-width: .75em !default
+
+/** Popup */
+$popup-bg: rgba(127, 127, 127, .5) !default
+$popup-fg: $fg !default
+$popup-fs: 1em !default
+

butterfly/sass/main.sass

@@ -15,28 +15,12 @@
 /* You should have received a copy of the GNU General Public License */
 /* along with this program.  If not, see <http://www.gnu.org/licenses/>. */
 
-
-
 /* 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.
+/* You can copy the imported files in the theme dir, they will be imported prioritarily.
 
-/* You can change this file to import any webfont:
-@import font
+/* These a the default variables */
+@import variables
 
-/* You can comment / uncomment the following to enable/disable terminal effects.
-@import light_fx
-/* Comment this one to remove the blurry text:
-@import text_fx
-/* @import all_fx
-
-@import colors
-/* The color theme is defined in this one:
-@import 16_colors
-@import 256_colors
-
-@import layout
-@import cursor
-@import term_styles
+/* These are all imported files */
+@import styles

butterfly/static/ext.js

@@ -567,7 +567,7 @@
     if (e.shiftKey) {
       style = document.getElementById('style').getAttribute('href');
       style = style.split('?')[0];
-      document.getElementById('style').setAttribute('href', style + '?' + (new Date().getTime()));
+      _set_theme_href(style + '?' + (new Date().getTime()));
       return cancel(e);
     }
     oReq = new XMLHttpRequest();

butterfly/static/main.js

@@ -148,6 +148,7 @@
       this.out = out1;
       this.ctl = ctl1 != null ? ctl1 : function() {};
       this.document = this.parent.ownerDocument;
+      this.html = this.document.getElementsByTagName('html')[0];
       this.body = this.document.getElementsByTagName('body')[0];
       this.forceWidth = this.body.getAttribute('data-force-unicode-width') === 'yes';
       this.body.className = 'terminal focus';
@@ -1640,7 +1641,7 @@
     };
 
     Terminal.prototype.resize = function(x, y) {
-      var el, i, j, line, oldCols, oldRows, px;
+      var el, h, i, j, line, oldCols, oldRows, px, w;
       if (x == null) {
         x = null;
       }
@@ -1650,10 +1651,13 @@
       oldCols = this.cols;
       oldRows = this.rows;
       this.computeCharSize();
-      this.cols = x || Math.floor(this.body.clientWidth / this.charSize.width);
-      this.rows = y || Math.floor(window.innerHeight / this.charSize.height);
-      px = window.innerHeight % this.charSize.height;
+      w = this.body.clientWidth;
+      h = this.html.clientHeight - (this.html.offsetHeight - this.html.scrollHeight);
+      this.cols = x || Math.floor(w / this.charSize.width);
+      this.rows = y || Math.floor(h / this.charSize.height);
+      px = h % this.charSize.height;
       this.body.style['padding-bottom'] = px + "px";
+      this.nativeScrollTo();
       if ((!x && !y) && oldCols === this.cols && oldRows === this.rows) {
         return;
       }

coffees/ext/theme.coffee

@@ -20,8 +20,7 @@ document.addEventListener 'keydown', (e) ->
   if e.shiftKey
     style = document.getElementById('style').getAttribute('href')
     style = style.split('?')[0]
-    document.getElementById('style').setAttribute(
-      'href', style + '?' + (new Date().getTime()))
+    _set_theme_href style + '?' + (new Date().getTime())
     return cancel(e)
 
 

coffees/term.coffee

@@ -49,6 +49,7 @@ class Terminal
   constructor: (@parent, @out, @ctl=->) ->
     # Global elements
     @document = @parent.ownerDocument
+    @html = @document.getElementsByTagName('html')[0]
     @body = @document.getElementsByTagName('body')[0]
     @forceWidth = @body.getAttribute(
       'data-force-unicode-width') is 'yes'
@@ -1538,11 +1539,14 @@ class Terminal
     oldCols = @cols
     oldRows = @rows
     @computeCharSize()
-    @cols = x or Math.floor(@body.clientWidth / @charSize.width)
-    @rows = y or Math.floor(window.innerHeight / @charSize.height)
-    px = window.innerHeight % @charSize.height
+    w = @body.clientWidth
+    h = @html.clientHeight - (@html.offsetHeight - @html.scrollHeight)
+    @cols = x or Math.floor(w / @charSize.width)
+    @rows = y or Math.floor(h / @charSize.height)
+    px = h % @charSize.height
     @body.style['padding-bottom'] = "#{px}px"
 
+    @nativeScrollTo()
     if (not x and not y) and oldCols == @cols and oldRows == @rows
       return