Compare commits

..

3 commits

Author SHA1 Message Date
hippoz
a884c02f29
improve attachment download card 2023-08-09 23:33:19 +03:00
hippoz
aa2085050a
improve message actions 2023-08-09 23:23:47 +03:00
hippoz
97e5bfbe5c
resolve all pending rpc requests on gateway disconnect 2023-08-09 23:23:33 +03:00
4 changed files with 36 additions and 21 deletions

View file

@ -32,9 +32,8 @@
.message { .message {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 4px 4px 4px var(--space-xs); padding: 6px 6px 6px var(--space-xs);
margin-top: 16px; margin-top: 14px;
overflow-x: hidden;
word-wrap: break-word; word-wrap: break-word;
position: relative; position: relative;
} }
@ -121,13 +120,15 @@
.message-actions { .message-actions {
display: flex; display: flex;
position: absolute; position: absolute;
top: 3px; top: -6px;
right: 12px; right: 12px;
z-index: 1; z-index: 1;
background-color: var(--background-color-1);
border-radius: var(--radius-sm);
} }
.message-actions .icon-button { .message-actions .icon-button {
margin: 0; margin: 7px;
padding: 0; padding: 0;
} }
@ -190,14 +191,14 @@
{/if} {/if}
<div class="message-actions"> <div class="message-actions">
<button class="icon-button material-icons-outlined" on:click="{ reply }" aria-label="Reply to Message">
reply
</button>
{#if message._editable} {#if message._editable}
<button class="icon-button material-icons-outlined" on:click="{ () => overlayStore.push(OverlayType.EditMessage, { message }) }" aria-label="Edit Message"> <button class="icon-button material-icons-outlined" on:click="{ () => overlayStore.push(OverlayType.EditMessage, { message }) }" aria-label="Edit Message">
edit edit
</button> </button>
{/if} {/if}
<button class="icon-button material-icons-outlined" on:click="{ reply }" aria-label="Reply to Message">
reply
</button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -48,7 +48,10 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
flex-wrap: wrap;
padding: var(--space-norm); padding: var(--space-norm);
padding-top: var(--space-sm);
padding-bottom: var(--space-sm);
border-radius: 9999px; border-radius: 9999px;
background-color: var(--background-color-0); background-color: var(--background-color-0);
} }
@ -68,13 +71,20 @@
} }
.attachment-filename { .attachment-filename {
color: var(--foreground-color-3); color: var(--foreground-color-2);
margin-right: 6px; margin-right: var(--space-md);
} }
.attachment-card .icon-button { .attachment-card .icon-button {
margin-left: auto; margin-left: auto;
} }
.attachment-card .download {
background: var(--purple-1);
border-radius: 9999px;
padding: var(--space-xs);
color: var(--foreground-color-1);
}
</style> </style>
@ -86,7 +96,7 @@
{:else if renderAs === AttachmentRenderAs.DownloadableFile} {:else if renderAs === AttachmentRenderAs.DownloadableFile}
<div class="attachment attachment-card"> <div class="attachment attachment-card">
<div class="attachment-filename">{ attachment.file_name }</div> <div class="attachment-filename">{ attachment.file_name }</div>
<a class="icon-button material-icons-outlined" href="{ attachmentUrl(attachment.file) }" target="_blank">download</a> <a class="icon-button material-icons-outlined download" href="{ attachmentUrl(attachment.file) }" target="_blank">download</a>
</div> </div>
{:else} {:else}
<div class="attachment attachment-card">Couldn't render attachment</div> <div class="attachment attachment-card">Couldn't render attachment</div>

View file

@ -13,6 +13,16 @@ export const GatewayErrors = {
TOO_MANY_SESSIONS: 4008, TOO_MANY_SESSIONS: 4008,
}; };
// this should be in request.js, but putting it here avoids a circular dependency
export const RequestStatus = {
OK: 0,
NETWORK_EXCEPTION: 1,
JSON_EXCEPTION: 2,
FAILURE_STATUS: 3,
RPC_ERROR: 4,
INVARIANT_RPC_RESPONSE_COUNT: 5,
};
export const GatewayPayloadType = { export const GatewayPayloadType = {
Hello: 0, Hello: 0,
Authenticate: 1, // client Authenticate: 1, // client
@ -148,6 +158,9 @@ export default {
clearInterval(this.heartbeatInterval); clearInterval(this.heartbeatInterval);
} }
this.waitingSerials.forEach((resolve) => resolve({ status: RequestStatus.NETWORK_EXCEPTION }));
this.waitingSerials.clear();
if (code === GatewayErrors.BAD_AUTH) { if (code === GatewayErrors.BAD_AUTH) {
this.dispatch(GatewayEventType.BadAuth, 1); this.dispatch(GatewayEventType.BadAuth, 1);
if (this.reconnectTimeout) if (this.reconnectTimeout)

View file

@ -1,4 +1,4 @@
import gateway from "./gateway"; import gateway, { RequestStatus } from "./gateway";
import { apiRoute, getItem } from "./storage"; import { apiRoute, getItem } from "./storage";
const method = (methodId, requiresAuthentication) => ({methodId, requiresAuthentication}); const method = (methodId, requiresAuthentication) => ({methodId, requiresAuthentication});
@ -43,15 +43,6 @@ export const RPCError = {
INTERNAL_ERROR: { code: 7003, message: "Sorry, we couldn't process this request (internal server error)" }, INTERNAL_ERROR: { code: 7003, message: "Sorry, we couldn't process this request (internal server error)" },
}; };
export const RequestStatus = {
OK: 0,
NETWORK_EXCEPTION: 1,
JSON_EXCEPTION: 2,
FAILURE_STATUS: 3,
RPC_ERROR: 4,
INVARIANT_RPC_RESPONSE_COUNT: 5,
};
export const RequestStatusToMessage = { export const RequestStatusToMessage = {
[RequestStatus.OK]: "", [RequestStatus.OK]: "",
[RequestStatus.NETWORK_EXCEPTION]: "We couldn't reach the server right now", [RequestStatus.NETWORK_EXCEPTION]: "We couldn't reach the server right now",