mirror of
https://github.com/ONLYOFFICE/onlyoffice.github.io.git
synced 2026-04-07 14:04:30 +08:00
Refactoring aiModelEdit modal
This commit is contained in:
Alexey Koshelev
@ -23,18 +23,23 @@
|
||||
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
|
||||
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
|
||||
<script type="text/javascript" src="scripts/engine/providers/base.js"></script>
|
||||
<script type="text/javascript" src="components/Tooltip/script.js"></script>
|
||||
<script src="vendor/jquery/jquery-3.7.1.min.js"></script>
|
||||
<script src="vendor/select2-4.0.6-rc.1/dist/js/select2.js"></script>
|
||||
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
|
||||
<link rel="stylesheet" href="vendor/select2-4.0.6-rc.1/dist/css/select2.css"/>
|
||||
<link rel="stylesheet" href="./resources/styles/common.css">
|
||||
<link rel="stylesheet" href="./resources/styles/aiModelEdit.css">
|
||||
<link rel="stylesheet" href="components/Tooltip/style.css">
|
||||
</head>
|
||||
<body class="noselect">
|
||||
<div class="section">
|
||||
<div class="form-vertical-item">
|
||||
<div class="section-label">
|
||||
<label class="i18n">Model name</label>
|
||||
<label class="d-flex-center">
|
||||
<span class="i18n">Model name</span>
|
||||
<span class="required-mark">*</span>
|
||||
</label>
|
||||
</div>
|
||||
<input id="name-input" type="text" class="form-control"/>
|
||||
</div>
|
||||
@ -45,11 +50,17 @@
|
||||
<label class="i18n">Provider</label>
|
||||
</div>
|
||||
<div class="form-horizontal-item">
|
||||
<label class="i18n">Name</label>
|
||||
<label class="d-flex-center">
|
||||
<span class="i18n">Name</span>
|
||||
<span class="required-mark">*</span>
|
||||
</label>
|
||||
<select id="provider-name-cmb" class="form-control"></select>
|
||||
</div>
|
||||
<div class="form-horizontal-item">
|
||||
<label class="i18n">URL</label>
|
||||
<label class="d-flex-center">
|
||||
<span class="i18n">URL</span>
|
||||
<span class="required-mark">*</span>
|
||||
</label>
|
||||
<input id="provider-url-input" type="text" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-horizontal-item">
|
||||
@ -61,7 +72,10 @@
|
||||
<div class="section">
|
||||
<div class="form-vertical-item">
|
||||
<div class="section-label">
|
||||
<label class="i18n">Model</label>
|
||||
<label class="d-flex-center">
|
||||
<span class="i18n">Model</span>
|
||||
<span class="required-mark">*</span>
|
||||
</label>
|
||||
<div id="update-models-row">
|
||||
<div id="update-models-loader-container" class="asc-loader-container"></div>
|
||||
<button id="update-models-btn" class="action-btn i18n">Update models list</button>
|
||||
@ -87,9 +101,13 @@
|
||||
<div id="use-for-realtime"></div>
|
||||
<div id="use-for-code"></div>
|
||||
<div id="use-for-vision"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="custom-providers-button">
|
||||
<label class="i18n">
|
||||
Custom providers
|
||||
</label>
|
||||
</div>
|
||||
<script type="text/javascript" src="scripts/aiModelEdit.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -4,6 +4,21 @@ body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.d-flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.required-mark {
|
||||
font-size: 13px;
|
||||
line-height: 12px;
|
||||
margin-left: 1px;
|
||||
font-weight: 400;
|
||||
/* TODO: Добавить тему */
|
||||
color: #f62211;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -100,35 +115,15 @@ body {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
|
||||
.tooltip {
|
||||
line-height: 12px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
/* max-width: 200px; */
|
||||
#custom-providers-button{
|
||||
display: inline-flex;
|
||||
}
|
||||
body.theme-light .tooltip,
|
||||
body.theme-gray .tooltip {
|
||||
background-color: #fff;
|
||||
border-color: #c0c0c0;
|
||||
#custom-providers-button label{
|
||||
cursor: pointer;
|
||||
border-bottom: 1px dotted currentColor;
|
||||
padding-bottom: 2px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
body.theme-classic-light .tooltip {
|
||||
background-color: #fff;
|
||||
border-color: #cfcfcf;
|
||||
}
|
||||
body.theme-dark .tooltip {
|
||||
background-color: #333;
|
||||
border-color: #666;
|
||||
}
|
||||
body.theme-contrast-dark .tooltip {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #696969;
|
||||
}
|
||||
|
||||
|
||||
.toggle-button {
|
||||
all: unset;
|
||||
|
||||
@ -58,6 +58,10 @@ var modelNameValidator = new ValidatorWrapper({
|
||||
$(modelNameCmbEl).select2({width: '100%'});
|
||||
|
||||
|
||||
$('#custom-providers-button label').click(function(e) {
|
||||
window.Asc.plugin.sendToPlugin("onOpenCustomProvidersModal");
|
||||
});
|
||||
|
||||
var updateModelsLoader = null;
|
||||
var updateModelsErrorTip = new Tooltip(updateModelsErrorEl, {
|
||||
xAnchor: 'right',
|
||||
@ -605,73 +609,6 @@ function ValidatorWrapper(options) {
|
||||
this._init();
|
||||
}
|
||||
|
||||
//Tooltip component
|
||||
function Tooltip(targetEl, options) {
|
||||
this._init = function() {
|
||||
var self = this;
|
||||
var defaults = {
|
||||
text: '',
|
||||
xAnchor: 'center',
|
||||
yAnchor: 'bottom',
|
||||
align: 'center'
|
||||
};
|
||||
this.options = Object.assign({}, defaults, options);
|
||||
|
||||
this.tooltipEl = document.createElement("div");
|
||||
this.tooltipEl.className = "tooltip";
|
||||
this.tooltipEl.innerText = this.options.text;
|
||||
document.body.appendChild(this.tooltipEl);
|
||||
$(this.tooltipEl).hide();
|
||||
|
||||
targetEl.addEventListener('mouseover', function(e) {
|
||||
$(self.tooltipEl).show();
|
||||
self._updatePosition();
|
||||
});
|
||||
targetEl.addEventListener('mouseleave', function(e) {
|
||||
$(self.tooltipEl).hide();
|
||||
});
|
||||
};
|
||||
|
||||
this._updatePosition = function() {
|
||||
var rectTooltip = this.tooltipEl.getBoundingClientRect();
|
||||
var rectEl = targetEl.getBoundingClientRect();
|
||||
var yOffset = 3;
|
||||
var xOffset = 0;
|
||||
if(this.options.align == 'right') {
|
||||
xOffset = -rectTooltip.width;
|
||||
} else if(this.options.align == 'center') {
|
||||
xOffset = -rectTooltip.width / 2;
|
||||
}
|
||||
|
||||
|
||||
if(this.options.xAnchor == 'right') {
|
||||
this.tooltipEl.style.left = rectEl.right + xOffset + 'px';
|
||||
} else if(this.options.xAnchor == 'center') {
|
||||
this.tooltipEl.style.left = rectEl.left + rectEl.width/2 + xOffset + 'px';
|
||||
}
|
||||
|
||||
|
||||
if(this.options.yAnchor == 'bottom') {
|
||||
this.tooltipEl.style.top = rectEl.bottom + yOffset + 'px';
|
||||
} else if(this.options.yAnchor == 'top') {
|
||||
this.tooltipEl.style.top = rectEl.top - yOffset - rectTooltip.height + 'px';
|
||||
}
|
||||
};
|
||||
|
||||
this.getText = function() {
|
||||
return this.options.text;
|
||||
};
|
||||
|
||||
this.setText = function(text) {
|
||||
this.options.text = text;
|
||||
this.tooltipEl.innerText = text;
|
||||
this._updatePosition();
|
||||
};
|
||||
|
||||
this._init();
|
||||
}
|
||||
|
||||
|
||||
//Toggle button component
|
||||
function ToggleButton(options) {
|
||||
this._init = function() {
|
||||
|
||||
Reference in New Issue
Block a user