Rework style paradigm

This commit is contained in:
Florian Mounier
2015-10-08 11:37:48 +02:00
parent c937a8753d
commit 38a4c4083d
17 changed files with 458 additions and 635 deletions

View File

@@ -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.

View File

@@ -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))

View File

@@ -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)

View File

@@ -15,15 +15,14 @@
/* 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
color: $color !important
@if $color == transparent
color: $reverse-transparent !important
@else
color: $color !important
.fg-color-#{$i}
color: $color

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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();

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@@ -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;
}

File diff suppressed because one or more lines are too long

View File

@@ -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)

View File

@@ -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