diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..f096376 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,8 @@ +{ + "globals": { + "angular": false, + "$": false, + "window": false, + "console": false + } +} diff --git a/README.md b/README.md index ee05adb..a74b69c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -A web client for WeeChat [![Build Status](https://api.travis-ci.org/glowing-bear/glowing-bear.png)](https://travis-ci.org/glowing-bear/glowing-bear) +A web client for WeeChat [![Build Status](https://api.travis-ci.org/glowing-bear/glowing-bear.png)](https://travis-ci.org/glowing-bear/glowing-bear?branch=master) ======================== Glowing Bear is an HTML5 web frontend for [WeeChat](http://weechat.org) that strives to be a modern and slick interface. It relies on WeeChat to do all the heavy lifting (connections, servers, history, etc) and then provides some nice features on top of that, like content embedding (images, video) and desktop notifications. The main advantage, though, is that you can access it from any modern internet device without having to worry about ssh connections or terminal emulators. @@ -15,7 +15,7 @@ To use the web interface you first need to set a relay and a password: /relay add weechat 9001 /set relay.network.password YOURPASSWORD -Then go to the GitHub hosted version of [Glowing Bear](http://glowing-bear.github.io/glowing-bear)! +Then go to our hosted version of [Glowing Bear](http://www.glowing-bear.org)! You can run Glowing Bear in multiple ways: use it like any other webpage, as a Firefox or Chrome app, or a full-screen Chrome app on Android ("Add to homescreen"). We also provide an [Android app](https://play.google.com/store/apps/details?id=com.glowing_bear) that you can install from the Google Play Store. @@ -29,7 +29,7 @@ FAQ --- - *Can I use Glowing Bear to access a machine or port not exposed to the internet by passing the connection through my server?* No, that's not what Glowing Bear does. You can use a websocket proxy module for your webserver to forward `/weechat` to your WeeChat instance though. Here are some pointers you might find helpful for setting this up with [nginx](http://nginx.com/blog/websocket-nginx/) or [apache](https://httpd.apache.org/docs/2.4/mod/mod_proxy_wstunnel.html). -- *How does the encryption work?* TLS is used for securing the connection if you enable encryption. You can find more detailed instructions on how to communicate securely in the "encryption instructions" tab on the [landing page](http://glowing-bear.github.io/glowing-bear). Note that your browser will perform the certificate validation, so it is strongly recommended to use a certificate that your browser trusts. +- *How does the encryption work?* TLS is used for securing the connection if you enable encryption. You can find more detailed instructions on how to communicate securely in the "encryption instructions" tab on the [landing page](http://www.glowing-bear.org). Note that your browser will perform the certificate validation, so it is strongly recommended to use a certificate that your browser trusts. Development ----------- @@ -45,7 +45,7 @@ python -m SimpleHTTPServer Now you can point your browser to [http://localhost:8000](http://localhost:8000)! -Remember that **you don't need to host Glowing Bear yourself to use it**, you can just use the [GitHub hosted version](http://glowing-bear.github.io/glowing-bear), and we'll take care of updates for you. Your browser connects to WeeChat directly, so it does not matter where Glowing Bear is hosted. +Remember that **you don't need to host Glowing Bear yourself to use it**, you can just use [our hosted version](http://www.glowing-bear.org) powered by GitHub pages, and we'll take care of updates for you. Your browser connects to WeeChat directly, so it does not matter where Glowing Bear is hosted. If you'd prefer a version hosted with HTTPS, GitHub serves that as well with an undocumented, not officially supported (by GitHub) link. Be careful though, it might break any minute. Anyway, here's the link: [secret GitHub HTTPS link](https://glowing-bear.github.io/glowing-bear/) (the trailing forward slash in the URL seems to make all the difference). diff --git a/assets/img/favicon.png b/assets/img/favicon.png index efe7619..49a6fc8 100644 Binary files a/assets/img/favicon.png and b/assets/img/favicon.png differ diff --git a/assets/img/glowing-bear.png b/assets/img/glowing-bear.png index adaad56..3bf2ca2 100644 Binary files a/assets/img/glowing-bear.png and b/assets/img/glowing-bear.png differ diff --git a/assets/img/glowing_bear_128x128.png b/assets/img/glowing_bear_128x128.png index 324c65f..2fec469 100644 Binary files a/assets/img/glowing_bear_128x128.png and b/assets/img/glowing_bear_128x128.png differ diff --git a/assets/img/glowing_bear_60x60.png b/assets/img/glowing_bear_60x60.png index 71b22d6..9dbfffd 100644 Binary files a/assets/img/glowing_bear_60x60.png and b/assets/img/glowing_bear_60x60.png differ diff --git a/assets/img/glowing_bear_90x90.png b/assets/img/glowing_bear_90x90.png index cd98bac..11cce25 100644 Binary files a/assets/img/glowing_bear_90x90.png and b/assets/img/glowing_bear_90x90.png differ diff --git a/css/glowingbear.css b/css/glowingbear.css index 19cb22a..f1ef251 100644 --- a/css/glowingbear.css +++ b/css/glowingbear.css @@ -104,6 +104,20 @@ input[type=text], input[type=password], #sendMessage, .badge { color: #ccc; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset; background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); + margin-bottom: 5px !important; +} +.input-group { + width: 100%; +} +.row { + margin: 0px; + max-width: 300px; +} +.no-gutter [class*="col"] { + padding: 0px +} +.col-sm-9 { + padding-right: 5px !important; } .glyphicon { top: 0; /* Fixes alignment issue in top bar */ @@ -171,10 +185,14 @@ input[type=text], input[type=password], #sendMessage, .badge { padding-top: 35px; /* topbar */ padding-bottom: 1px; /* need to force a padding here */ font-size: smaller; - -webkit-transition:0.35s ease all; - transition:0.35s ease all; + transition:0.2s ease-in-out; z-index: 2; } + +#sidebar[data-state=visible] { + left: 0px; +} + #sidebar form { } #sidebar.ng-hide-add, #sidebar.ng-hide-remove { @@ -253,10 +271,6 @@ input[type=text], input[type=password], #sendMessage, .badge { min-height: 100%; } -.monospace { - font-family: 'Terminus', 'Consolas', 'Monaco', 'Inconsolata', 'Ubuntu Mono', monospace; -} - #bufferlines { position: relative; height: 100%; @@ -274,7 +288,7 @@ input[type=text], input[type=password], #sendMessage, .badge { .withnicklist { margin-right: 100px !important; /* nicklist */ } -.withsidebar { +.content[sidebar-state=visible] #bufferlines { margin-left: 145px; /* sidebar */ } #bufferlines .btn { @@ -290,7 +304,7 @@ input[type=text], input[type=password], #sendMessage, .badge { transition:0.35s ease all; z-index: 1; } -.footer.withsidebar { +.content[sidebar-state=visible] .footer { margin-left: 0; padding-left: 145px; } @@ -336,8 +350,23 @@ li.notification { background: rgba(255,255,255,0.5); } -img.embed { +div.embed * { + max-width: 100%; +} + +/* not for all img embeds so as not to affect the yr plugin (302px) */ +div.embed img.embed { max-height: 300px; + max-width: 100%; +} + +div.colourbox { + display: inline-block; + border-radius: 3px; + border: 1px solid #bbb; + width: 14px; + height: 14px; + margin-bottom: -2px; } @@ -349,21 +378,80 @@ table.notimestampseconds td.time span.seconds { display: none !important; } -.modal ul { +.gb-modal { + z-index: 1000; + height: 100%; + overflow-y: scroll; + position: absolute; + top: 0; + left: 0; + width: 100%; +} + +.gb-modal[data-state=hidden] { + transition: .2s ease-in-out; + visibility: hidden; + opacity: 0; +} + +.gb-modal[data-state=visible] { + transition: .2s ease-in-out; + visibility: visible; + opacity: 1; +} + +.gb-modal[data-state=hidden] .modal-dialog { + transition: top .3s ease-in; + top: -150px; +} + +.gb-modal[data-state=visible] .modal-dialog { + transition: top .3s ease-out; + top: 0px; +} +.gb-modal .backdrop { + z-index: 999; + position: fixed; + top: 0; + height: 100%; + width: 100%; + overflow: none; + background-color:rgba(0, 0, 0, 0.5) +} +.gb-modal .modal-dialog { + z-index: 1001; + position: absolute; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + top: 35px; +} +.gb-modal[ng-click], .gb-modal div[ng-click] { + cursor: default; +} + +.gb-modal ul { list-style: none; padding-left: 15px; } -.modal li { +.gb-modal li { font-size: larger; margin-bottom: 10px; } -.modal li li { +.gb-modal li li { font-size: medium; } .modal-header { + padding-top: 23px; border-bottom: 0; } +#fontchoice label { + font-weight: normal; + text-align: left; +} + h2 { padding-bottom: 5px; height: 72px; @@ -380,14 +468,35 @@ h2 span, h2 small { display: block; } +.panel[data-state=active] .panel-collapse { + transition: max-height 0.5s; + max-height: 60em; + height: auto; + display: block; +} +.panel[data-state=collapsed] .panel-collapse { + transition: max-height 0.5s; + max-height: 0; +} +.panel[data-state=collapsed] { + border: 0px solid transparent; +} + +/* fix for firefox being stupid */ +@-moz-document url-prefix() { + .panel[data-state=collapsed] .panel-collapse * { + display: none; + } +} + +.make-thinner { + padding-right: -15px; +} + /* */ /* Mobile layout */ /* */ @media (max-width: 968px) { - .monospace { - /* readability on mobile +9001% */ - font-family: sans-serif; - } #bufferlines table { border-collapse: separate; @@ -397,8 +506,6 @@ h2 span, h2 small { #sidebar { font-size: normal; bottom: 0px; - width: auto; - max-width: 60%; top: 0px; padding-bottom: 35px; } @@ -409,6 +516,18 @@ h2 span, h2 small { bottom: 0px; } + #sidebar[data-state=visible] { + width: 200px; + } + + #sidebar[data-state=hidden] { + left: -200px; + } + + .content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer { + margin-left: 0px; + } + #topbar .title { left: 40px; } @@ -466,15 +585,20 @@ h2 span, h2 small { #bufferlines td.prefix { display: inline; - padding-right: 0; + padding-right: 5px; border: 0; font-weight: bold; font-size: 15px; } #bufferlines td.message { - padding-left: 0; display: inline; + padding: 0px !important; + } + + .gb-modal .modal-dialog { + margin: 20px 2%; + width: 96%; } /* a different colour is too irregular on mobile */ @@ -498,4 +622,7 @@ h2 span, h2 small { width: 5px; height: 5px; } + .col-sm-9 { + padding-right: 0px !important; + } } diff --git a/directives/input.html b/directives/input.html index 27eb6be..58a72ed 100644 --- a/directives/input.html +++ b/directives/input.html @@ -1,6 +1,6 @@
- diff --git a/directives/plugin.html b/directives/plugin.html index b3b5651..657692a 100644 --- a/directives/plugin.html +++ b/directives/plugin.html @@ -4,7 +4,7 @@ Hide {{ plugin.name }} -
+
diff --git a/index.html b/index.html index bb2b270..6cae901 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ + @@ -13,12 +14,10 @@ - - @@ -30,7 +29,6 @@ -
@@ -48,26 +46,32 @@
Secure connection error Unable to connect to unencrypted relay when your are connecting to Glowing Bear over HTTPS. Please use an encrypted relay or load the page without using HTTPS.
-
-
+
+

- + Connection settings

- +
- - +
+
+ +
+
+ +
+
- +
Error: wrong password
@@ -78,6 +82,12 @@ Save password in your browser
+
+ +
-
+

- + Usage instructions

-
+

Configuring the relay

To start using glowing bear, please enable the relay plugin in your WeeChat client: @@ -115,26 +125,28 @@
  • ALT-n: Toggle nicklist
  • ALT-l: Focus on input bar
    • -
  • ALT-[0-9]: Focus on buffer
    • +
  • ALT-[0-9]: Switch to buffer number N
  • ALT-a: Focus on next buffer with activity
    • -
  • ALT-<: Switch to previous buffer
    • +
  • ALT-<: Switch to previous active buffer
  • ALT-g: Focus on buffer list filter
    • -
  • Esc-Esc: disconnect (double-tap)
    • -
  • arrow keys: history navigation
    • +
  • Esc-Esc: Disconnect (double-tap)
    • +
  • Arrow keys: Navigate history
    • +
  • Tab key: Complete nick
    • +
  • The following readline/emacs style keybindings can be enabled with a setting: Ctrl-a, Ctrl-e, Ctrl-u, Ctrl-k, Ctrl-w
-
+

- + Encryption instructions

-
+

If you check the encryption box, the communication between browser and WeeChat will be encrypted with SSL.

Note: If you are using a self-signed certificate, you have to visit https://{{ host || 'weechathost' }}:{{ port || 'relayport' }}/ in your browser first to add a security exception. You can close that tab once you confirmed the certificate, no content will appear. The necessity of this process is a bug in Firefox and other browsers.

@@ -152,15 +164,15 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
-
+

- + Install app

-
+

You don't need to install anything to use this app, it should work with any modern browser. Start using it right now! However, there are a few ways to improve integration with your operating system.

Firefox

@@ -171,15 +183,15 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
-
+

- + Get involved

-
+

Glowing bear is built by a small group of developers in their free time. As we're always trying to improve it, we would love getting your feedback and help. If that sounds like something you might enjoy, check out our project page on GitHub!

If you're interested in contributing or simply want to say hello, head over to #glowing-bear on freenode! We won't bite, promise (-ish).

@@ -188,10 +200,10 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
-
+
- + brand @@ -199,7 +211,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
- +
@@ -208,14 +220,14 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
-