mirror of
https://github.com/matrix-construct/construct
synced 2024-12-25 23:14:13 +01:00
client: Various fixes.
This commit is contained in:
Jason Volk
parent
26800d5db4
commit
62133d09b7
9 changed files with 189 additions and 125 deletions
|
|
@ -380,6 +380,7 @@ body.loaded
|
|||
.ircd .selected i.icon
|
||||
{
|
||||
color: var(--pal-CA) !important;
|
||||
text-shadow: 0px 1px #505050;
|
||||
}
|
||||
|
||||
@keyframes spinner
|
||||
|
|
@ -774,6 +775,7 @@ body.loaded
|
|||
/* box-shadow: 1px 1px 2px #383838; */
|
||||
border-radius: inherit;
|
||||
background-color: var(--pal-CB);
|
||||
font-family: monospace;
|
||||
opacity: 0.90;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -1074,6 +1076,7 @@ body.loaded
|
|||
margin: 1px 1px 1px 1px;
|
||||
padding: 1vh 1vw 1vh 1vw;
|
||||
background-color: inherit;
|
||||
color: var(--pal-DE);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -1108,6 +1111,10 @@ body.loaded
|
|||
display: none;
|
||||
}
|
||||
|
||||
.ircd .menu button.selected h2
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* This is the main menu */
|
||||
#charybdis_menu
|
||||
|
|
@ -1125,7 +1132,6 @@ body.loaded
|
|||
margin: 5px;
|
||||
}
|
||||
|
||||
|
||||
/************************************************
|
||||
* MOTD
|
||||
*/
|
||||
|
|
@ -1211,7 +1217,7 @@ body.loaded
|
|||
{
|
||||
font-size: 1.5vw;
|
||||
align-self: flex-end;
|
||||
text-shadow: 1px 2px #707070;
|
||||
text-shadow: 1px 2px #505050;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -1364,6 +1370,7 @@ div.main > div.head
|
|||
position: relative;
|
||||
flex-flow: column nowrap;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--pal-AA);
|
||||
background-color: var(--pal-AD);
|
||||
}
|
||||
|
||||
|
|
@ -1372,27 +1379,40 @@ div.main > div.head
|
|||
div.main > div.head form.menu
|
||||
{
|
||||
position: relative;
|
||||
flex-flow: row wrap;
|
||||
align-items: stretch;
|
||||
flex-flow: row nowrap;
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
div.main > div.head form.menu button
|
||||
{
|
||||
width: 30%;
|
||||
flex-grow: 0;
|
||||
padding: 15px 5px 15px 5px;
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
div.main > div.head form.menu button h3
|
||||
{
|
||||
width: 9ch;
|
||||
width: 8ch;
|
||||
font-size: calc(var(--fsD));
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
div.main > div.head form.menu button.selected h3
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
div.main > div.head form.menu button i
|
||||
{
|
||||
font-size: calc(var(--fsIB));
|
||||
font-size: calc(var(--fsIC));
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
div.main > div.head form.menu button:hover h3
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
|
|
@ -1401,41 +1421,13 @@ div.main > div.head form.menu button.highlight
|
|||
border: 1px dotted var(--pal-BE);
|
||||
}
|
||||
|
||||
/*** rooms search ***/
|
||||
.ircd .rooms
|
||||
div.main > div.head form.search
|
||||
{
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-flow: column nowrap;
|
||||
align-self: stretch;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
padding: 10px 10px 10px 10px;
|
||||
}
|
||||
|
||||
/*** rooms search ***/
|
||||
.ircd .rooms
|
||||
div.main > div.head form.search.selected
|
||||
{
|
||||
background-color: var(--pal-AC);
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
div.main > div.head form.search input
|
||||
{
|
||||
padding: 5px 10px 5px 10px;
|
||||
margin: 5px 0px 1px 0px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/*** rooms list ***/
|
||||
.ircd .rooms
|
||||
div.main div.list
|
||||
{
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
flex-flow: column nowrap;
|
||||
flex-grow: 1;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 0px 0px 0px;
|
||||
|
|
@ -1544,6 +1536,13 @@ div.main div.list div.item div.head h3.right
|
|||
width: 30ch;
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
div.main div.list div.item div.head h3.id
|
||||
{
|
||||
font-family: courier;
|
||||
font-size: calc(var(--fsD));
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
div.main div.list div.item div.head .left
|
||||
{
|
||||
|
|
@ -1638,7 +1637,8 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
background-color: var(--pal-AB) !important;
|
||||
}
|
||||
|
||||
.ircd .rooms .main .list .item div.info
|
||||
.ircd .rooms
|
||||
div.main div.list div.item div.info
|
||||
{
|
||||
flex-grow: 10;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -1649,7 +1649,6 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
justify-content: center;
|
||||
padding: 0px 0px 0px 0px;
|
||||
background-color: var(--pal-DE);
|
||||
border-top: 1px solid var(--pal-AD);
|
||||
}
|
||||
|
||||
.ircd .rooms .main .list .item div.info > div.id,
|
||||
|
|
@ -1668,6 +1667,7 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
padding: 10px 10px 10px 10px;
|
||||
border-bottom: 1px solid var(--pal-DA);
|
||||
background-color: var(--pal-DD);
|
||||
justify-content: right;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
|
@ -1724,7 +1724,7 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 15px 10px 15px 10px;
|
||||
margin: 5px 10px 5px 10px;
|
||||
margin: 5px 5px 5px 5px;
|
||||
background-color: var(--pal-AD);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1749,6 +1749,44 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*** rooms search ***/
|
||||
.ircd .rooms
|
||||
div.main > form.search
|
||||
{
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-flow: column nowrap;
|
||||
align-self: stretch;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
margin: 10px 0px 0px 0px;
|
||||
border-radius: 0px;
|
||||
color: var(--pal-AC);
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
div.main > form.search.selected
|
||||
{
|
||||
background-color: var(--pal-AC);
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
div.main > form.search input
|
||||
{
|
||||
height: 24px;
|
||||
border-top: 1px solid var(--pal-AE);
|
||||
padding: 5px 10px 5px 10px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ircd .rooms
|
||||
div.main > form.search label
|
||||
{
|
||||
padding: 2px 3px 2px 3px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.ircd div.rooms div.current
|
||||
{
|
||||
flex-flow: column nowrap;
|
||||
|
|
@ -2557,56 +2595,21 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
flex-flow: column nowrap;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
background-color: var(--pal-AA);
|
||||
background-color: var(--pal-DE);
|
||||
border-left: 1px solid var(--pal-AA);
|
||||
border-top: 1px solid var(--pal-AD);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.ircd .room div.members > div,
|
||||
.ircd .room div.members > form,
|
||||
.ircd .room div.members > select
|
||||
{
|
||||
}
|
||||
|
||||
.ircd .room div.members form,
|
||||
.ircd .room div.members select
|
||||
{
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ircd .room div.members form input
|
||||
{
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ircd .room div.members form h6
|
||||
{
|
||||
display: flex;
|
||||
text-shadow: 0px 0px var(--pal-AE);
|
||||
}
|
||||
|
||||
.ircd .room div.members form.search
|
||||
{
|
||||
flex-flow: column nowrap;
|
||||
align-self: stretch;
|
||||
margin: 0px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.ircd .room div.members .search input
|
||||
{
|
||||
padding: 4px 2px 4px 2px;
|
||||
}
|
||||
|
||||
.ircd .room div.members div.menu
|
||||
{
|
||||
position: relative;
|
||||
flex-flow: row nowrap;
|
||||
align-items: stretch;
|
||||
margin: 5px 4px 5px 4px;
|
||||
padding: 5px 4px 5px 4px;
|
||||
background-color: var(--pal-AA);
|
||||
border-bottom: 1px solid var(--pal-AC);
|
||||
}
|
||||
|
||||
.ircd .room div.members .menu .item
|
||||
|
|
@ -2644,7 +2647,6 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
background-color: var(--pal-DE);
|
||||
border-top: 1px solid var(--pal-AD);
|
||||
}
|
||||
|
||||
.ircd .room div.members div.list .loading i
|
||||
|
|
@ -2962,6 +2964,33 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
outline: none;
|
||||
}
|
||||
|
||||
.ircd .room div.members form.search
|
||||
{
|
||||
position: relative;
|
||||
flex-flow: column nowrap;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
margin: 0px 0px 0px 0px;
|
||||
padding: 0px 0px 0px 0px;
|
||||
background-color: var(--pal-DE);
|
||||
}
|
||||
|
||||
.ircd .room div.members form.search label
|
||||
{
|
||||
padding: 2px 4px 2px 4px;
|
||||
align-self: flex-end;
|
||||
color: var(--pal-AC);
|
||||
}
|
||||
|
||||
.ircd .room div.members form.search input
|
||||
{
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--pal-AE);
|
||||
padding: 5px 10px 5px 10px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main room inner content
|
||||
|
|
|
|||
|
|
@ -509,15 +509,17 @@ mc.io.request.error = function(event)
|
|||
xhr.statusText,
|
||||
|
||||
status:
|
||||
xhr.status != 0? xhr.status : "Client Side",
|
||||
xhr.status != 0? xhr.status : "client side",
|
||||
|
||||
m:
|
||||
xhr.responseType == "json"? xhr.response : undefined,
|
||||
|
||||
message:
|
||||
!empty(this.reason)? this.reason:
|
||||
response && xhr.responseType == "text"? response:
|
||||
"Unknown error. There may be a network connectivity problem.",
|
||||
!empty(this.reason)?
|
||||
this.reason:
|
||||
response && xhr.responseType == "text"?
|
||||
response:
|
||||
"There may be a network connectivity problem.",
|
||||
|
||||
request_stack:
|
||||
this.stack,
|
||||
|
|
|
|||
|
|
@ -205,6 +205,7 @@ mc.main.fault["M_MISSING_TOKEN"] = async function(error)
|
|||
}
|
||||
|
||||
mc.main.on_logout();
|
||||
mc.ng.apply();
|
||||
return false;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -66,6 +66,18 @@ mc.opts =
|
|||
// Quick setting to debug incoming sync messages on the console
|
||||
sync_debug: 10,
|
||||
|
||||
// Option for how events are ordered on the timeline
|
||||
//
|
||||
// 0: no ordering / receive ordering - events are appended as they are
|
||||
// received.
|
||||
//
|
||||
// 1: client ordering - best effort is made to order events based on their
|
||||
// references to other events, falling back on timestamps or other hints.
|
||||
//
|
||||
// 2: client fallback ordering - events are ordered based on their
|
||||
// timestamp.
|
||||
ordering: true,
|
||||
|
||||
account_data:
|
||||
{
|
||||
key: "ircd_storage",
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ mc.rooms.menu["JOINED"].click = function($event)
|
|||
|
||||
mc.rooms.menu["LEFT"] =
|
||||
{
|
||||
order: 4,
|
||||
order: 2,
|
||||
icon: "fa-thumbs-down",
|
||||
selected: () => mc.rooms.mode == "LEFT",
|
||||
};
|
||||
|
|
@ -120,14 +120,14 @@ mc.rooms.menu["LEFT"].click = function($event)
|
|||
|
||||
mc.rooms.menu["FEED"] =
|
||||
{
|
||||
order: 2,
|
||||
order: 3,
|
||||
icon: "fa-newspaper-o",
|
||||
selected: () => mc.rooms.mode == "FEED",
|
||||
};
|
||||
|
||||
mc.rooms.menu["CREATE"] =
|
||||
{
|
||||
order: 3,
|
||||
order: 4,
|
||||
icon: "fa-lightbulb-o",
|
||||
selected: () => mc.rooms.mode == "CREATE",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ mc.rooms.info.menu =
|
|||
mc.rooms.info.menu["JOIN"].click = async function($event, room_id)
|
||||
{
|
||||
if(!room_id)
|
||||
room_id = mc.rooms.search.value;
|
||||
room_id = mc.rooms.search.value.split(" ")[0];
|
||||
|
||||
if(!(room_id in mc.rooms))
|
||||
mc.rooms[room_id] = new mc.room({room_id: room_id});
|
||||
|
|
|
|||
|
|
@ -149,7 +149,10 @@ mc.rooms.search.by = {};
|
|||
|
||||
mc.rooms.search.by.id = async function(room_id)
|
||||
{
|
||||
let summary = await mc.rooms.search.by.state(room_id, undefined, undefined);
|
||||
let event_id = room_id.split(' ')[1];
|
||||
room_id = room_id.split(' ')[0];
|
||||
|
||||
let summary = await mc.rooms.search.by.state(room_id, undefined, undefined, event_id);
|
||||
return [mc.rooms.get(summary)];
|
||||
};
|
||||
|
||||
|
|
@ -179,9 +182,17 @@ mc.rooms.search.by.alias = async function(alias)
|
|||
}
|
||||
};
|
||||
|
||||
mc.rooms.search.by.state = async function(room_id, type = undefined, state_key = undefined)
|
||||
mc.rooms.search.by.state = async function(room_id, type = undefined, state_key = undefined, event_id = undefined)
|
||||
{
|
||||
mc.rooms.search.request = mc.m.rooms.state.get(room_id, type, state_key); try
|
||||
let opts =
|
||||
{
|
||||
query:
|
||||
{
|
||||
event_id: event_id
|
||||
},
|
||||
};
|
||||
|
||||
mc.rooms.search.request = mc.m.rooms.state.get(room_id, type, state_key, opts); try
|
||||
{
|
||||
let summary = await mc.rooms.search.request.response;
|
||||
return [mc.rooms.get(summary)];
|
||||
|
|
|
|||
|
|
@ -46,7 +46,10 @@ mc.rooms.sync["join"] = function(room_id, data)
|
|||
|
||||
let room = mc.rooms[room_id];
|
||||
if(!(room_id in mc.rooms.joined))
|
||||
{
|
||||
mc.rooms.joined[room.id] = room;
|
||||
mc.rooms.menu["JOINED"].click();
|
||||
}
|
||||
|
||||
room.sync(data, "join");
|
||||
if((mc.rooms.current.empty() && empty(mc.session.rooms.history))
|
||||
|
|
@ -55,6 +58,9 @@ mc.rooms.sync["join"] = function(room_id, data)
|
|||
mc.rooms.current.add(room.id);
|
||||
room.scroll.to.bottom();
|
||||
}
|
||||
|
||||
if(!mc.rooms.current_mode)
|
||||
mc.rooms.menu["JOINED"].click();
|
||||
};
|
||||
|
||||
mc.rooms.sync["invite"] = function(room_id, data)
|
||||
|
|
|
|||
|
|
@ -155,6 +155,15 @@ type="text/ng-template"
|
|||
ng-include="'ircd_rooms_list'"
|
||||
>
|
||||
</div>
|
||||
<form
|
||||
id="charybdis_rooms_search"
|
||||
class="search"
|
||||
ng-include="'ircd_rooms_search'"
|
||||
ng-class="
|
||||
{
|
||||
selected: mc.rooms.mode == 'SEARCH',
|
||||
}">
|
||||
</form>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
@ -175,15 +184,6 @@ type="text/ng-template"
|
|||
ng-include="'ircd_rooms_menu'"
|
||||
>
|
||||
</form>
|
||||
<form
|
||||
id="charybdis_rooms_search"
|
||||
class="search"
|
||||
ng-include="'ircd_rooms_search'"
|
||||
ng-class="
|
||||
{
|
||||
selected: mc.rooms.mode == 'SEARCH',
|
||||
}">
|
||||
</form>
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -224,17 +224,6 @@ type="text/ng-template"
|
|||
id="ircd_rooms_search"
|
||||
type="text/ng-template"
|
||||
>
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
ng-model="mc.rooms.search.value"
|
||||
ng-model-options="{debounce: 100}"
|
||||
ng-change="mc.rooms.search.on.change($event);"
|
||||
ng-keypress="mc.rooms.search.on.keypress($event);"
|
||||
ng-focus="mc.rooms.search.on.focus($event);"
|
||||
ng-blur="mc.rooms.search.on.blur($event);"
|
||||
/>
|
||||
<label
|
||||
class="h6"
|
||||
>
|
||||
|
|
@ -246,6 +235,17 @@ type="text/ng-template"
|
|||
{{ mc.rooms.search.feedback }}
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
ng-model="mc.rooms.search.value"
|
||||
ng-model-options="{debounce: 100}"
|
||||
ng-change="mc.rooms.search.on.change($event);"
|
||||
ng-keypress="mc.rooms.search.on.keypress($event);"
|
||||
ng-focus="mc.rooms.search.on.focus($event);"
|
||||
ng-blur="mc.rooms.search.on.blur($event);"
|
||||
/>
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -547,11 +547,6 @@ type="text/ng-template"
|
|||
ng-include="'ircd_room_members_menu'"
|
||||
>
|
||||
</div>
|
||||
<form
|
||||
class="search"
|
||||
ng-include="'ircd_room_members_search'"
|
||||
>
|
||||
</form>
|
||||
<div
|
||||
class="list"
|
||||
ang-scroll="members.scroll($event)"
|
||||
|
|
@ -559,12 +554,11 @@ type="text/ng-template"
|
|||
ircd-catch
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="invite member"
|
||||
ng-show="members.filter == 'invite'"
|
||||
ng-include="'ircd_room_members_invite'"
|
||||
<form
|
||||
class="search"
|
||||
ng-include="'ircd_room_members_search'"
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -604,16 +598,25 @@ type="text/ng-template"
|
|||
id="ircd_room_members_search"
|
||||
type="text/ng-template"
|
||||
>
|
||||
<label
|
||||
class="h6"
|
||||
ng-hide="members.filter == 'invite'"
|
||||
>
|
||||
SEARCH MEMBERS
|
||||
</label>
|
||||
|
||||
<label
|
||||
class="h6"
|
||||
ng-show="members.filter == 'invite'"
|
||||
>
|
||||
INVITE MEMBER
|
||||
</label>
|
||||
|
||||
<input
|
||||
name="pattern"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="h6"
|
||||
>
|
||||
SEARCH MEMBERS
|
||||
</h6>
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue