Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-08 07:15:23 +02:00
Code Issues Releases Activity

fix(web-editor): add search hint text [EE-3967] (#7496)

Browse source
This commit is contained in:
Matt Hook 2022-08-25 10:11:25 +12:00 • committed by GitHub
parent c6ab5d5717
commit d4f4bb532f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 96 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/portainer/components/form-components/web-editor-form/web-editor-form.controller.js
View file

@ -1,7 +1,8 @@
class WebEditorFormController {
/* @ngInject */
constructor() {
constructor(BROWSER_OS_PLATFORM) {
this.editorUpdate = this.editorUpdate.bind(this);
this.BROWSER_OS_PLATFORM = BROWSER_OS_PLATFORM;
}
editorUpdate(cm) {

40
app/portainer/components/form-components/web-editor-form/web-editor-form.html
View file

@ -1,7 +1,41 @@
<ng-form name="$ctrl.webEditorForm">
<div class="web-editor overflow-x-hidden">
<div ng-if="!$ctrl.hideTitle" class="col-sm-12 form-section-title">Web editor</div>
<div class="trancluded-item form-group col-sm-12 col-lg-12 text-muted small" ng-transclude="description"></div>
<div class="web-editor overflow-auto">
<div ng-if="!$ctrl.hideTitle" class="col-sm-12 form-section-title pr-0"
>Web editor
<div class="text-muted small vertical-center float-right mt-0">
<span ng-if="$ctrl.BROWSER_OS_PLATFORM !== 'mac'" class="vertical-center">Ctrl+F for search</span>
<span ng-if="$ctrl.BROWSER_OS_PLATFORM === 'mac'" class="vertical-center">Cmd+F for search</span>
<portainer-tooltip
ng-if="$ctrl.BROWSER_OS_PLATFORM !== 'mac'"
message="'Ctrl+F - Start searching <br />
Ctrl+G - Find next <br />
Ctrl+Shift+G - Find previous <br />
Ctrl+Shift+F - Replace <br />
Ctrl+Shift+R - Replace all <br />
Alt+G - Jump to line <br />
Alt+F - Persistent search: <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Enter - Find next <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Shift+Enter - Find previous <br />'"
class-name="'[&>span]:!text-left'"
>
</portainer-tooltip>
<portainer-tooltip
ng-if="$ctrl.BROWSER_OS_PLATFORM === 'mac'"
message="'Cmd+F - Start searching <br />
Cmd+G - Find next <br />
Cmd+Shift+G - Find previous <br />
Cmd+Option+F - Replace <br />
Cmd+Option+R - Replace all <br />
Option+G - Jump to line <br />
Option+F - Persistent search: <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Enter - Find next <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Shift+Enter - Find previous <br />'"
class-name="'[&>span]:!text-left'"
>
</portainer-tooltip>
</div>
</div>
<div class="trancluded-item form-group col-sm-9 col-lg-10 text-muted small" ng-transclude="description"></div>
<div class="form-group">
<div class="col-sm-12 col-lg-12">
<code-editor

2
app/portainer/react/components/index.ts
View file

@ -29,7 +29,7 @@ export const componentsModule = angular
)
.component(
'portainerTooltip',
react2angular(Tooltip, ['message', 'position'])
react2angular(Tooltip, ['message', 'position', 'className'])
)
.component('fileUploadField', fileUploadField)
.component('porSwitchField', switchField)

2
app/portainer/services/codeMirror.js
View file

@ -8,7 +8,7 @@ import 'codemirror/addon/search/search.js';
import 'codemirror/addon/search/searchcursor.js';
import 'codemirror/addon/search/jump-to-line.js';
import 'codemirror/addon/dialog/dialog.js';
import 'codemirror/addon/dialog/dialog.css';
import './codeMirrorDialog.css';
angular.module('portainer.app').factory('CodeMirrorService', function CodeMirrorService() {
'use strict';

49
app/portainer/services/codeMirrorDialog.css Normal file
View file

@ -0,0 +1,49 @@
/* styles from https://github.com/codemirror/codemirror5/blob/master/addon/dialog/dialog.css with the button styles updated */
.CodeMirror-dialog {
position: absolute;
left: 0;
right: 0;
background: inherit;
z-index: 15;
padding: 0.1em 0.8em;
overflow: hidden;
color: inherit;
}
.CodeMirror-dialog-top {
border-bottom: 1px solid #eee;
top: 0;
}
.CodeMirror-dialog-bottom {
border-top: 1px solid #eee;
bottom: 0;
}
.CodeMirror-dialog input {
border: none;
outline: none;
background: transparent;
width: 20em;
color: inherit;
font-family: monospace;
}
.CodeMirror-dialog button {
/* apply styles from btn-default */
@apply bg-white border-gray-5 text-gray-9;
@apply hover:bg-gray-3 hover:border-gray-5 hover:text-gray-10;
/* dark mode */
@apply th-dark:bg-gray-warm-10 th-dark:border-gray-warm-7 th-dark:text-gray-warm-4;
@apply th-dark:hover:bg-gray-warm-9 th-dark:hover:border-gray-6 th-dark:hover:text-gray-warm-4;
/* highcontrast mode */
@apply th-highcontrast:bg-gray-warm-10 th-highcontrast:border-gray-warm-7 th-highcontrast:text-white;
@apply th-highcontrast:hover:bg-gray-warm-9 th-highcontrast:hover:border-gray-6 th-highcontrast:hover:text-white;
@apply font-sans;
@apply border-solid border;
font-size: 85%;
padding: 0px 8px;
border-radius: 8px;
}