github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/7566/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/constants.js
View File

@ -31,7 +31,7 @@ export const KUBERNETES_SYSTEM_NAMESPACES = ['kube-system', 'kube-public', 'kube
export const PORTAINER_FADEOUT = 1500;
export const STACK_NAME_VALIDATION_REGEX = '^[-_a-z0-9]+$';
export const TEMPLATE_NAME_VALIDATION_REGEX = '^[-_a-z0-9]+$';
export const BROWSER_OS_PLATFORM = navigator.userAgent.indexOf('Windows NT') > -1 ? 'win' : 'lin';
export const BROWSER_OS_PLATFORM = navigator.userAgent.indexOf('Windows') > -1 ? 'win' : navigator.userAgent.indexOf('Mac') > -1 ? 'mac' : 'lin';
export const NEW_LINE_BREAKER = BROWSER_OS_PLATFORM === 'win' ? '\r\n' : '\n';
// don't declare new constants, either:
@ -66,4 +66,5 @@ angular
.constant('PAGINATION_MAX_ITEMS', PAGINATION_MAX_ITEMS)
.constant('APPLICATION_CACHE_VALIDITY', APPLICATION_CACHE_VALIDITY)
.constant('CONSOLE_COMMANDS_LABEL_PREFIX', CONSOLE_COMMANDS_LABEL_PREFIX)
.constant('PREDEFINED_NETWORKS', PREDEFINED_NETWORKS);
.constant('PREDEFINED_NETWORKS', PREDEFINED_NETWORKS)
.constant('BROWSER_OS_PLATFORM', BROWSER_OS_PLATFORM);

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;
}

5
app/react/components/Tip/Tooltip/Tooltip.tsx
View File

@ -10,9 +10,10 @@ type Position = 'top' | 'right' | 'bottom' | 'left';
export interface Props {
position?: Position;
message: string;
className?: string;
}
export function Tooltip({ message, position = 'bottom' }: Props) {
export function Tooltip({ message, position = 'bottom', className }: Props) {
const id = _.uniqueId('tooltip-');
return (
@ -28,7 +29,7 @@ export function Tooltip({ message, position = 'bottom' }: Props) {
type="info"
place={position}
effect="solid"
className={styles.tooltip}
className={clsx(styles.tooltip, className)}
arrowColor="transparent"
/>
</span>