dave
/
tabbro
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix some stuff, convert css to Sass

This commit is contained in:
Dave Pedu 2015-02-13 16:26:39 -08:00
parent 1471da809b
commit 70222f799c
6 changed files with 293 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
.sass-cache
style.css.map

4
background.js
View File

@ -170,6 +170,8 @@ _tabbro_ = function() {
url:win.tabs[0].url url:win.tabs[0].url
}, function(ev) { }, function(ev) {
var newwindowid = ev.id var newwindowid = ev.id
win.id = newwindowid
// Open the rest of the tabs in this group // Open the rest of the tabs in this group
if(moreTabsToOpen.length>0) { if(moreTabsToOpen.length>0) {
@ -519,7 +521,7 @@ _tabbro_ = function() {
var thetab = bro.t_getTab(tabid) var thetab = bro.t_getTab(tabid)
if(thetab.sticky) { if(thetab && thetab.sticky) {
// If the tab is sticky, we only mark it as closed // If the tab is sticky, we only mark it as closed
thetab.id = null thetab.id = null
} else { } else {

3
build_css.sh Executable file
View File

@ -0,0 +1,3 @@
#!/bin/sh
sass --sourcemap=auto ./style.scss:./style.css --watch

50
popup.js
View File

@ -68,7 +68,7 @@ function renderTree(data) {
} }
function renderWindow(windowdata, winnum) { function renderWindow(windowdata, winnum) {
var win = element('li', {class:(windowdata.sticky?"sticky":"")}); var win = element('li', {class:(windowdata.sticky?"sticky":"")+(windowdata.id==null?" unloaded":" loaded")});
var label = element('span', {class:"name-line", _parent:win}) var label = element('span', {class:"name-line", _parent:win})
var label_icon = element('span', {class:"name-icon", _parent:label, _html:(windowdata.sticky?'<i class="fa fa-thumb-tack"></i> ':'')}) var label_icon = element('span', {class:"name-icon", _parent:label, _html:(windowdata.sticky?'<i class="fa fa-thumb-tack"></i> ':'')})
@ -112,19 +112,20 @@ function renderWindow(windowdata, winnum) {
var options = element('div', {class:"options", _parent:win}) var options = element('div', {class:"options", _parent:win})
var stickunstick = element('a', { if(windowdata.id!=null) {
class:"unstick"+(windowdata.sticky?" stuck":""), var stickunstick = element('a', {
_onclick: function() { class:"unstick"+(windowdata.sticky?" stuck":""),
//console.log("Stuck window #"+winnum) _onclick: function() {
tabbro.ui_stick_window(winnum) //console.log("Stuck window #"+winnum)
repaint() tabbro.ui_stick_window(winnum)
}, repaint()
href: "#", },
title: (windowdata.sticky?"Unstick tab":"Stick window"), href: "#",
_html:(windowdata.sticky?'<i class="fa fa-minus-circle"></i>':'<i class="fa fa-thumb-tack"></i>'), title: (windowdata.sticky?"Unstick tab":"Stick window"),
_parent:options _html:(windowdata.sticky?'<i class="fa fa-minus-circle"></i>':'<i class="fa fa-thumb-tack"></i>'),
}) _parent:options
})
}
var deletewindow = element('a', { var deletewindow = element('a', {
class:"delete", class:"delete",
@ -139,20 +140,6 @@ function renderWindow(windowdata, winnum) {
_parent:options _parent:options
}) })
/*var rename = element('a', {
class:"rename",
_onclick: function() {
//console.log("Open window #"+winnum)
//tabbro.ui_open_window(winnum)
repaint()
},
href: "#",
title: "Info",
_html:'<i class="fa fa-info-circle"></i>',
_parent:options
})*/
var opennew = element('a', { var opennew = element('a', {
class:"open", class:"open",
_onclick: function() { _onclick: function() {
@ -177,7 +164,11 @@ function renderWindow(windowdata, winnum) {
} }
function renderTab(tabdata, tabnum, winnum) { function renderTab(tabdata, tabnum, winnum) {
console.log("renderTab("+tabdata+", "+tabnum+", "+winnum+")")
console.log(tabdata)
var tab = element('li', {class:"clearfix"}) var tab = element('li', {class:"clearfix"})
if(tabdata.icon && tabdata.icon.substr(0, 9)!="chrome://") { if(tabdata.icon && tabdata.icon.substr(0, 9)!="chrome://") {
tab.style.backgroundImage = "url(\""+tabdata.icon+"\")"; tab.style.backgroundImage = "url(\""+tabdata.icon+"\")";
} else { } else {
@ -186,7 +177,7 @@ function renderTab(tabdata, tabnum, winnum) {
var label = element('span', {class:"name-line", _parent:tab}) var label = element('span', {class:"name-line", _parent:tab})
var label_icon = element('span', {class:"name-icon", _parent:label, _html:(tabdata.sticky?'<i class="fa fa-thumb-tack"></i> ':'')}) var label_icon = element('span', {class:"name-icon", _parent:label, _html:(tabdata.sticky?'<i class="fa fa-thumb-tack"></i> ':'')})
var label_name = element('span', {class:"name-string", _parent:label, _html:tabdata.title}) var label_name = element('span', {class:"name-string", _parent:label, _html:tabdata.title.trim()==""?"(No title)":tabdata.title})
var options = element('div', {class:"options", _parent:tab}) var options = element('div', {class:"options", _parent:tab})
@ -203,7 +194,6 @@ function renderTab(tabdata, tabnum, winnum) {
_parent:options _parent:options
}) })
var deletetab = element('a', { var deletetab = element('a', {
class:"delete", class:"delete",
_onclick: function() { _onclick: function() {

209
style.css
View File

@ -1,7 +1,8 @@
/* RESET */ /* RESET */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);
* { * {
box-sizing: border-box; box-sizing: border-box; }
}
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@ -15,136 +16,124 @@ article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, menu, nav, output, ruby, section, summary,
time, mark, audio, video { time, mark, audio, video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
font: inherit; font: inherit;
vertical-align: baseline; vertical-align: baseline; }
}
body { body {
line-height: 1; line-height: 1; }
}
ol, ul { ol, ul {
list-style: none; list-style: none; }
}
blockquote, q { blockquote, q {
quotes: none; quotes: none; }
}
blockquote:before, blockquote:after, blockquote:before, blockquote:after,
q:before, q:after { q:before, q:after {
content: ''; content: '';
content: none; content: none; }
}
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0; }
}
/* CLEARFIX */ /* CLEARFIX */
.clearfix:after { .clearfix:after {
visibility: hidden; visibility: hidden;
display: block; display: block;
font-size: 0; font-size: 0;
content: " "; content: " ";
clear: both; clear: both;
height: 0; height: 0; }
}
.clearfix { display: inline-block; } .clearfix {
* html .clearfix { height: 1%; } display: inline-block; }
.clearfix { display: block; }
* html .clearfix {
height: 1%; }
.clearfix {
display: block; }
/* FONTS */ /* FONTS */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);
/* STYLES */ /* STYLES */
/* GLOBAL */ /* GLOBAL */
body { body {
width: 420px; width: 420px;
height: auto; height: auto;
padding: 5px 0px; padding: 5px 0px;
margin: 0; margin: 0;
font-family: Open sans; font-family: Open sans;
font-size: 12px; font-size: 12px;
max-height: 700px; max-height: 700px;
overflow-y: auto; overflow-y: auto; }
}
@-webkit-keyframes nopenopenope {
0% {
left: 0px;
}
25% {
left: -10px;
}
75% {
left: 10px;
}
100% {
left: 0px;
}
}
.nope {
position: relative;
-webkit-animation: nopenopenope .15s linear 0s 3 normal;
}
@-webkit-keyframes nopenopenope {
0% {
left: 0px; }
25% {
left: -10px; }
75% {
left: 10px; }
100% {
left: 0px; } }
.nope {
position: relative;
-webkit-animation: nopenopenope .15s linear 0s 3 normal; }
/* Options panel appears on hove */ /* Options panel appears on hove */
.options { .options {
position: absolute; position: absolute;
top: -3px; top: 3px;
right: 10px; right: 0px;
display: none; display: none;
background-color: #fff; padding: 0px;
padding: 3px; font-size: 16px; }
border: 1px solid #aaa; .options a {
} padding: 0px 3px;
.options a { color: #888; }
font-size: 20px; .options a.delete {
padding: 3px; position: relative;
} bottom: 1px; }
li:hover>.options, li:hover>span>.options { .options a:hover {
display: block; color: #000; }
}
li:hover > .options, li:hover > span > .options {
display: block; }
/* MAIN TREE */ /* MAIN TREE */
ul#root { ul#root li {
position: relative;
} padding: 5px 0px; }
ul#root > li:nth-child(2n) { ul#root > li {
background-color: rgba(0,0,0,0.05); padding-bottom: 0px;
} border-bottom: 1px solid #888; }
ul#root > li > span { ul#root > li:last-child {
border-bottom: 0px; }
ul#root > li > span {
display: block; display: block;
padding: 0px 10px 5px 10px; padding: 0px 10px 5px 10px;
font-weight: bold; font-weight: bold; }
} ul#root > li:nth-child(2n) {
ul#root li { background-color: rgba(0, 0, 0, 0.05); }
position: relative; ul#root > li.unloaded span.name-line {
padding: 5px 0px; font-style: italic;
} color: #AAA; }
ul#root > li { ul#root > li > ul > li {
padding-bottom: 0px;
border-bottom: 1px solid #888;
}
ul#root > li:last-child {
border-bottom: 0px;
}
ul#root > li > ul > li {
padding-left: 40px; padding-left: 40px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 16px 16px; background-size: 16px 16px;
background-position: 20px center; background-position: 20px center; }
} ul#root > li > ul > li > span {
ul#root > li > ul > li > span { overflow-x: hidden;
overflow-x: hidden; text-overflow: ellipsis;
text-overflow: ellipsis; white-space: nowrap;
white-space: nowrap; display: block; }
display: block; ul#root > li > ul > li:nth-child(2n+1) {
} background-color: rgba(0, 0, 0, 0.05); }
ul#root > li > ul > li:nth-child(2n+1) {
background-color: rgba(0,0,0,0.05); /*# sourceMappingURL=style.css.map */
}

166
style.scss Normal file
View File

@ -0,0 +1,166 @@
/* RESET */
* {
box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* CLEARFIX */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* FONTS */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);
/* STYLES */
/* GLOBAL */
body {
width: 420px;
height: auto;
padding: 5px 0px;
margin: 0;
font-family: Open sans;
font-size: 12px;
max-height: 700px;
overflow-y: auto;
}
@-webkit-keyframes nopenopenope {
0% {
left: 0px;
}
25% {
left: -10px;
}
75% {
left: 10px;
}
100% {
left: 0px;
}
}
.nope {
position: relative;
-webkit-animation: nopenopenope .15s linear 0s 3 normal;
}
/* Options panel appears on hove */
.options {
position: absolute;
top: 3px;
right: 0px;
display: none;
padding: 0px;
font-size: 16px;
a {
padding: 0px 3px;
color: #888;
&.delete {
position: relative;
bottom: 1px;
}
&:hover {
color: #000;
}
}
}
li:hover>.options, li:hover>span>.options {
display: block;
}
/* MAIN TREE */
ul#root {
li {
position: relative;
padding: 5px 0px;
}
&>li {
padding-bottom: 0px;
border-bottom: 1px solid #888;
&:last-child {
border-bottom: 0px;
}
&> span {
display: block;
padding: 0px 10px 5px 10px;
font-weight: bold;
}
&:nth-child(2n) {
background-color: rgba(0,0,0,0.05);
}
&.unloaded {
span.name-line {
font-style: italic;
color: #AAA;
}
}
&>ul {
&>li {
padding-left: 40px;
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: 20px center;
&>span {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
&:nth-child(2n+1) {
background-color: rgba(0,0,0,0.05);
}
}
}
}
}