LogalDeveloper/owncast
0
Fork 0
Code Activity

Admin support for managing users (#245)

Browse Source 
* First pass at displaying user data in admin

* Hide chat blurb on home page if chat is disabled

* Hide sidebar chat section if chat is disabled

* Block/unblock user interface for https://github.com/owncast/owncast/issues/1096

* Simplify past display name handling

* Updates to reflect the api access token change

* Update paths

* Clean up the new access token page

* Fix linter

* Update linter workflow action

* Cleanup

* Fix exception rendering table row

* Commit next-env file that seems to be required with next 11

* chat refactor - admin adjustments (#250)

* add useragent parser; clean up some html;

* some ui changes
- use modal instead of popover to confirm block/unblock user
- update styles, table styles for consistency
- rename some user/chat labels in nav and content

* format user info modal a bit

* add some sort of mild treatment and delay while processing ban of users

* rename button to 'ban'

* add some notes

* Prettified Code!

* fix disableChat toggle for nav bar

* Support sorting the disabled user list

* Fix linter error around table sorting

* No longer restoring messages on unban so change message prompt

* Standardize on forbiddenUsername terminology

* The linter broke the webhooks page. Fixed it. Linter is probably pissed.

* Move chat welcome message to chat config

* Other submenus don't have icons so remove these ones

Co-authored-by: gingervitis <omqmail@gmail.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>
This commit is contained in:
Gabe Kangas
2021-07-19 22:02:02 -07:00
committed by GitHub
parent 4aac80196d
commit b10ba1dcc2
26 changed files with 8007 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
web/styles/ant-overrides.scss
View File

@@ -297,6 +297,14 @@ textarea.ant-input {
transition-delay: 0s;
transition-duration: 0.15s;
}
.ant-btn-dangerous {
color: var(--white-88);
border-color: var(--ant-error);
background-color: var(--purple-dark);
}
.ant-btn-sm {
font-size: 12px;
}
// ANT TABLE
.ant-table-thead > tr > th,
@@ -381,6 +389,13 @@ textarea.ant-input {
border-color: var(--white-50);
}
.ant-modal-confirm-body {
.ant-modal-confirm-title,
.ant-modal-confirm-content {
color: var(--default-text-color);
}
}
// SELECT
.ant-select-dropdown {
background-color: var(--black);
@@ -473,14 +488,29 @@ textarea.ant-input {
// ANT POPOVER
.ant-popover-inner {
background-color: var(--gray);
background-color: var(--popover-base-color);
}
.ant-popover-message,
.ant-popover-inner-content {
color: var(--default-text-color);
}
.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow {
border-color: var(--gray);
border-color: var(--popover-base-color);
}
.ant-popover-arrow-content {
background-color: var(--popover-base-color);
}
// ANT TOOLTIP
.ant-tooltip {
font-size: 0.75em;
}
.ant-tooltip-inner {
color: var(--white);
}
.ant-tooltip-inner,
.ant-tooltip-arrow-content {
background-color: var(--tooltip-base-color);
}
// ANT TAGS

105
web/styles/chat.scss
View File

@@ -1,24 +1,7 @@
.chat-messages {
.ant-table-small .ant-table-selection-column {
width: 20px;
min-width: 20px;
}
.ant-table-tbody > tr > td {
transition: background-color 0.15s;
}
.ant-table-row.hidden {
.ant-table-cell {
color: var(--black-35)
}
@media (prefers-color-scheme: dark) {
.ant-table-cell {
color: var(--white-25);
}
}
}
.ant-table-cell {
font-size: 12px;
// Users, Chat views
.chat-messages {
.ant-table-cell {
&.name-col {
text-overflow: ellipsis;
overflow: hidden;
@@ -31,7 +14,7 @@
.message-contents {
overflow: auto;
max-height: 200px;
max-height: 200px;
img {
position: relative;
margin-top: -5px;
@@ -45,8 +28,8 @@
}
.bulk-editor {
margin: .5rem 0;
padding: .5rem;
margin: 0.5rem 0;
padding: 0.5rem;
border: 1px solid var(--textfield-border);
display: flex;
flex-direction: row;
@@ -60,16 +43,15 @@
}
.label {
font-size: .75rem;
font-size: 0.75rem;
color: var(--white-50);
margin-right: .5rem;
margin-right: 0.5rem;
}
button {
margin: 0 .2rem;
font-size: .75rem;
margin: 0 0.2rem;
font-size: 0.75rem;
}
}
}
.ant-table-filter-dropdown {
@@ -82,20 +64,20 @@
align-items: center;
flex-wrap: nowrap;
justify-content: flex-end;
transition: opacity .15s;
transition: opacity 0.15s;
.outcome-icon {
margin-right: .5rem;
margin-right: 0.5rem;
}
&.hidden {
opacity: .25;
opacity: 0.25;
&:hover {
opacity: 1;
}
}
.ant-btn {
.anticon {
opacity: .5;
opacity: 0.5;
}
&:hover {
.anticon {
@@ -104,6 +86,63 @@
}
}
.ant-btn-text:hover {
background-color: var(--black-35)
background-color: var(--black-35);
}
}
.blockuser-popover {
max-width: 400px;
}
.user-item-container {
// reset <button> properties
border: none;
background: none;
text-align: left;
padding: 0;
margin: 0;
cursor: pointer;
outline: none;
.display-name {
color: var(--white);
border-bottom: 1px dotted var(--white-50);
}
&:hover {
.display-name {
border-color: var(--white);
}
}
}
.user-details {
h5 {
color: var(--white);
}
.created-at {
font-size: 0.75em;
font-style: italic;
}
.connection-info {
font-size: 0.88em;
}
.previous-names-list {
font-size: 0.88em;
.user-name-item {
font-family: monospace;
}
.latest {
font-style: italic;
.user-name-item {
font-weight: bold;
font-style: normal;
color: var(--pink);
}
}
}
.ant-divider {
border-color: var(--white-25);
}
}
.block-user-button {
text-transform: capitalize;
}

36
web/styles/globals.scss
View File

@@ -106,3 +106,39 @@ input {
}
}
}
.table-container {
.ant-table-tbody > tr > td {
transition: background-color 0.15s;
}
.ant-table-tbody > tr.ant-table-row:hover > td {
background-color: var(--gray);
}
.ant-table-small {
.ant-table-cell {
font-size: 12px;
}
.ant-table-selection-column {
width: 20px;
min-width: 20px;
}
}
.ant-table-row.hidden {
.ant-table-cell {
color: var(--black-35);
}
@media (prefers-color-scheme: dark) {
.ant-table-cell {
color: var(--white-25);
}
}
}
.ant-table-cell {
&.actions-col {
text-align: right;
}
}
td.number-col {
text-align: right;
}
}

54
web/styles/variables.scss
View File

@@ -1,32 +1,32 @@
:root {
// colors
--white: rgba(255,255,255,1);
--white-15: rgba(255,255,255,.15);
--white-25: rgba(255,255,255,.25);
--white-35: rgba(255,255,255,.35);
--white-50: rgba(255,255,255,.5);
--white-75: rgba(255,255,255,.75);
--white-88: rgba(255,255,255,.88);
--white: rgba(255, 255, 255, 1);
--white-15: rgba(255, 255, 255, 0.15);
--white-25: rgba(255, 255, 255, 0.25);
--white-35: rgba(255, 255, 255, 0.35);
--white-50: rgba(255, 255, 255, 0.5);
--white-75: rgba(255, 255, 255, 0.75);
--white-88: rgba(255, 255, 255, 0.88);
--black: rgba(0,0,0,1);
--black-35: rgba(0,0,0,.35);
--black-50: rgba(0,0,0,.5);
--black-75: rgba(0,0,0,.75);
--black: rgba(0, 0, 0, 1);
--black-35: rgba(0, 0, 0, 0.35);
--black-50: rgba(0, 0, 0, 0.5);
--black-75: rgba(0, 0, 0, 0.75);
// owncast logo color family
--owncast-purple: rgba(120,113,255,1); // #7871FF;
--purple-dark: rgba(28,26,59,1); // #1c1a3b;//
--pink: rgba(201,139,254,1); // #D18BFE;
--blue: rgba(32,134,225,1); // #2086E1;
--owncast-purple: rgba(120, 113, 255, 1); // #7871FF;
--purple-dark: rgba(28, 26, 59, 1); // #1c1a3b;//
--pink: rgba(201, 139, 254, 1); // #D18BFE;
--blue: rgba(32, 134, 225, 1); // #2086E1;
// owncast purple variations
--owncast-purple-25: rgba(120,113,255,.25);
--owncast-purple-50: rgba(120,113,255,.5);
--owncast-purple-25: rgba(120, 113, 255, 0.25);
--owncast-purple-50: rgba(120, 113, 255, 0.5);
--gray-light: rgba(168,175,197,1);
--gray-medium: rgba(102,107,120,1);
--gray: rgba(51,53,60,1);
--gray-dark: rgba(23,24,27,1); // #17181b;
--gray-light: rgba(168, 175, 197, 1);
--gray-medium: rgba(102, 107, 120, 1);
--gray: rgba(51, 53, 60, 1);
--gray-dark: rgba(23, 24, 27, 1); // #17181b;
--online-color: #73dd3f;
--offline-color: #999;
@@ -34,8 +34,7 @@
--ant-error: #ff4d4f;
--ant-success: #52c41a;
--ant-warning: #faad14;
--ant-transition-duration: .15s;
--ant-transition-duration: 0.15s;
// ////////////////////////////////
--default-text-color: var(--white-88);
@@ -43,7 +42,7 @@
--default-link-color: var(--owncast-purple);
--container-bg-color: var(--gray-dark);
--container-bg-color-alt: var(--purple-dark);
--container-bg-color-alt: var(--purple-dark);
--container-border-radius: 4px;
--code-color: #9cdcfe;
@@ -55,7 +54,10 @@
--button-focused: var(--owncast-purple-50);
--textfield-border: var(--white-25);;
--textfield-border: var(--white-25);
--textfield-bg: var(--black);
//
--popover-base-color: var(--gray);
--tooltip-base-color: var(--gray-medium);
}