Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX improvements + Move to Vue 3 #97

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

UX improvements + Move to Vue 3 #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5969a72
Vue 3 + improvements
Troplo Jan 16, 2024
1e6644a
Improve show errors
Troplo Jan 16, 2024
6433e52
Fix placement of show errors button
Troplo Jan 16, 2024
ab0f935
Make border-radius consistent for auto-scroll
Troplo Jan 16, 2024
7735df0
force autoscroll with ESC
Troplo Jan 16, 2024
6782639
Add v-memo to messages to prevent unnecessary re-renders
Troplo Jan 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion client/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ nav.navbar {
}
#settings {
height: calc(100dvh - var(--nav-height));
overflow: scroll;
overflow: auto;
background-color: var(--light-gray-accent);
}

Expand Down Expand Up @@ -74,3 +74,14 @@ nav.navbar {
tr.identical-bot {
background-color: var(--light-gray-accent);
}

.auto-scroll {
border-radius: 4px 4px 0 0;
cursor: pointer;
background: #F5F5F5FF;
padding: 4px 4px 4px 16px;
}

.auto-scroll-text {
padding-left: 16px;
}
88 changes: 63 additions & 25 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NeCSuS</title>

<script src="client/js/marked.min.js"></script>
<script src="client/js/marked-plaintext.js"></script>
<script src="client/js/timeago.min.js"></script>
<script src="/client/js/marked.min.js"></script>
<script src="/client/js/marked-plaintext.js"></script>
<script src="/client/js/timeago.min.js"></script>

<link rel="apple-touch-icon" sizes="180x180" href="client/static/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="client/static/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="client/static/favicon-16x16.png">
<link rel="manifest" href="client/static/site.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="/client/static/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/client/static/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/client/static/favicon-16x16.png">
<link rel="manifest" href="/client/static/site.webmanifest">


<script src="client/js/vue.js"></script>
<script src="/client/js/vue.js"></script>

<link rel="stylesheet" type="text/css" href="client/css/bulma.css">
<link rel="stylesheet" type="text/css" href="client/css/index.css">
<link rel="stylesheet" type="text/css" href="/client/css/bulma.css">
<link rel="stylesheet" type="text/css" href="/client/css/index.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<script>
Expand All @@ -40,7 +40,7 @@
<body>
<div id="necsus">
<nav class="navbar is-info necsus-nav" role="navigation" aria-label="main navigation">
<div class="navbar-brand is-size-4">
<div class="navbar-brand is-size-4 is-justify-content-space-between">
<p class="navbar-item">
<a class="has-text-white pr-1" href="/">NeCSuS</a>
<span id="room-name" class="px-1" v-if="!lectureMode">{{ room }}</span>
Expand All @@ -51,12 +51,23 @@
&nbsp; &nbsp; &nbsp;
</span>
</p>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="is-flex">
<a role="button"
class="navbar-item is-hidden-desktop is-hoverable is-unselectable"
@click="settings.open = !settings.open"
aria-label="settings"
aria-expanded="false"
data-target="settingsMenu">
<i class="material-icons has-text-white">settings</i>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</div>

<div class="navbar-menu" id="navMenu">
<!-- Left part of navbar -->
<div class="navbar-start"></div>
Expand All @@ -71,7 +82,7 @@
<a class="navbar-item" target="_blank" href="https://github.com/ncss/necsus/blob/master/README.md">NeCSuS README</a>
</div>
</div>
<a class="navbar-item" @click="settings.open = !settings.open">Settings</a>
<a class="navbar-item is-hidden-mobile" @click="settings.open = !settings.open">Settings</a>
</div>
</div>
</nav>
Expand All @@ -94,12 +105,15 @@
:class="messageClass(message)"
v-for="message in displayMessages"
:key="message.id"
v-memo="[message.text, message.errors, message.showErrors, message.state, message.showState, message.image, message.media]"
>
<div class="card-content">
<div class="content">
<div class="is-flex is-justify-content-space-between mb-2">
<span class="is-size-6 has-text-weight-bold mr-2 author">{{ message.author }}</span>
<span class="is-size-6 has-text-grey-light when">{{ message.displayTime }}</span>
<div :id="`message-${message.id}-info`" class="message-info is-flex">
<span class="has-text-grey-light when">{{ message.displayTime }}</span>
</div>
</div>
<div v-html="message.text"></div>
<div v-if="message.image" class="image">
Expand All @@ -125,15 +139,39 @@
<div
v-if="message.state != null && message.showState"
class="state"
>
>
<code> {{ message.state }} </code>
</div>
<div
v-if="message.errors && message.errors.length > 0"
class="state-show-toggle is-size-7 has-text-weight-light"
>
<a style="color: red" @click="message.showErrors = !message.showErrors" href="#">{{message.showErrors ? 'hide' : 'show'}} JavaScript errors</a>
</div>
<template v-if="message.errors && message.showErrors">
<div class="errors">
<ul>
<li v-for="error in message.errors" style="white-space: pre-wrap">
<code>{{ error }}</code>
</li>
</ul>
</div>
<small>For more information, you can open the browser DevTools by right clicking > Inspect > Console tab</small>
</template>
</div>
</div>
</div>
</div>
<div
@click="autoScroll(true)"
v-if="preventAutoScroll"
class="is-unselectable is-flex is-align-items-center auto-scroll"
>
<i class="material-icons">arrow_downward</i>
<span class="auto-scroll-text">Jump to bottom</span>
</div>

<div class="px-2 pt-4">
<div>
<div id="new-message" class="field has-addons pb-0">
<p class="control">
<button
Expand Down Expand Up @@ -203,15 +241,15 @@
</div>
<div class="field" v-if="!clearRoomShow">
<div class="control">
<button id="clear-room" class="button is-outlined is-fullwidth" v-if="!clearRoomShow" @click="clearRoomShow = true">
Clear room
<button id="clear-room" class="button is-fullwidth is-danger" v-if="!clearRoomShow" @click="clearRoomShow = true" title="Clear room messages... (Confirmation required)">
Clear room messages...
</button>
</div>
</div>
<div class="field" v-if="clearRoomShow">
<div class="field has-addons is-horizontal">
<p class="control is-expanded">
<input class="input" id="confirm-clear-room-input" name="confirm-clear-room" v-model="clearRoomConfirm">
<input @keydown.enter="clearRoom()" class="input" id="confirm-clear-room-input" name="confirm-clear-room" v-model="clearRoomConfirm">
</p>
<div class="control">
<button
Expand Down Expand Up @@ -268,7 +306,7 @@
v-model="bot.name"
@change="submitBot(bot)"
/>
<button @click="removeBot(bot)" class="button ml-2 is-danger">
<button @click="removeBot(bot)" class="button ml-2 is-danger" title="Delete Bot">
<i class="material-icons">delete</i>
</button>
</div>
Expand Down Expand Up @@ -469,6 +507,6 @@ <h2 class="is-size-4">New Bots</h2>
</div>
</div>

<script src="client/necsus.js"></script>
<script src="/client/necsus.js"></script>
</body>
</html>
Loading