diff options
author | Jesse Luehrs <doy@tozt.net> | 2019-11-22 13:29:23 -0500 |
---|---|---|
committer | Jesse Luehrs <doy@tozt.net> | 2019-11-22 13:29:23 -0500 |
commit | 9c75f4154e4c0a61068ee0e1d12880e0e02e13e8 (patch) | |
tree | 24047140733ee931dfd8f8e5189ebe0bb9fb18f7 | |
parent | e6b6398033125d2fc6dce32e61458e0724bddb6a (diff) | |
download | teleterm-9c75f4154e4c0a61068ee0e1d12880e0e02e13e8.tar.gz teleterm-9c75f4154e4c0a61068ee0e1d12880e0e02e13e8.zip |
more web display improvements
-rw-r--r-- | Cargo.lock | 1 | ||||
-rw-r--r-- | teleterm-web/Cargo.toml | 1 | ||||
-rw-r--r-- | teleterm-web/src/views/list.rs | 12 | ||||
-rw-r--r-- | teleterm-web/src/views/watch.rs | 14 | ||||
-rw-r--r-- | teleterm/src/web.rs | 7 | ||||
-rw-r--r-- | teleterm/static/index.html | 3 | ||||
-rw-r--r-- | teleterm/static/teleterm.css | 20 | ||||
-rw-r--r-- | teleterm/static/teleterm_web.js | 89 | ||||
-rw-r--r-- | teleterm/static/teleterm_web_bg.wasm | bin | 687220 -> 703753 bytes |
9 files changed, 93 insertions, 54 deletions
@@ -2155,6 +2155,7 @@ dependencies = [ "seed", "serde", "serde_json", + "unicode-width", "vt100", "wasm-bindgen", "web-sys", diff --git a/teleterm-web/Cargo.toml b/teleterm-web/Cargo.toml index 47496de..9468353 100644 --- a/teleterm-web/Cargo.toml +++ b/teleterm-web/Cargo.toml @@ -18,6 +18,7 @@ log = "0.4" seed = "0.4" serde = "1" serde_json = "1" +unicode-width = "0.1" vt100 = "0.6" wasm-bindgen = "0.2" web-sys = { version = "0.3", features = ["ErrorEvent", "MessageEvent", "WebSocket"] } diff --git a/teleterm-web/src/views/list.rs b/teleterm-web/src/views/list.rs index 6d4ccd5..88d8a37 100644 --- a/teleterm-web/src/views/list.rs +++ b/teleterm-web/src/views/list.rs @@ -4,6 +4,7 @@ pub(crate) fn render(model: &crate::model::Model) -> Vec<Node<crate::Msg>> { let rows: Vec<_> = model.sessions().iter().map(row).collect(); vec![ seed::table![ + seed::attrs! { At::Class => "list" }, seed::tr![ seed::th!["username"], seed::th!["size"], @@ -19,13 +20,10 @@ pub(crate) fn render(model: &crate::model::Model) -> Vec<Node<crate::Msg>> { fn row(session: &crate::protocol::Session) -> Node<crate::Msg> { seed::tr![ - seed::td![seed::a![ - simple_ev( - Ev::Click, - crate::Msg::StartWatching(session.id.clone()) - ), - session.username, - ]], + simple_ev(Ev::Click, crate::Msg::StartWatching(session.id.clone())), + seed::td![ + seed::a![seed::attrs! {At::Href => "#"}, session.username,] + ], seed::td![format!("{}x{}", session.size.cols, session.size.rows)], seed::td![format_time(session.idle_time)], seed::td![format!("{}", session.watchers)], diff --git a/teleterm-web/src/views/watch.rs b/teleterm-web/src/views/watch.rs index 07e8244..841b438 100644 --- a/teleterm-web/src/views/watch.rs +++ b/teleterm-web/src/views/watch.rs @@ -1,4 +1,5 @@ use crate::prelude::*; +use unicode_width::UnicodeWidthStr as _; pub(crate) fn render(model: &crate::model::Model) -> Node<crate::Msg> { let screen = if let Some(screen) = model.screen() { @@ -13,10 +14,17 @@ pub(crate) fn render(model: &crate::model::Model) -> Node<crate::Msg> { let mut row = vec![]; for col_idx in 0..cols { let cell = screen.cell(row_idx, col_idx).unwrap(); - row.push(seed::div![cell.contents()]) + let mut contents = cell.contents(); + if contents.trim().is_empty() || contents.width() == 0 { + contents = "\u{00a0}".to_string(); + } + row.push(seed::td![ + seed::attrs! { At::Class => "cell" }, + contents + ]) } - grid.push(seed::div![row]); + grid.push(seed::tr![seed::attrs! { At::Class => "row" }, row]); } - seed::div![grid] + seed::table![seed::attrs! { At::Class => "grid" }, grid] } diff --git a/teleterm/src/web.rs b/teleterm/src/web.rs index b01480d..51da6e8 100644 --- a/teleterm/src/web.rs +++ b/teleterm/src/web.rs @@ -20,6 +20,10 @@ lazy_static_include::lazy_static_include_bytes!( TELETERM_WEB_WASM, "static/teleterm_web_bg.wasm" ); +lazy_static_include::lazy_static_include_bytes!( + TELETERM_CSS, + "static/teleterm.css" +); #[derive( serde::Deserialize, @@ -79,6 +83,9 @@ pub fn router() -> impl gotham::handler::NewHandler { route .get("/teleterm_web_bg.wasm") .to(serve_static("application/wasm", &TELETERM_WEB_WASM)); + route + .get("/teleterm.css") + .to(serve_static("text/css", &TELETERM_CSS)); route.get("/list").to(handle_list); route .get("/watch") diff --git a/teleterm/static/index.html b/teleterm/static/index.html index 2b8e30e..4a43e2b 100644 --- a/teleterm/static/index.html +++ b/teleterm/static/index.html @@ -1,5 +1,8 @@ <!doctype html> <html> + <head> + <link rel="stylesheet" href="teleterm.css" type="text/css" /> + </head> <body> <section id="app"></section> <script type="module"> diff --git a/teleterm/static/teleterm.css b/teleterm/static/teleterm.css new file mode 100644 index 0000000..ad6a8a7 --- /dev/null +++ b/teleterm/static/teleterm.css @@ -0,0 +1,20 @@ +.list td, .list th { + margin: 0; + padding-left: 8px; + padding-right: 8px; +} + +.grid { + font-family: monospace; + background-color: black; + color: white; + border-collapse: collapse; + border: 4px solid black; +} + +.grid .row .cell { + min-width: 1ch; + max-width: 1ch; + min-height: 1ex; + padding: 0px; +} diff --git a/teleterm/static/teleterm_web.js b/teleterm/static/teleterm_web.js index 593d5a8..b4ac9be 100644 --- a/teleterm/static/teleterm_web.js +++ b/teleterm/static/teleterm_web.js @@ -1,6 +1,10 @@ let wasm; +function __wbg_elem_binding0(arg0, arg1, arg2) { + wasm.__wbg_function_table.get(88)(arg0, arg1, arg2); +} + const heap = new Array(32); heap.fill(undefined); @@ -17,32 +21,29 @@ function addHeapObject(obj) { heap[idx] = obj; return idx; } -function __wbg_elem_binding0(arg0, arg1, arg2) { - wasm.__wbg_function_table.get(290)(arg0, arg1, addHeapObject(arg2)); -} -function __wbg_elem_binding1(arg0, arg1) { - wasm.__wbg_function_table.get(220)(arg0, arg1); +function __wbg_elem_binding1(arg0, arg1, arg2) { + wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2)); } function __wbg_elem_binding2(arg0, arg1, arg2) { - wasm.__wbg_function_table.get(72)(arg0, arg1, addHeapObject(arg2)); + wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2)); } -function __wbg_elem_binding3(arg0, arg1, arg2) { - wasm.__wbg_function_table.get(72)(arg0, arg1, addHeapObject(arg2)); +function __wbg_elem_binding3(arg0, arg1) { + wasm.__wbg_function_table.get(225)(arg0, arg1); } function __wbg_elem_binding4(arg0, arg1, arg2) { - wasm.__wbg_function_table.get(76)(arg0, arg1, arg2); + wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2)); } function __wbg_elem_binding5(arg0, arg1, arg2) { - wasm.__wbg_function_table.get(72)(arg0, arg1, addHeapObject(arg2)); + wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2)); } function __wbg_elem_binding6(arg0, arg1, arg2) { - wasm.__wbg_function_table.get(72)(arg0, arg1, addHeapObject(arg2)); + wasm.__wbg_function_table.get(294)(arg0, arg1, addHeapObject(arg2)); } function __wbg_elem_binding7(arg0, arg1, arg2, arg3, arg4) { - wasm.__wbg_function_table.get(317)(arg0, arg1, addHeapObject(arg2), arg3, addHeapObject(arg4)); + wasm.__wbg_function_table.get(321)(arg0, arg1, addHeapObject(arg2), arg3, addHeapObject(arg4)); } function __wbg_elem_binding8(arg0, arg1, arg2, arg3) { - wasm.__wbg_function_table.get(321)(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3)); + wasm.__wbg_function_table.get(325)(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3)); } /** */ @@ -228,14 +229,6 @@ function init(module) { imports.wbg.__wbindgen_object_drop_ref = function(arg0) { takeObject(arg0); }; - imports.wbg.__wbindgen_object_clone_ref = function(arg0) { - const ret = getObject(arg0); - return addHeapObject(ret); - }; - imports.wbg.__wbindgen_string_new = function(arg0, arg1) { - const ret = getStringFromWasm(arg0, arg1); - return addHeapObject(ret); - }; imports.wbg.__wbindgen_cb_drop = function(arg0) { const obj = takeObject(arg0).original; if (obj.cnt-- == 1) { @@ -245,6 +238,14 @@ function init(module) { const ret = false; return ret; }; + imports.wbg.__wbindgen_string_new = function(arg0, arg1) { + const ret = getStringFromWasm(arg0, arg1); + return addHeapObject(ret); + }; + imports.wbg.__wbindgen_object_clone_ref = function(arg0) { + const ret = getObject(arg0); + return addHeapObject(ret); + }; imports.wbg.__wbindgen_cb_forget = function(arg0) { takeObject(arg0); }; @@ -884,16 +885,16 @@ function init(module) { imports.wbg.__wbindgen_throw = function(arg0, arg1) { throw new Error(getStringFromWasm(arg0, arg1)); }; - imports.wbg.__wbindgen_closure_wrapper294 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper639 = function(arg0, arg1, arg2) { const state = { a: arg0, b: arg1, cnt: 1 }; - const real = (arg0) => { + const real = () => { state.cnt++; const a = state.a; state.a = 0; try { - return __wbg_elem_binding2(a, state.b, arg0); + return __wbg_elem_binding3(a, state.b, ); } finally { - if (--state.cnt === 0) wasm.__wbg_function_table.get(73)(a, state.b); + if (--state.cnt === 0) wasm.__wbg_function_table.get(226)(a, state.b); else state.a = a; } } @@ -902,16 +903,16 @@ function init(module) { const ret = real; return addHeapObject(ret); }; - imports.wbg.__wbindgen_closure_wrapper1041 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper1056 = function(arg0, arg1, arg2) { const state = { a: arg0, b: arg1, cnt: 1 }; const real = (arg0) => { state.cnt++; const a = state.a; state.a = 0; try { - return __wbg_elem_binding0(a, state.b, arg0); + return __wbg_elem_binding6(a, state.b, arg0); } finally { - if (--state.cnt === 0) wasm.__wbg_function_table.get(291)(a, state.b); + if (--state.cnt === 0) wasm.__wbg_function_table.get(295)(a, state.b); else state.a = a; } } @@ -920,16 +921,16 @@ function init(module) { const ret = real; return addHeapObject(ret); }; - imports.wbg.__wbindgen_closure_wrapper292 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper310 = function(arg0, arg1, arg2) { const state = { a: arg0, b: arg1, cnt: 1 }; const real = (arg0) => { state.cnt++; const a = state.a; state.a = 0; try { - return __wbg_elem_binding6(a, state.b, arg0); + return __wbg_elem_binding5(a, state.b, arg0); } finally { - if (--state.cnt === 0) wasm.__wbg_function_table.get(73)(a, state.b); + if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b); else state.a = a; } } @@ -938,16 +939,16 @@ function init(module) { const ret = real; return addHeapObject(ret); }; - imports.wbg.__wbindgen_closure_wrapper288 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper316 = function(arg0, arg1, arg2) { const state = { a: arg0, b: arg1, cnt: 1 }; const real = (arg0) => { state.cnt++; const a = state.a; state.a = 0; try { - return __wbg_elem_binding3(a, state.b, arg0); + return __wbg_elem_binding1(a, state.b, arg0); } finally { - if (--state.cnt === 0) wasm.__wbg_function_table.get(73)(a, state.b); + if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b); else state.a = a; } } @@ -956,16 +957,16 @@ function init(module) { const ret = real; return addHeapObject(ret); }; - imports.wbg.__wbindgen_closure_wrapper290 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper318 = function(arg0, arg1, arg2) { const state = { a: arg0, b: arg1, cnt: 1 }; const real = (arg0) => { state.cnt++; const a = state.a; state.a = 0; try { - return __wbg_elem_binding4(a, state.b, arg0); + return __wbg_elem_binding2(a, state.b, arg0); } finally { - if (--state.cnt === 0) wasm.__wbg_function_table.get(73)(a, state.b); + if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b); else state.a = a; } } @@ -974,16 +975,16 @@ function init(module) { const ret = real; return addHeapObject(ret); }; - imports.wbg.__wbindgen_closure_wrapper296 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper314 = function(arg0, arg1, arg2) { const state = { a: arg0, b: arg1, cnt: 1 }; const real = (arg0) => { state.cnt++; const a = state.a; state.a = 0; try { - return __wbg_elem_binding5(a, state.b, arg0); + return __wbg_elem_binding4(a, state.b, arg0); } finally { - if (--state.cnt === 0) wasm.__wbg_function_table.get(73)(a, state.b); + if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b); else state.a = a; } } @@ -992,16 +993,16 @@ function init(module) { const ret = real; return addHeapObject(ret); }; - imports.wbg.__wbindgen_closure_wrapper630 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper312 = function(arg0, arg1, arg2) { const state = { a: arg0, b: arg1, cnt: 1 }; - const real = () => { + const real = (arg0) => { state.cnt++; const a = state.a; state.a = 0; try { - return __wbg_elem_binding1(a, state.b, ); + return __wbg_elem_binding0(a, state.b, arg0); } finally { - if (--state.cnt === 0) wasm.__wbg_function_table.get(221)(a, state.b); + if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b); else state.a = a; } } diff --git a/teleterm/static/teleterm_web_bg.wasm b/teleterm/static/teleterm_web_bg.wasm Binary files differindex e2b981c..5956297 100644 --- a/teleterm/static/teleterm_web_bg.wasm +++ b/teleterm/static/teleterm_web_bg.wasm |