f7cloud-office: репозиторий с папкой f7cloud-office (browser, service)
This commit is contained in:
+105
@@ -0,0 +1,105 @@
|
||||
<main>
|
||||
<div class="container">
|
||||
<script>Admin.Overview(host);</script>
|
||||
|
||||
<h3 class="title is-3"><script>document.write(l10nstrings.strDashboard)</script></h3>
|
||||
|
||||
<div class="tile is-ancestor has-text-centered">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child has-text-centered">
|
||||
<p class="heading"><script>document.write(l10nstrings.strUsersOnline)</script></p>
|
||||
<p class="title" id="active_users_count">0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child has-text-centered">
|
||||
<p class="heading"><script>document.write(l10nstrings.strDocumentsOpen)</script></p>
|
||||
<p class="title" id="active_docs_count">0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child has-text-centered">
|
||||
<p class="heading"><script>document.write(l10nstrings.strMemoryConsumed)</script></p>
|
||||
<p class="title" id="mem_consumed">0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child has-text-centered">
|
||||
<p class="heading"><script>document.write(l10nstrings.strSentBytes)</script></p>
|
||||
<p class="title" id="sent_bytes">0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child has-text-centered">
|
||||
<p class="heading"><script>document.write(l10nstrings.strRecvBytes)</script></p>
|
||||
<p class="title" id="recv_bytes">0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child has-text-centered">
|
||||
<p class="heading"><script>document.write(l10nstrings.strServerUptime)</script></p>
|
||||
<p class="title" id="uptime">0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li id="tab-documents-open" class="is-active"><a><script>document.write(l10nstrings.strDocumentsOpen)</script></a></li>
|
||||
<li id="tab-users-online"><a><script>document.write(l10nstrings.strUsersOnline)</script></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="table-container is-fullwidth" id="tab-content-documents-opened" style="display:grid;">
|
||||
<table id="docview" class="table is-fullwidth is-striped is-hoverable is-bordered">
|
||||
<thead>
|
||||
<tr style="height:40px;">
|
||||
<th></th><!--This header doesn't need text, this column will hold session closer buttons.-->
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strWopihost)</script></th>
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strViewers)</script></th>
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strPid)</script></th>
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strDocument)</script></th>
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strMemoryConsumed)</script></th>
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strElapsedTime)</script></th>
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strIdleTime)</script></th>
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strModified)</script></th>
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strUploaded)</script></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="doclist"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-container is-fullwidth" id="tab-content-users-online" style="display:none;">
|
||||
<table id="userview" class="table is-bordered is-hoverable is-striped is-fullwidth">
|
||||
<thead>
|
||||
<tr style="height:40px;">
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strWopihost)</script></th>
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strUserName)</script></th>
|
||||
<th class="has-text-centered"><script>document.write(l10nstrings.strDocumentNumber)</script></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="userlist"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.getElementById('a-overwiew-mobile').classList.add('is-active');
|
||||
document.getElementById('a-overwiew-tablet').classList.add('is-active');
|
||||
|
||||
document.getElementById('tab-documents-open').onclick = function() {
|
||||
document.getElementById('tab-documents-open').className = 'is-active';
|
||||
document.getElementById('tab-users-online').className = '';
|
||||
document.getElementById('tab-content-documents-opened').style.display = 'grid';
|
||||
document.getElementById('tab-content-users-online').style.display = 'none';
|
||||
}
|
||||
|
||||
document.getElementById('tab-users-online').onclick = function() {
|
||||
document.getElementById('tab-users-online').className = 'is-active';
|
||||
document.getElementById('tab-documents-open').className = '';
|
||||
document.getElementById('tab-content-users-online').style.display = 'grid';
|
||||
document.getElementById('tab-content-documents-opened').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<main>
|
||||
<div class="container">
|
||||
<script>Admin.Analytics(host);</script>
|
||||
|
||||
<h3 class="title is-3"><script>document.write(l10nstrings.strAnalytics)</script></h3>
|
||||
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li id="tab-documents-open" class="is-active"><a id="button-memview" href="#memview"><script>document.write(l10nstrings.strMemoryGraph)</script></a></li>
|
||||
<li id="tab-users-online"><a id="button-cpuview" href="#cpuview"><script>document.write(l10nstrings.strCpuGraph)</script></a></li>
|
||||
<li id="tab-users-online"><a id="button-networkview" href="#networkview"><script>document.write(l10nstrings.strNetGraph)</script></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="memview" class="mtabs">
|
||||
<div class="graph-container">
|
||||
<div>
|
||||
<svg id="MemVisualisation" width="1010" height="510"></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cpuview" class="mtabs">
|
||||
<div class="graph-container">
|
||||
<div>
|
||||
<svg id="CpuVisualisation" width="1010" height="510"></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="networkview" class="mtabs">
|
||||
<div class="graph-container">
|
||||
<div>
|
||||
<svg id="NetVisualisation" width="1010" height="510"></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.getElementById('a-analytics-mobile').classList.add('is-active');
|
||||
document.getElementById('a-analytics-tablet').classList.add('is-active');
|
||||
|
||||
window.location.href += '#memview';
|
||||
|
||||
// Switching tabs is done by css rules. We will set "is-active" classes here.
|
||||
document.getElementById('button-memview').onclick = function() {
|
||||
document.getElementById('button-memview').parentNode.className = 'is-active';
|
||||
document.getElementById('button-cpuview').parentNode.className = '';
|
||||
document.getElementById('button-networkview').parentNode.className = '';
|
||||
}
|
||||
|
||||
document.getElementById('button-cpuview').onclick = function() {
|
||||
document.getElementById('button-memview').parentNode.className = '';
|
||||
document.getElementById('button-cpuview').parentNode.className = 'is-active';
|
||||
document.getElementById('button-networkview').parentNode.className = '';
|
||||
}
|
||||
|
||||
document.getElementById('button-networkview').onclick = function() {
|
||||
document.getElementById('button-memview').parentNode.className = '';
|
||||
document.getElementById('button-cpuview').parentNode.className = '';
|
||||
document.getElementById('button-networkview').parentNode.className = 'is-active';
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script>
|
||||
if (typeof brandProductName !== 'undefined') {l10nstrings.strProductName = brandProductName}
|
||||
document.title = l10nstrings.strProductName + ' - ' + l10nstrings.strAdminConsole;
|
||||
var host = (window.location.protocol === 'https:' ? 'wss://': 'ws://') + window.location.host + '%SERVICE_ROOT%/cool/adminws';
|
||||
if (routeToken) {
|
||||
host += '?RouteToken=' + routeToken
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="is-fullwidth has-text-white" style="height:62px;background-color:#17191E;line-height:50px;">
|
||||
<a style="margin-left:12px;color:#9D998D;"><script>document.write(l10nstrings.strProductName + ' - ' + l10nstrings.strAdminConsole)</script></a>
|
||||
<a style="margin-right:12px;color:#9D998D;" id="a-settings-tablet" href="adminSettings.html" class="is-hidden-mobile is-pulled-right add-routetoken"><script>document.write(l10nstrings.strSettings)</script></a>
|
||||
<div class="dropdown is-hoverable is-right is-pulled-right is-hidden-tablet" style="margin-right:12px;">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button has-text-white" aria-haspopup="true" aria-controls="dropdown-menu1" style="width:40px;background-color:#17191E;border:none;">
|
||||
<span>☰</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu1" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<div class="list is-hoverable" style="height:100%;">
|
||||
<a id="a-overwiew-mobile" class="list-item add-routetoken" href="admin.html"><script>document.write(l10nstrings.strOverview)</script></a>
|
||||
<a id="a-analytics-mobile" class="list-item add-routetoken" href="adminAnalytics.html"><script>document.write(l10nstrings.strAnalytics)</script></a>
|
||||
<a id="a-history-mobile" class="list-item add-routetoken" href="adminHistory.html"><script>document.write(l10nstrings.strHistory)</script></a>
|
||||
<a id="a-log-mobile" class="list-item add-routetoken" href="adminLog.html"><script>document.write(l10nstrings.strLog)</script></a>
|
||||
<a id="a-settingsmenu-mobile" class="list-item add-routetoken" href="adminSettings.html"><script>document.write(l10nstrings.strSettings)</script></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-fullwidth" style="height:calc(100vh - 62px);background-color: #F5F5F5;">
|
||||
<nav class="column is-hidden-mobile is-narrow" id="column-admin-panel" style="width:225px;">
|
||||
<div class="list is-hoverable" style="height:100%;">
|
||||
<a class="list-item" id="button-admin-panel-collapse" href="#">←</a>
|
||||
<a id="a-overwiew-tablet" class="list-item add-routetoken" href="admin.html"><script>document.write(l10nstrings.strOverview)</script></a>
|
||||
<a id="a-analytics-tablet" class="list-item add-routetoken" href="adminAnalytics.html"><script>document.write(l10nstrings.strAnalytics)</script></a>
|
||||
<a id="a-history-tablet" class="list-item add-routetoken" href="adminHistory.html"><script>document.write(l10nstrings.strHistory)</script></a>
|
||||
<a id="a-log-tablet" class="list-item add-routetoken" href="adminLog.html"><script>document.write(l10nstrings.strLog)</script></a>
|
||||
<a id="a-settingsmenu-tablet" class="list-item add-routetoken" href="adminSettings.html"><script>document.write(l10nstrings.strSettings)</script></a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="column is-narrow is-hidden-mobile" id="column-admin-panel-expand" style="width:70px;display:none;">
|
||||
<div class="list is-hoverable">
|
||||
<a class="list-item" id="button-admin-panel-expand" href="#">→</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<!--%MAIN_CONTENT%-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
if (routeToken) {
|
||||
// update href attributes
|
||||
var anchors = document.getElementsByClassName('add-routetoken');
|
||||
|
||||
for (var i = 0; i < anchors.length; i++) {
|
||||
var href = anchors[i].getAttribute('href');
|
||||
var updatedHref = href + '?RouteToken=' + routeToken;
|
||||
anchors[i].setAttribute('href', updatedHref);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script>
|
||||
if (typeof brandProductName !== 'undefined') { l10nstrings.strProductName = brandProductName }
|
||||
document.title = l10nstrings.strProductName + ' - ' + l10nstrings.strAdminConsole;
|
||||
var host = (window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host + '/controller/adminws';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.is-rounded {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.is-top-rounded {
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
|
||||
/* Set to scroll otherwise tablets can spill over into other cards*/
|
||||
.card {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Decrease left panel when on laptop */
|
||||
@media screen and (max-width: 1024px) {
|
||||
#column-admin-panel {
|
||||
width: 20% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide left panel before reaching mobile (there is no space) */
|
||||
@media screen and (max-width: 960px) {
|
||||
#column-admin-panel {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="is-fullwidth has-text-white" style="height:62px;background-color:#17191E;line-height:50px;">
|
||||
<a style="margin-left:12px;color:#9D998D;">
|
||||
<script>document.write(l10nstrings.strProductName + ' - ' + l10nstrings.strAdminConsole)</script>
|
||||
</a>
|
||||
<a style="margin-right:12px;color:#9D998D;" id="a-settings-tablet" href="adminClusterOverviewAbout.html"
|
||||
class="is-hidden-mobile is-pulled-right">
|
||||
<script>document.write(l10nstrings.strAbout)</script>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!--%MAIN_CONTENT%-->
|
||||
@@ -0,0 +1,21 @@
|
||||
<main>
|
||||
<div class="columns is-fullwidth" style="background-color: #F5F5F5; min-height: 100vh">
|
||||
<nav class="column is-hidden-mobile is-narrow" id="column-admin-panel" style="width:350px;">
|
||||
<div class="list is-hoverable" style="height:100%;">
|
||||
<a class="list-item" id="button-admin-panel-collapse" href="#">← Pod</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="column is-narrow is-hidden-mobile" id="column-admin-panel-expand" style="width:70px;display:none;">
|
||||
<div class="list is-hoverable">
|
||||
<a class="list-item" id="button-admin-panel-expand" href="#">→</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="tile is-ancestor" id="tileAncestor" style="flex-wrap: wrap;">
|
||||
<script>
|
||||
Admin.ClusterOverview(host, '%ROUTE_TOKEN%');
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -0,0 +1,43 @@
|
||||
<main>
|
||||
<div class="columns is-fullwidth" style="background-color: #F5F5F5; min-height: 100vh">
|
||||
<div class="container">
|
||||
<script>
|
||||
Admin.ClusterOverviewAbout(host, '%ROUTE_TOKEN%');
|
||||
var aboutButton = document.getElementById('a-settings-tablet');
|
||||
if (aboutButton) {
|
||||
aboutButton.setAttribute('href', 'adminClusterOverview.html');
|
||||
aboutButton.innerHTML = l10nstrings.strOverview;
|
||||
}
|
||||
</script>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h3 class="title is-3">
|
||||
<script>document.write(l10nstrings.strAbout)</script>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li id="tab-documents-open" class="is-active"><a id="button-licenseview" href="#licenseview">
|
||||
COOL Controller
|
||||
<script>document.write(l10nstrings.strLicense)</script>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="licenseview" class="mtabs">
|
||||
<p>
|
||||
<div id="license-content"></div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
|
||||
window.location.href += '#licenseview';
|
||||
|
||||
document.getElementById('button-licenseview').onclick = function (e) {
|
||||
document.getElementById('button-licenseview').parentNode.className = 'is-active';
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
<main>
|
||||
<div class="container">
|
||||
<script>Admin.History(host);</script>
|
||||
|
||||
<h3 class="title is-3"><script>document.write(l10nstrings.strHistory)</script></h3>
|
||||
|
||||
<div class="buttons is-fullwidth is-right">
|
||||
<button class="button is-info" id="refreshHistory" style="min-width:120px;"><script>document.write(l10nstrings.strRefresh)</script></button>
|
||||
</div>
|
||||
|
||||
<pre id="json-doc"><script>document.write(l10nstrings.strDocuments)</script><br/><textarea rows="10" style="width: 100%;resize: vertical;"></textarea></pre>
|
||||
<pre id="json-ex-doc"><script>document.write(l10nstrings.strExpired)</script><br/><textarea rows="10" style="width: 100%;resize: vertical;"></textarea></pre>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.getElementById('a-history-mobile').classList.add('is-active');
|
||||
document.getElementById('a-history-tablet').classList.add('is-active');
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html data-theme="%UI_THEME%">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="localizations" href="%SERVICE_ROOT%/browser/%VERSION%/l10n/localizations.json" type="application/vnd.oftn.l10n+json"/>
|
||||
<title>F7 Office - Settings</title>
|
||||
<link
|
||||
rel="StyleSheet"
|
||||
href="%SERVICE_ROOT%/browser/%VERSION%/admin/css/admin.css"
|
||||
type="text/css"
|
||||
/>
|
||||
<link rel="stylesheet" href="%SERVICE_ROOT%/browser/%VERSION%/color-palette.css" />
|
||||
<link rel="stylesheet" href="%SERVICE_ROOT%/browser/%VERSION%/color-palette-dark.css" />
|
||||
<script src="%SERVICE_ROOT%/browser/%VERSION%/l10n.js" defer></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="%SERVICE_ROOT%/browser/%VERSION%/admin/css/adminIntegratorSettings.css"
|
||||
/>
|
||||
<script
|
||||
src="%SERVICE_ROOT%/browser/%VERSION%/admin-bundle.js"
|
||||
defer
|
||||
></script>
|
||||
<!--%BRANDING_CSS%-->
|
||||
<!--%BRANDING_JS%-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="settingIframe">
|
||||
<div id="allConfigSection"></div>
|
||||
<input
|
||||
type="hidden"
|
||||
id="initial-variables"
|
||||
data-access-token="%ACCESS_TOKEN%"
|
||||
data-access-token-ttl="%ACCESS_TOKEN_TTL%"
|
||||
data-no-auth-header="%NO_AUTH_HEADER%"
|
||||
data-access-header="%ACCESS_HEADER%"
|
||||
data-enable-accessibility="%ENABLE_ACCESSIBILITY%"
|
||||
data-enable-debug="%ENABLE_DEBUG%"
|
||||
data-wopi-setting-base-url="%WOPI_SETTING_BASE_URL%"
|
||||
data-iframe-type="%IFRAME_TYPE%"
|
||||
data-service-root="%SERVICE_ROOT%"
|
||||
data-css-vars="<!--%CSS_VARIABLES%-->"
|
||||
data-version-hash="%VERSION%"
|
||||
data-lang="%UI_LANG%"
|
||||
/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
<main>
|
||||
<div class="container">
|
||||
<script>Admin.Log(host);</script>
|
||||
|
||||
<h3 class="title is-3"><script>document.write(l10nstrings.strLog)</script></h3>
|
||||
|
||||
<div class="buttons is-fullwidth is-right">
|
||||
<button type="button" class="button is-info" id="refresh-log" style="min-width:120px;"><script>document.write(l10nstrings.strRefreshLog)</script></button>
|
||||
<button type="button" id="button-open-log-list-modal" class="button is-info" style="min-width:120px;">
|
||||
<script>document.write(l10nstrings.strSetLogLevels)</script>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="level is-fullwidth is-mobile">
|
||||
<div class="field is-horizontal">
|
||||
<label class="field-label" style="vertical-align: middle; line-height:30px;"><script>document.write(l10nstrings.strChannelFilter)</script></label>
|
||||
<div class="control">
|
||||
<select class="select" id="log-channel-filter">
|
||||
<option><script>document.write(l10nstrings.strChannelFilterNone)</script></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="log-lines" style="width:100%;height:100%;min-height: calc(100vh - 250px);resize:vertical;" readonly="true"></textarea>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="modal" id="channel-list-modal">
|
||||
<div class="modal-background" onclick="document.getElementById('channel-list-modal').classList.remove('is-active');"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title"><script>document.write(l10nstrings.strLogLevels)</script></p>
|
||||
<button class="delete" onclick="document.getElementById('channel-list-modal').classList.remove('is-active');"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<form class="form-horizontal" id="form-channel-list"></form>
|
||||
</section>
|
||||
<footer class="modal-card-foot is-fullwidth has-text-right">
|
||||
<button type="button" onclick="document.getElementById('channel-list-modal').classList.remove('is-active');" class="button" style="min-width:120px;" data-dismiss="modal"><script>document.write(l10nstrings.strCloseModal)</script></button>
|
||||
<button type="button" form="form-channel-list" id="update-log-levels" class="button is-primary" style="min-width:140px;"><script>document.write(l10nstrings.strUpdateLogLevels)</script></button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('a-log-mobile').classList.add('is-active');
|
||||
document.getElementById('a-log-tablet').classList.add('is-active');
|
||||
document.getElementById('button-open-log-list-modal').onclick = function() {
|
||||
document.getElementById('channel-list-modal').classList.add('is-active');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,167 @@
|
||||
<main>
|
||||
<div class="container">
|
||||
<script>Admin.Settings(host);</script>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h3 class="title is-3"><script>document.write(l10nstrings.strSettings)</script></h3>
|
||||
</div>
|
||||
<div class="column has-text-right">
|
||||
<button id="btnShutdown" type="submit" class="button is-danger" style="min-width:140px; margin-inline-end:14px"><script>document.write(l10nstrings.strShutdown)</script></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li id="tab-documents-open" class="is-active"><a id="button-opview" href="#opview"><script>document.write(l10nstrings.strSettings)</script></a></li>
|
||||
<li id="tab-users-online"><a id="button-versionview" href="#versionview"><script>document.write(l10nstrings.strVersionInfo)</script></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="opview" class="mtabs">
|
||||
<form id="admin_settings">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label"><script>document.write(l10nstrings.strMemoryStatsCachesize)</script></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="number" id="mem_stats_size" class="input" name="Memory Stats Size" style="max-width:200px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label"><script>document.write(l10nstrings.strMemoryStatsInterval)</script></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="number" id="mem_stats_interval" class="input" name="Memory Stats Interval" style="max-width:200px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label"><script>document.write(l10nstrings.strCpuStatsCachesize)</script></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="number" id="cpu_stats_size" class="input" name="Cpu Stats Size" style="max-width:200px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label"><script>document.write(l10nstrings.strCpuStatsInterval)</script></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="number" id="cpu_stats_interval" class="input" name="Cpu Stats Interval" style="max-width:200px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label"><script>document.write(l10nstrings.strLimitVirtMemMb)</script></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="number" id="limit_virt_mem_mb" class="input" name="Max Document Virtual Memory MB" style="max-width:200px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label"><script>document.write(l10nstrings.strLimitStackMemKb)</script></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="number" id="limit_stack_mem_kb" class="input" name="Max Document Stack Memory Kb" style="max-width:200px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label"><script>document.write(l10nstrings.strLimitFileSizeMb)</script></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="number" id="limit_file_size_mb" class="input" name="Max File Write Size Mb" style="max-width:200px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label"><script>document.write(l10nstrings.strMemoryStatsCachesize)</script></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="number" id="mem_stats_size" class="input" name="Memory Stats Size" style="max-width:200px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary" style="min-width:120px;"><script>document.write(l10nstrings.strSave)</script></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="versionview" class="mtabs">
|
||||
<p>
|
||||
<h5><b>COOLWSD</b></h5>
|
||||
<div id="coolwsd-version"></div>
|
||||
<div id="coolwsd-buildconfig"></div>
|
||||
</p>
|
||||
<p>
|
||||
<h5><b>LOKit</b></h5>
|
||||
<div id="lokit-version"></div>
|
||||
<div id="lokit-buildconfig"></div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.getElementById('a-settingsmenu-mobile').classList.add('is-active');
|
||||
document.getElementById('a-settingsmenu-tablet').classList.add('is-active');
|
||||
|
||||
window.location.href += '#opview';
|
||||
|
||||
// Switching tabs is done by css rules. We will set "is-active" classes here.
|
||||
document.getElementById('button-versionview').onclick = function() {
|
||||
document.getElementById('button-versionview').parentNode.className = 'is-active';
|
||||
document.getElementById('button-opview').parentNode.className = '';
|
||||
}
|
||||
|
||||
document.getElementById('button-opview').onclick = function() {
|
||||
document.getElementById('button-opview').parentNode.className = 'is-active';
|
||||
document.getElementById('button-versionview').parentNode.className = '';
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||
<meta name="description" content=""/>
|
||||
<meta name="author" content=""/>
|
||||
<link rel="localizations" href="%SERVICE_ROOT%/browser/%VERSION%/l10n/localizations.json" type="application/vnd.oftn.l10n+json"/>
|
||||
|
||||
<title>F7 Office - Admin console</title>
|
||||
<link rel=StyleSheet href="%SERVICE_ROOT%/browser/%VERSION%/admin/css/bulma.min.css" type="text/css" />
|
||||
<script>
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var routeToken = params.get('RouteToken');
|
||||
var adminBundleSrc = '%SERVICE_ROOT%/browser/%VERSION%/admin-bundle.js';
|
||||
if (routeToken) {
|
||||
adminBundleSrc += '?RouteToken=' + routeToken
|
||||
}
|
||||
document.write('<script src="' + adminBundleSrc + '"><\/script>');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
src: url("%SERVICE_ROOT%/browser/%VERSION%/admin/font/Montserrat-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
/* These classes are for tab views without javascipt. */
|
||||
div:target.mtabs {
|
||||
display: block;
|
||||
}
|
||||
div.mtabs {
|
||||
display: none
|
||||
}
|
||||
|
||||
/* These classes are for collapsable elements without javascript. */
|
||||
input[type=checkbox].mcollapsable + ul {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
transition-property: opacity, visibility;
|
||||
transition-duration: 500ms, 500ms;
|
||||
}
|
||||
input[type=checkbox].mcollapsable:checked + ul {
|
||||
visibility: visible;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
transition-property: opacity, visibility;
|
||||
transition-duration: 500ms, 500ms;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--%BRANDING_JS%-->
|
||||
<!--%BODY%-->
|
||||
<!--%FOOTER%-->
|
||||
<script>
|
||||
window.jwtToken = '%JWT_TOKEN%';
|
||||
window.addEventListener('load', function () {
|
||||
var buttonAdminPanelExpand = document.getElementById('button-admin-panel-expand');
|
||||
if (buttonAdminPanelExpand) {
|
||||
buttonAdminPanelExpand.onclick = function () {
|
||||
document.getElementById('column-admin-panel').style.display = 'block';
|
||||
document.getElementById('column-admin-panel-expand').style.display = 'none';
|
||||
};
|
||||
}
|
||||
|
||||
var buttonAdminPanelCollapse = document.getElementById('button-admin-panel-collapse');
|
||||
if (buttonAdminPanelCollapse) {
|
||||
buttonAdminPanelCollapse.onclick = function () {
|
||||
document.getElementById('column-admin-panel').style.display = 'none';
|
||||
document.getElementById('column-admin-panel-expand').style.display = 'block';
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
:root {
|
||||
--admin-font: 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: var(--admin-font);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,632 @@
|
||||
:root {
|
||||
--settings-btn-primary: var(--color-primary);
|
||||
--settings-btn-primary-text: var(--color-main-text);
|
||||
--settings-btn-light-text: #0e242f;
|
||||
--settings-btn-light: var(--color-primary-lighter);
|
||||
--settings-border: var(--color-border);
|
||||
--settings-border-contrast: var(--color-border-darker);
|
||||
--settings-text: var(--color-main-text);
|
||||
--settings-text-maxcontrast: var(--color-border-lighter);
|
||||
--settings-background: var(--color-main-background);
|
||||
--settings-background-hover: var(--color-background-dark);
|
||||
--settings-font-face:
|
||||
system-ui, -apple-system, 'Noto Sans', 'Segoe UI', Roboto, Oxygen-Sans,
|
||||
Cantarell, Ubuntu, 'Helvetica Neue', 'Liberation Sans', Arial, sans-serif;
|
||||
|
||||
--default-font-size: 15px;
|
||||
--animation-quick: 100ms;
|
||||
--border-radius-element: 8px;
|
||||
--default-clickable-area: 34px;
|
||||
--default-grid-baseline: 4px;
|
||||
--color-text-lighter: var(--settings-text-maxcontrast);
|
||||
--color-scrollbar: var(--settings-border-contrast) transparent;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: var(--default-font-size);
|
||||
}
|
||||
body {
|
||||
color: var(--settings-text);
|
||||
background-color: var(--settings-background);
|
||||
padding-left: 0px;
|
||||
margin-left: 0px;
|
||||
display: block;
|
||||
scrollbar-width: thin;
|
||||
font-family: var(--settings-font-face);
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-weight: inherit;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
vertical-align: baseline;
|
||||
cursor: default;
|
||||
scrollbar-color: var(--color-scrollbar);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3273dc;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0px;
|
||||
}
|
||||
.section {
|
||||
display: block;
|
||||
padding-top: 30px;
|
||||
margin-bottom: 24px;
|
||||
padding-left: 0px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section:not(:last-child) {
|
||||
border-bottom: 1px solid var(--settings-border);
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section p {
|
||||
margin-top: -0.2em;
|
||||
margin-bottom: 1em;
|
||||
opacity: 0.7;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.button {
|
||||
--button-size: var(--default-clickable-area);
|
||||
--button-radius: var(--border-radius-element, calc(var(--button-size) / 2));
|
||||
--button-padding: clamp(
|
||||
var(--default-grid-baseline),
|
||||
var(--button-radius),
|
||||
calc(var(--default-grid-baseline) * 4)
|
||||
);
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-size: var(--default-font-size);
|
||||
font-weight: bold;
|
||||
min-height: var(--button-size);
|
||||
min-width: var(--button-size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: var(--button-radius);
|
||||
transition-property: color, border-color, background-color;
|
||||
transition-duration: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
color: var(--settings-btn-light-text);
|
||||
background-color: var(--settings-btn-light);
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
filter: saturate(0.7);
|
||||
}
|
||||
|
||||
.button--icon-and-text {
|
||||
--button-padding: min(
|
||||
calc(var(--default-grid-baseline) + var(--button-radius)),
|
||||
calc(var(--default-grid-baseline) * 4)
|
||||
);
|
||||
padding-block: 0;
|
||||
padding-inline: var(--default-grid-baseline) var(--button-padding);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
color: var(--settings-btn-primary-text);
|
||||
background-color: var(--settings-btn-primary);
|
||||
}
|
||||
|
||||
.button--vue-secondary {
|
||||
color: var(--settings-btn-light-text);
|
||||
background-color: var(--settings-btn-light);
|
||||
}
|
||||
|
||||
.button__wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button__text {
|
||||
font-weight: bold;
|
||||
margin-bottom: 1px;
|
||||
padding: 2px 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button__icon {
|
||||
height: var(--button-size);
|
||||
width: var(--button-size);
|
||||
min-height: var(--button-size);
|
||||
min-width: var(--button-size);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.material-design-icon {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button--vue-secondary {
|
||||
color: var(--settings-btn-light-text);
|
||||
background-color: var(--settings-btn-light);
|
||||
}
|
||||
|
||||
.button--text-only {
|
||||
padding: 0 var(--button-padding);
|
||||
}
|
||||
|
||||
.button--vue-tertiary {
|
||||
color: var(--settings-text);
|
||||
background-color: var(--settings-background);
|
||||
}
|
||||
|
||||
.button--icon-only {
|
||||
line-height: 1;
|
||||
width: var(--button-size) !important;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
--list-item-padding: var(--default-grid-baseline);
|
||||
--list-item-height: 2lh;
|
||||
--list-item-border-radius: var(--border-radius-element, 32px);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
justify-content: flex-start;
|
||||
padding: var(--list-item-padding);
|
||||
width: 100%;
|
||||
border-radius: var(--border-radius-element, 32px);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--animation-quick) ease-in-out;
|
||||
list-style: none;
|
||||
border: 0.5px solid var(--settings-border);
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.list-item__wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.list-item__wrapper:last-of-type {
|
||||
padding-block-end: 4px;
|
||||
}
|
||||
|
||||
.list-item__anchor {
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
align-items: center;
|
||||
height: var(--list-item-height);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-item-content {
|
||||
display: flex;
|
||||
flex: 1 0;
|
||||
justify-content: space-between;
|
||||
padding-inline-start: calc(2 * var(--default-grid-baseline));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-item-content__main {
|
||||
flex: 1 0;
|
||||
width: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.list-item-content__name {
|
||||
min-width: 100px;
|
||||
flex: 1 1 10%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.list-item__wrapper .list-item-content__name,
|
||||
.list-item__wrapper .list-item-content__subname,
|
||||
.list-item__wrapper .list-item-content__details,
|
||||
.list-item__wrapper .list-item-details__details {
|
||||
white-space: nowrap;
|
||||
margin-block: 0;
|
||||
margin-inline: 0 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.list-item-content__extra-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--default-grid-baseline);
|
||||
}
|
||||
|
||||
.list-item-content__actions,
|
||||
.list-item-content__extra-actions {
|
||||
flex: 0 0 auto;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
margin-inline-start: var(--default-grid-baseline);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--settings-background);
|
||||
padding: 20px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.dic-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dic-input-container input[type='text'] {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
font-size: 15px;
|
||||
border: 1px solid var(--settings-border);
|
||||
border-radius: 4px;
|
||||
color: var(--settings-text);
|
||||
background-color: var(--settings-background);
|
||||
}
|
||||
|
||||
#zoterocontainer {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
input#zotero {
|
||||
width: 300px;
|
||||
flex: none;
|
||||
padding: 8px;
|
||||
font-size: 15px;
|
||||
border: 1px solid var(--settings-text-maxcontrast);
|
||||
border-radius: 4px;
|
||||
color: var(--settings-text);
|
||||
background-color: var(--settings-background);
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wordbook-add-button {
|
||||
padding: 8px;
|
||||
margin: 0px 5px;
|
||||
}
|
||||
|
||||
#dicWordList {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 16px;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
#dicWordList li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
#dicWordList li button {
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dic-button-container,
|
||||
.modal-button-container {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.dic-button-container button,
|
||||
.modal-button-container button {
|
||||
padding: 8px 16px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.dic-dropdown-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--settings-border-contrast);
|
||||
border-radius: 4px;
|
||||
background-color: var(--settings-background);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.dic-dropdown-container::after {
|
||||
content: '▾';
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
font-size: 0.8em;
|
||||
color: var(--color-text-lighter);
|
||||
}
|
||||
|
||||
.dic-dropdown-container .open {
|
||||
border: 1px solid var(--settings-border-contrast);
|
||||
}
|
||||
|
||||
.dic-dropdown-container.open::after {
|
||||
content: '▴';
|
||||
}
|
||||
|
||||
.dic-dropdown-list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--settings-background);
|
||||
border: 1px solid var(--settings-border);
|
||||
border-radius: 4px;
|
||||
z-index: 100;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dic-dropdown-option {
|
||||
padding: 8px;
|
||||
border: 1px solid var(--settings-border-contrast);
|
||||
}
|
||||
|
||||
.dic-dropdown-option:hover {
|
||||
background-color: var(--settings-background-hover);
|
||||
}
|
||||
|
||||
.dic-dropdown-description {
|
||||
font-size: 0.8em;
|
||||
color: var(--color-text-lighter);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.dic-select-container {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dic-select-container select {
|
||||
padding: 8px;
|
||||
font-size: var(--default-font-size);
|
||||
border: 1px solid var(--settings-border);
|
||||
border-radius: 4px;
|
||||
background-color: var(--settings-background);
|
||||
color: var(--settings-text);
|
||||
}
|
||||
|
||||
#xcu-section {
|
||||
margin: 16px 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.material-design-icon__svg {
|
||||
width: var(--icon-size, 24px);
|
||||
height: var(--icon-height, 24px);
|
||||
}
|
||||
|
||||
.xcu-editor-tabs-nav, .browser-setting-tabs-nav {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--settings-border);
|
||||
}
|
||||
|
||||
.xcu-editor-tab, .browser-setting-tab {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 12px 0;
|
||||
position: relative;
|
||||
font-size: var(--default-font-size);
|
||||
color: var(--settings-text);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.xcu-editor-tab::after,
|
||||
.browser-setting-tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 4px;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.xcu-editor-tab.active,
|
||||
.browser-setting-tab.active {
|
||||
color: var(--settings-btn-primary);
|
||||
}
|
||||
|
||||
.xcu-editor-tab.active::after,
|
||||
.browser-setting-tab.active::after {
|
||||
background-color: var(--settings-btn-primary);
|
||||
}
|
||||
|
||||
.xcu-settings-fieldset {
|
||||
border: 1px solid var(--settings-border);
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.xcu-settings-fieldset legend {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
--icon-size: 24px;
|
||||
--icon-height: 24px;
|
||||
}
|
||||
|
||||
.checkbox-radio-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--settings-text);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
font-size: var(--default-font-size);
|
||||
line-height: var(--default-line-height);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
--checkbox-radio-switch--border-radius: var(
|
||||
--border-radius-element,
|
||||
calc(var(--default-clickable-area) / 2)
|
||||
);
|
||||
--checkbox-radio-switch--border-radius-outer: calc(
|
||||
var(--checkbox-radio-switch--border-radius) + 2px
|
||||
);
|
||||
}
|
||||
|
||||
.checkbox-radio-switch-input {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0 !important;
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
margin: 4px calc((var(--default-clickable-area) - 16px) / 2);
|
||||
}
|
||||
|
||||
.checkbox-content--has-text {
|
||||
padding-inline-end: calc((var(--default-clickable-area) - 16px) / 2);
|
||||
}
|
||||
|
||||
.checkbox-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: var(--default-grid-baseline);
|
||||
user-select: none;
|
||||
min-height: var(--default-clickable-area);
|
||||
border-radius: var(--checkbox-radio-switch--border-radius);
|
||||
padding: var(--default-grid-baseline)
|
||||
calc((var(--default-clickable-area) - var(--icon-height)) / 2);
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
.checkbox-content-icon {
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
color: var(--settings-btn-primary);
|
||||
}
|
||||
|
||||
.checkbox-content-icon-disabled {
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
color: #6B7280
|
||||
}
|
||||
|
||||
.checkbox-content {
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.xcu-settings-grid,
|
||||
.browser-settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.xcu-editor-actions,
|
||||
.browser-settings-editor-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
justify-content: flex-end;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-compact-toggle {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
.toggle-options {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.toggle-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-image {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.toggle-image.selected {
|
||||
border-color: var(--co-settings-text, #e5eff5);
|
||||
background-color: rgba(0, 120, 212, 0.1);
|
||||
}
|
||||
|
||||
.toggle-image-label {
|
||||
margin-top: 1rem;
|
||||
font-size: var(--default-font-size);
|
||||
color: var(--settings-text);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
+93
@@ -0,0 +1,93 @@
|
||||
Copyright 2011 The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.6 KiB |
Reference in New Issue
Block a user