From 7c4659e089aecd8199c4a0dfada44982844fb2a9 Mon Sep 17 00:00:00 2001 From: Jason Volk Date: Thu, 30 Nov 2017 10:43:36 -0800 Subject: [PATCH] client: Updates; support ircd.key state event; various. --- modules/static/charybdis.css | 204 +++++++++++--------- modules/static/charybdis/explore.js | 149 ++++++++++++++ modules/static/charybdis/room/controller.js | 11 ++ modules/static/charybdis/room/sync.js | 5 +- modules/static/charybdis/ui.js | 121 ------------ modules/static/index.html | 38 +++- 6 files changed, 316 insertions(+), 212 deletions(-) create mode 100644 modules/static/charybdis/explore.js diff --git a/modules/static/charybdis.css b/modules/static/charybdis.css index 4535aa7fa..214ff49dd 100644 --- a/modules/static/charybdis.css +++ b/modules/static/charybdis.css @@ -456,7 +456,6 @@ body.loaded text-shadow: 0px 0px #000000; } -.ircd .selected, .ircd button.selected { background-color: var(--pal-AC) !important; @@ -924,47 +923,88 @@ body.loaded * Object explorer */ -.ircd .explore2.object, -.ircd .explore2 .object +.ircd form.explore2 { + position: relative; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: flex-start; + border-left: 0px; + border-radius: 0px 0px 0px 0px; +} + +.ircd form.explore2.object, +.ircd form.explore2 .object +{ + flex-grow: 1; flex-flow: column nowrap; align-items: stretch; justify-content: center; - margin: 5px 0px 5px 0px; + box-sizing: border-box; + border-top: 0px solid var(--pal-AD); + border-bottom: 0px solid var(--pal-AD); + border-left: 0px solid var(--pal-AD); + border-radius: 0px 0px 0px 0px; + margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; - border-radius: 3px 0px 0px 0px; - border-left: 1px dotted var(--pal-AE); } -.ircd .explore2 div.member +.ircd form.explore2 div.member { + width: 100%; flex-flow: row nowrap; - align-items: stretch; - margin: 1px 0px 1px 0px; + align-items: center; + justify-content: stretch; + box-sizing: border-box; + margin: 0px 0px 0px 0px; + padding: 1px 0px 0px 0px; + border-bottom: 1px solid var(--pal-AD); } -.ircd .explore2 .key +.ircd form.explore2 div.member +:first-child +{ + margin-top: 0px; + padding-top: 0px; +} + +.ircd form.explore2 div.member +:last-child +{ + margin-bottom: 0px; + padding-bottom: 0px; +} + +.ircd form.explore2 .key { flex-grow: 1; align-items: center; justify-content: flex-start; - margin: 0px 20px 0px 5px; + margin: 0px 15px 0px 0px; + box-sizing: border-box; + font-size: calc(var(--fsF)); + color: white; } -.ircd .explore2 input.value +.ircd form.explore2 input.value { flex-grow: 0; - min-width: 48ch; - padding: 2px 5px 2px 5px; + min-width: 96ch; + align-self: stretch; + align-items: center; + justify-content: center; + line-height: 1em; border-radius: 2px; font-family: monospace; font-size: calc(var(--fsE)); + padding: 1px 1px 1px 1px; + margin: 1px 1px 0px 1px; } /* * Old explorer */ - +/* .ircd div.object { display: inline-flex; @@ -1038,7 +1078,7 @@ body.loaded font-family: FreeMono; font-size: 18px; } - +*/ /************************************************ ************************************************ @@ -1213,7 +1253,7 @@ body.loaded flex-flow: column nowrap; align-items: center; justify-content: center; - margin: 0px; + margin: 10px; padding: 0px; } @@ -1252,7 +1292,7 @@ body.loaded align-self: flex-end; align-items: baseline; letter-spacing: -1px; - margin: 0px 10px 0px 10px; + margin: 0px 2px 0px 0px; } .ircd .login_ h3 b @@ -1286,7 +1326,7 @@ body.loaded box-sizing: border-box; margin: 5px 0px 5px 0px; padding: 0px 4px 0px 4px; - border-radius: 0px; + border-radius: 3px; } .ircd .login_ div.submit @@ -1304,8 +1344,7 @@ body.loaded justify-content: center; margin: 5px 0px 5px 0px; padding: 10px 15px 10px 15px; - border-top: 1px solid var(--pal-AD); - border-bottom: 1px solid var(--pal-AD); + border: 1px solid var(--pal-AD); letter-spacing: 1px; font-weight: bold; font-size: 17px; @@ -1314,10 +1353,12 @@ body.loaded .ircd .login_ .submit button[name=login_] { + margin-right: 5px; } .ircd .login_ .submit button[name=register] { + margin-left: 5px; } .ircd .login_ button.submit:hover @@ -1781,7 +1822,7 @@ div.main > form.search align-items: stretch; justify-content: stretch; margin: 0px 0px 0px 0px; - padding-top: 3px; + padding-top: 1px; border-radius: 0px; background-color: var(--pal-DE); color: var(--pal-AC); @@ -1790,7 +1831,7 @@ div.main > form.search .ircd .rooms div.main > form.search.selected { - background-color: var(--pal-AC); + background-color: var(--pal-DD); } .ircd .rooms @@ -1803,6 +1844,12 @@ div.main > form.search input font-size: 16px; } +.ircd .rooms +div.main > form.search.selected input +{ + border-top: 1px solid var(--pal-DA); +} + .ircd .rooms div.main > form.search label { @@ -3212,69 +3259,11 @@ div.main > form.search label border-bottom: 1px solid var(--pal-AD); } -.ircd .room div.main div.event div.timeline div.info form -{ - position: relative; -} - .ircd .room div.main div.event div.timeline div.info form.event { - border-left: 0px; - border-radius: 0px 0px 0px 0px; -} - -.ircd .room div.main div.event div.timeline div.info form.event div.object -{ - flex-grow: 1; - box-sizing: border-box; - border-top: 0px solid var(--pal-AD); - border-bottom: 0px solid var(--pal-AD); - border-left: 0px solid var(--pal-AD); - border-radius: 0px 0px 0px 0px; - margin: 0px 0px 0px 0px; - padding: 0px 0px 0px 0px; -} - -.ircd .room div.main div.event div.timeline div.info form.event div.member -{ - box-sizing: border-box; - margin: 0px 0px 0px 0px; - padding: 0px 0px 1px 0px; -} - -.ircd .room div.main div.event div.timeline div.info form.event div.member:first-child -{ - margin-top: 0px; - padding-top: 0px; -} - -.ircd .room div.main div.event div.timeline div.info form.event div.member:last-child -{ - margin-bottom: 0px; - padding-bottom: 0px; -} - -.ircd .room div.main div.event div.timeline div.info form.event .key -{ - box-sizing: border-box; - align-self: stretch; - align-items: center; - justify-content: flex-start; - border-bottom: 1px solid var(--pal-AD); - font-size: calc(var(--fsF)); - color: white; - text-align: center; -} - -.ircd .room div.main div.event div.timeline div.info form.event input.value -{ - box-sizing: border-box; - margin: 0px 1px 0px 1px; - padding: 0px 5px 0px 5px; - align-items: center; - justify-content: center; - font-family: courier; - font-size: calc(var(--fsE)); + position: relative; + margin-top: 5px; + margin-bottom: 5px; } .ircd .room div.main div.event div.timeline div.info form.menu @@ -3306,8 +3295,8 @@ div.main > form.search label { flex-shrink: 0; flex-flow: row nowrap; - align-self: first baseline; - align-items: first baseline; + align-self: stretch; + align-items: flex-start; justify-content: flex-end; font-size: 16px; width: 20ch; @@ -3565,6 +3554,12 @@ div.main > form.search label text-shadow: 0px 0px var(--pal-AC); text-align: center; color: var(--pal-DE); + cursor: pointer; +} + +.ircd .room .main div.event.state div.handler.selected div.changed h1 +{ + background-color: var(--pal-AC) !important; } .ircd .room .main div.state.event div.handler.unhandled div.changed h1 @@ -3613,12 +3608,17 @@ div.main > form.search label padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-size: calc(var(--fsC)); - border-top: 1px solid var(--pal-DD); + border-top: 1px solid var(--pal-DA); border-right: 1px solid var(--pal-DD); border-radius: 0px 3px 0px 0px; color: black; } +.ircd .room .main div.event.state div.handler.selected div.changed h4 +{ + background-color: var(--pal-DD) !important; +} + .ircd .room .main div.state.event div.handler.unhandled div.changed h3 { color: var(--pal-CC); @@ -3701,6 +3701,36 @@ div.main > form.search label background-color: var(--pal-DD); } +.ircd .room .main div.event.state div.ircd_key form.explore2 +{ + position: relative; + margin-right: 5px; + margin-bottom: 5px; +} + +.ircd .room .main div.event.state div.ircd_key form.explore2 div.object +{ +} + +.ircd .room .main div.event.state div.ircd_key form.explore2 div.member +{ + padding-top: 0px; + border-left: 1px solid var(--pal-AD); +} + +.ircd .room .main div.event.state div.ircd_key form.explore2 .key +{ +} + +.ircd .room .main div.event.state div.ircd_key form.explore2 input.value +{ + max-width: 50vw; + border-radius: 0px; + margin-top: 0px; + padding-left: 5px; + padding-right: 5px; +} + .ircd .room .main div.event div.right { position: absolute; diff --git a/modules/static/charybdis/explore.js b/modules/static/charybdis/explore.js new file mode 100644 index 000000000..c20d26489 --- /dev/null +++ b/modules/static/charybdis/explore.js @@ -0,0 +1,149 @@ +/* + * IRCd Charybdis 5/Matrix + * + * Copyright (C) 2017 Charybdis Development Team + * Copyright (C) 2017 Jason Volk (jason@zemos.net) + * + * Permission to use, copy, modify, and/or distribute this software for any + * purpose with or without fee is hereby granted, provided that the above + * copyright notice and this permission notice is present in all copies. + * + * THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR + * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED + * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE + * DISCLAIMED. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, + * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES + * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR + * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) + * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, + * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING + * IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE + * POSSIBILITY OF SUCH DAMAGE. + * + */ + +'use strict'; + +/** + * Object explorers + */ + +/** + * Old JQuery Explorer + * (to be replaced with Angular) + * Recursive DOM object tree to represent JSON structure for recursive exploration. + */ +mc.explorer = function(state, elem, depth = 0) +{ + let key = (member) => $(member).children(".key"); + let name_elem = (member) => key(member).children(".name"); + let name = (member) => name_elem(member).text().trim(); + let icon = (member) => key(member).children(".icon"); + let value = (member) => $(member).children(".value"); + let value_visible = (member) => value(member).is(":visible"); + let value_empty = (member) => value(member).html().trim().length == 0; + let value_object = (member) => value(member).children(".object").length != 0; + + let icon_toggle = (member, active) => + { + icon(member).toggleClass("fa-minus-square", active); + icon(member).toggleClass("fa-plus-square", !active); + }; + + let value_toggle = (member) => + { + let activate = !value_visible(member); + icon_toggle(member, activate); + value(member).toggle(); + }; + + let value_clicked = (member) => + { + if($(value(member)).text().length != 0) + $(value(member)).html(""); + }; + + let member_clicked = (member) => + { + value_toggle(member); + if(value_empty(member)) + { + let key = name(member); + member.child = new explorer(state[key], value(member), depth + 1); // recurse + } + else delete member.child; + }; + + let member_click = (member) => + { + key(member).click((event) => member_clicked(member)); + }; + + let value_click = (member) => + { + //value(member).click((event) => value_clicked(member)); + }; + + let member_add = (root, key) => + { + $(root).prepend($("#json_member").html()); // DOM template + let member = $(root).children(".member").first(); + name_elem(member).append(key); + icon(member).addClass("fa-plus-square"); + value(member).hide(); + member_click(member); + value_click(member); + return member; + }; + + let member_add_object = (root, key) => + { + let member = member_add(root, key); + if(!state[key] || Object.keys(state[key]).length == 0) + { + icon_toggle(member, true); + icon(member).css("color", "#C8C8C8"); + } + }; + + let member_add_value = (root, key) => + { + let member = member_add(root, key); + value(member).text(state[key]); + value_toggle(member); + }; + + let add = (root, key) => + { + switch(typeof(state[key])) + { + case "object": + member_add_object(root, key); + break; + + case "boolean": + case "number": + case "string": + member_add_value(root, key); + break; + } + }; + + // Add the outer object div to the content element as the root object/div + $(elem).prepend($("#json_object").html()); // DOM template + let root = $(elem).children(".object").first(); + + // Add member divs for each member of the object + for(let key in state) + add(root, key); +}; + +/** Explorer replacement here + */ +mc.ng.app.controller('explore', class extends mc.ng.controller +{ + constructor($scope) + { + super("explore", $scope); + } +}); diff --git a/modules/static/charybdis/room/controller.js b/modules/static/charybdis/room/controller.js index cc2312b90..e5f96be7d 100644 --- a/modules/static/charybdis/room/controller.js +++ b/modules/static/charybdis/room/controller.js @@ -38,6 +38,7 @@ mc.ng.app.controller('room', class extends mc.ng.controller $scope.should_show_avatar = this.should_show_avatar; $scope.dots_to_underscores = this.dots_to_underscores; $scope.handler_exists = this.handler_exists; + $scope.sender_is_server = this.sender_is_server; } destructor() @@ -169,4 +170,14 @@ mc.ng.app.controller('room', class extends mc.ng.controller let sel = "#ircd_room_event__" + this.dots_to_underscores(type); return $(sel).length > 0; } + + //TODO: arbitrary + sender_is_server(event) + { + let sender = maybe(() => event.sender); + if(!sender) + return false; + + return mc.m.sid(sender) == "ircd"; + } }); diff --git a/modules/static/charybdis/room/sync.js b/modules/static/charybdis/room/sync.js index b4e04a472..83b168bb8 100644 --- a/modules/static/charybdis/room/sync.js +++ b/modules/static/charybdis/room/sync.js @@ -55,7 +55,10 @@ room.sync = function(data, action) if(this.control.mode == "LIVE") try { this.scroll.to.bottom("fast"); - this.receipt.send.current(); + + //TODO: riot's behavior is to only send the receipt when the + //TODO: user does something next ensuring they aren't AFK + //this.receipt.send.current(); } catch(e) { diff --git a/modules/static/charybdis/ui.js b/modules/static/charybdis/ui.js index 725aa0d0e..f4e2c7c2c 100644 --- a/modules/static/charybdis/ui.js +++ b/modules/static/charybdis/ui.js @@ -114,127 +114,6 @@ $(window).on("keyup", client.ctrl.keyup.bind(client.ctrl)); $(window).on("keydown", client.ctrl.keydown.bind(client.ctrl)); $(window).on("blur", client.ctrl.others.bind(client.ctrl)); -/** - * Explorer - * (to be replaced with Angular) - * Recursive DOM object tree to represent JSON structure for recursive exploration. - */ -let explorer = function(state, elem, depth = 0) -{ - let key = (member) => $(member).children(".key"); - let name_elem = (member) => key(member).children(".name"); - let name = (member) => name_elem(member).text().trim(); - let icon = (member) => key(member).children(".icon"); - let value = (member) => $(member).children(".value"); - let value_visible = (member) => value(member).is(":visible"); - let value_empty = (member) => value(member).html().trim().length == 0; - let value_object = (member) => value(member).children(".object").length != 0; - - let icon_toggle = (member, active) => - { - icon(member).toggleClass("fa-minus-square", active); - icon(member).toggleClass("fa-plus-square", !active); - }; - - let value_toggle = (member) => - { - let activate = !value_visible(member); - icon_toggle(member, activate); - value(member).toggle(); - }; - - let value_clicked = (member) => - { - if($(value(member)).text().length != 0) - $(value(member)).html(""); - }; - - let member_clicked = (member) => - { - value_toggle(member); - if(value_empty(member)) - { - let key = name(member); - member.child = new explorer(state[key], value(member), depth + 1); // recurse - } - else delete member.child; - }; - - let member_click = (member) => - { - key(member).click((event) => member_clicked(member)); - }; - - let value_click = (member) => - { - //value(member).click((event) => value_clicked(member)); - }; - - let member_add = (root, key) => - { - $(root).prepend($("#json_member").html()); // DOM template - let member = $(root).children(".member").first(); - name_elem(member).append(key); - icon(member).addClass("fa-plus-square"); - value(member).hide(); - member_click(member); - value_click(member); - return member; - }; - - let member_add_object = (root, key) => - { - let member = member_add(root, key); - if(!state[key] || Object.keys(state[key]).length == 0) - { - icon_toggle(member, true); - icon(member).css("color", "#C8C8C8"); - } - }; - - let member_add_value = (root, key) => - { - let member = member_add(root, key); - value(member).text(state[key]); - value_toggle(member); - }; - - let add = (root, key) => - { - switch(typeof(state[key])) - { - case "object": - member_add_object(root, key); - break; - - case "boolean": - case "number": - case "string": - member_add_value(root, key); - break; - } - }; - - // Add the outer object div to the content element as the root object/div - $(elem).prepend($("#json_object").html()); // DOM template - let root = $(elem).children(".object").first(); - - // Add member divs for each member of the object - for(let key in state) - add(root, key); -}; - -/** Explorer replacement here - */ -mc.ng.app.controller('explore', class extends mc.ng.controller -{ - constructor($scope) - { - super("explore", $scope); - } -}); - - /************************************** * Misc util * diff --git a/modules/static/index.html b/modules/static/index.html index 1abafa430..84d1d1b00 100644 --- a/modules/static/index.html +++ b/modules/static/index.html @@ -1745,7 +1745,7 @@ type="text/ng-template" selected: room.control.show_event_control, }"> @@ -1976,6 +1976,7 @@ type="text/ng-template" + + +