mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-05-23 17:19:37 +02:00
Merge pull request #22717 from overleaf/rd-migrate-admin-bootstrap5
[web] Migrate the admin page to Bootstrap 5 GitOrigin-RevId: 8d283f7ce4a7d73f033a69a4c075311ff756f06a
This commit is contained in:
Rebeka Dekany
@@ -1,7 +1,8 @@
|
||||
mixin bookmarkable-tabset-header(id, title, active)
|
||||
li(role="presentation" class=(active ? 'active' : ''))
|
||||
li(role="presentation")
|
||||
a(
|
||||
href='#' + id
|
||||
class=(active ? 'active' : '')
|
||||
aria-controls=id
|
||||
role="tab"
|
||||
data-toggle="tab"
|
||||
|
||||
@@ -1,99 +1,105 @@
|
||||
extends ../layout-marketing
|
||||
include ../_mixins/bookmarkable_tabset
|
||||
|
||||
block vars
|
||||
- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
|
||||
|
||||
block content
|
||||
.content.content-alt#main-content
|
||||
.container
|
||||
.row
|
||||
.col-xs-12
|
||||
.col-sm-12
|
||||
.card
|
||||
.page-header
|
||||
h1 Admin Panel
|
||||
div(data-ol-bookmarkable-tabset)
|
||||
ul.nav.nav-tabs(role="tablist")
|
||||
+bookmarkable-tabset-header('system-messages', 'System Messages', true)
|
||||
+bookmarkable-tabset-header('open-sockets', 'Open Sockets')
|
||||
+bookmarkable-tabset-header('open-close-editor', 'Open/Close Editor')
|
||||
if hasFeature('saas')
|
||||
+bookmarkable-tabset-header('tpds', 'TPDS/Dropbox Management')
|
||||
.card-body
|
||||
.page-header
|
||||
h1 Admin Panel
|
||||
div(data-ol-bookmarkable-tabset)
|
||||
.nav-tabs-container
|
||||
ul.nav.nav-tabs.d-flex(role="tablist")
|
||||
+bookmarkable-tabset-header('system-messages', 'System Messages', true)
|
||||
+bookmarkable-tabset-header('open-sockets', 'Open Sockets')
|
||||
+bookmarkable-tabset-header('open-close-editor', 'Open/Close Editor')
|
||||
if hasFeature('saas')
|
||||
+bookmarkable-tabset-header('tpds', 'TPDS/Dropbox Management')
|
||||
|
||||
.tab-content
|
||||
.tab-pane.active(
|
||||
role="tabpanel"
|
||||
id='system-messages'
|
||||
)
|
||||
each message in systemMessages
|
||||
.alert.alert-info.row-spaced #{message.content}
|
||||
hr
|
||||
form(method='post', action='/admin/messages')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
.form-group
|
||||
label(for="content")
|
||||
input.form-control(name="content", type="text", placeholder="Message…", required)
|
||||
button.btn.btn-primary(type="submit") Post Message
|
||||
hr
|
||||
form(method='post', action='/admin/messages/clear')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
button.btn.btn-danger(type="submit") Clear all messages
|
||||
|
||||
.tab-pane(
|
||||
role="tabpanel"
|
||||
id='open-sockets'
|
||||
)
|
||||
.row-spaced
|
||||
ul
|
||||
each agents, url in openSockets
|
||||
li #{url} - total : #{agents.length}
|
||||
ul
|
||||
each agent in agents
|
||||
li #{agent}
|
||||
|
||||
.tab-pane(
|
||||
role="tabpanel"
|
||||
id='open-close-editor'
|
||||
)
|
||||
if hasFeature('saas')
|
||||
| The "Open/Close Editor" feature is not available in SAAS.
|
||||
else
|
||||
.row-spaced
|
||||
form(method='post',action='/admin/closeEditor')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
button.btn.btn-danger(type="submit") Close Editor
|
||||
p.small Will stop anyone opening the editor. Will NOT disconnect already connected users.
|
||||
|
||||
.row-spaced
|
||||
form(method='post',action='/admin/disconnectAllUsers')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
button.btn.btn-danger(type="submit") Disconnect all users
|
||||
p.small Will force disconnect all users with the editor open. Make sure to close the editor first to avoid them reconnecting.
|
||||
|
||||
.row-spaced
|
||||
form(method='post',action='/admin/openEditor')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
button.btn.btn-danger(type="submit") Reopen Editor
|
||||
p.small Will reopen the editor after closing.
|
||||
|
||||
if hasFeature('saas')
|
||||
.tab-pane(
|
||||
role="tabpanel"
|
||||
id='tpds'
|
||||
)
|
||||
h3 Flush project to TPDS
|
||||
.row
|
||||
form.col-xs-6(method='post',action='/admin/flushProjectToTpds')
|
||||
.tab-content
|
||||
.tab-pane.active(
|
||||
role="tabpanel"
|
||||
id='system-messages'
|
||||
)
|
||||
each message in systemMessages
|
||||
ul.system-messages
|
||||
li.system-message.row-spaced #{message.content}
|
||||
hr
|
||||
form(method='post', action='/admin/messages')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
.form-group
|
||||
label(for='project_id') project_id
|
||||
input.form-control(type='text', name='project_id', placeholder='project_id', required)
|
||||
.form-group
|
||||
button.btn-primary.btn(type='submit') Flush
|
||||
hr
|
||||
h3 Poll Dropbox for user
|
||||
.row
|
||||
form.col-xs-6(method='post',action='/admin/pollDropboxForUser')
|
||||
label.form-label(for="content")
|
||||
input.form-control(name="content", type="text", placeholder="Message…", required)
|
||||
button.btn.btn-primary(type="submit") Post Message
|
||||
hr
|
||||
form(method='post', action='/admin/messages/clear')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
.form-group
|
||||
label(for='user_id') user_id
|
||||
input.form-control(type='text', name='user_id', placeholder='user_id', required)
|
||||
.form-group
|
||||
button.btn-primary.btn(type='submit') Poll
|
||||
button.btn.btn-danger(type="submit") Clear all messages
|
||||
|
||||
.tab-pane(
|
||||
role="tabpanel"
|
||||
id='open-sockets'
|
||||
)
|
||||
.row-spaced
|
||||
ul
|
||||
each agents, url in openSockets
|
||||
li #{url} - total : #{agents.length}
|
||||
ul
|
||||
each agent in agents
|
||||
li #{agent}
|
||||
|
||||
.tab-pane(
|
||||
role="tabpanel"
|
||||
id='open-close-editor'
|
||||
)
|
||||
if hasFeature('saas')
|
||||
| The "Open/Close Editor" feature is not available in SAAS.
|
||||
else
|
||||
.row-spaced
|
||||
form(method='post',action='/admin/closeEditor')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
button.btn.btn-danger(type="submit") Close Editor
|
||||
p.small Will stop anyone opening the editor. Will NOT disconnect already connected users.
|
||||
|
||||
.row-spaced
|
||||
form(method='post',action='/admin/disconnectAllUsers')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
button.btn.btn-danger(type="submit") Disconnect all users
|
||||
p.small Will force disconnect all users with the editor open. Make sure to close the editor first to avoid them reconnecting.
|
||||
|
||||
.row-spaced
|
||||
form(method='post',action='/admin/openEditor')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
button.btn.btn-danger(type="submit") Reopen Editor
|
||||
p.small Will reopen the editor after closing.
|
||||
|
||||
if hasFeature('saas')
|
||||
.tab-pane(
|
||||
role="tabpanel"
|
||||
id='tpds'
|
||||
)
|
||||
h3 Flush project to TPDS
|
||||
.row
|
||||
form.col-xs-6(method='post',action='/admin/flushProjectToTpds')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
.form-group
|
||||
label.form-label(for='project_id') project_id
|
||||
input.form-control(type='text', name='project_id', placeholder='project_id', required)
|
||||
.form-group
|
||||
button.btn-primary.btn(type='submit') Flush
|
||||
hr
|
||||
h3 Poll Dropbox for user
|
||||
.row
|
||||
form.col-xs-6(method='post',action='/admin/pollDropboxForUser')
|
||||
input(name="_csrf", type="hidden", value=csrfToken)
|
||||
.form-group
|
||||
label.form-label(for='user_id') user_id
|
||||
input.form-control(type='text', name='user_id', placeholder='user_id', required)
|
||||
.form-group
|
||||
button.btn-primary.btn(type='submit') Poll
|
||||
|
||||
@@ -57,3 +57,51 @@
|
||||
--navbar-hamburger-submenu-item-hover-color: var(--navbar-link-color);
|
||||
--navbar-hamburger-submenu-item-hover-bg: var(--navbar-link-hover-bg);
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
display: block;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: var(--spacing-04) var(--spacing-06);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: var(--bg-info-01);
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state sets text to gray and nukes hover/tab effects
|
||||
&.disabled > a {
|
||||
color: var(--content-disabled);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--content-disabled);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open dropdowns
|
||||
.open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--bg-info-01);
|
||||
border-color: var(--link-ui);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,3 +78,49 @@
|
||||
[data-ol-bookmarkable-tabset] .tab-pane {
|
||||
scroll-margin-top: 120px;
|
||||
}
|
||||
|
||||
[data-ol-bookmarkable-tabset] {
|
||||
.nav-tabs-container {
|
||||
.nav-tabs {
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
|
||||
// Make the list-items overlay the bottom border
|
||||
margin-bottom: -1px;
|
||||
|
||||
// Actual tabs (as links)
|
||||
> a {
|
||||
color: var(--content-secondary);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
|
||||
padding: var(--spacing-04);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: pointer;
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
// Active state, and its :hover to override normal :hover
|
||||
> a.active {
|
||||
color: var(--content-primary);
|
||||
background-color: var(--bg-light-primary);
|
||||
border: 1px solid var(--border-divider);
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
padding: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -189,54 +189,6 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
display: block;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: var(--spacing-04) var(--spacing-06);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: var(--bg-info-01);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state sets text to gray and nukes hover/tab effects
|
||||
&.disabled > a {
|
||||
color: var(--content-disabled);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--content-disabled);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open dropdowns
|
||||
.open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--bg-info-01);
|
||||
border-color: var(--link-ui);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-spinner-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user