mirror of https://github.com/portainer/portainer
fix(web-editor): add search hint text [EE-3967] (#7496)
parent
c6ab5d5717
commit
d4f4bb532f
|
@ -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);
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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 />
|
||||
Enter - Find next <br />
|
||||
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 />
|
||||
Enter - Find next <br />
|
||||
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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue