fix the press F1 to full screen issue (#5505)
This commit is contained in:
parent
6c20d35af8
commit
b148d4b503
@ -406,7 +406,7 @@ public class DistributedDatabaseOperateImpl extends RequestProcessor4CP implemen
|
||||
}
|
||||
return RestResultUtils.success();
|
||||
} catch (Throwable ex) {
|
||||
LogUtil.DEFAULT_LOG.error("data import has error : {}", ex);
|
||||
LogUtil.DEFAULT_LOG.error("data import has error :", ex);
|
||||
return RestResultUtils.failed(ex.getMessage());
|
||||
}
|
||||
});
|
||||
|
@ -102,7 +102,6 @@ class DiffEditorDialog extends React.Component {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
console.log(footer);
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
|
@ -59,6 +59,7 @@ class ConfigDetail extends React.Component {
|
||||
checkedBeta: false,
|
||||
switchEncrypt: false,
|
||||
tag: [],
|
||||
editorClass: 'editor-normal',
|
||||
};
|
||||
this.field = new Field(this);
|
||||
this.dataId = getParams('dataId') || 'yanlin';
|
||||
@ -78,6 +79,7 @@ class ConfigDetail extends React.Component {
|
||||
componentDidMount() {
|
||||
this.initData();
|
||||
this.getDataDetail();
|
||||
this.initFullScreenEvent();
|
||||
}
|
||||
|
||||
initData() {
|
||||
@ -90,6 +92,22 @@ class ConfigDetail extends React.Component {
|
||||
this.setState({ tag: [{ title: locale.official, key: 'normal' }] });
|
||||
}
|
||||
|
||||
initFullScreenEvent() {
|
||||
document.body.addEventListener('keydown', e => {
|
||||
if (e.key === 'F1') {
|
||||
e.preventDefault();
|
||||
this.setState({
|
||||
editorClass: 'editor-full-screen',
|
||||
});
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
this.setState({
|
||||
editorClass: 'editor-normal',
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openLoading() {
|
||||
this.setState({
|
||||
loading: true,
|
||||
@ -262,7 +280,7 @@ class ConfigDetail extends React.Component {
|
||||
|
||||
render() {
|
||||
const { locale = {} } = this.props;
|
||||
const { configCompareVisible } = this.state;
|
||||
const { configCompareVisible, editorClass } = this.state;
|
||||
const { init } = this.field;
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
@ -347,7 +365,7 @@ class ConfigDetail extends React.Component {
|
||||
<Input htmlType={'text'} readOnly {...init('md5')} />
|
||||
</FormItem>
|
||||
<FormItem label={locale.configuration} required {...formItemLayout}>
|
||||
<div style={{ clear: 'both', height: 300 }} id="container" />
|
||||
<div className={editorClass} id="container" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Row>
|
||||
|
@ -19,4 +19,17 @@
|
||||
margin-left: 1em;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.editor-normal {
|
||||
clear: both;
|
||||
height: 300px;
|
||||
}
|
@ -87,6 +87,7 @@ class ConfigEditor extends React.Component {
|
||||
tagDataSource: [],
|
||||
subscriberDataSource: [],
|
||||
openAdvancedSettings: false,
|
||||
editorClass: 'editor-normal',
|
||||
};
|
||||
this.successDialog = React.createRef();
|
||||
this.diffEditorDialog = React.createRef();
|
||||
@ -123,6 +124,7 @@ class ConfigEditor extends React.Component {
|
||||
}
|
||||
this.initMoacoEditor('text', '');
|
||||
}
|
||||
this.initFullScreenEvent();
|
||||
});
|
||||
}
|
||||
|
||||
@ -155,6 +157,22 @@ class ConfigEditor extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
initFullScreenEvent() {
|
||||
document.body.addEventListener('keydown', e => {
|
||||
if (e.key === 'F1') {
|
||||
e.preventDefault();
|
||||
this.setState({
|
||||
editorClass: 'editor-full-screen',
|
||||
});
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
this.setState({
|
||||
editorClass: 'editor-normal',
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createDiffCodeMirror(leftCode, rightCode) {
|
||||
const target = this.diffEditorDialog.current.getInstance();
|
||||
target.innerHTML = '';
|
||||
@ -441,6 +459,7 @@ class ConfigEditor extends React.Component {
|
||||
dataIdError = {},
|
||||
groupError = {},
|
||||
subscriberDataSource,
|
||||
editorClass,
|
||||
} = this.state;
|
||||
const { locale = {} } = this.props;
|
||||
|
||||
@ -574,7 +593,7 @@ class ConfigEditor extends React.Component {
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div style={{ clear: 'both', height: 300 }} id="container" />
|
||||
<div id="container" className={editorClass} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Row>
|
||||
|
@ -73,4 +73,16 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.editor-full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.editor-normal {
|
||||
clear: both;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
@ -220,7 +220,7 @@
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/.button-list{text-align:right}.button-list button{margin-left:1em;font-size:14px}
|
||||
*/.button-list{text-align:right}.button-list button{margin-left:1em;font-size:14px}.editor-full-screen{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100}.editor-normal{clear:both;height:300px}
|
||||
|
||||
/*!
|
||||
* Copyright 1999-2018 Alibaba Group Holding Ltd.
|
||||
@ -236,7 +236,7 @@
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/.config-editor{padding:10px}.config-editor .func-title{overflow:hidden;height:50px;width:100%;font-weight:500;margin-bottom:9px;font-size:18px;line-height:36px;color:#73777a}.config-editor .form{display:table}.config-editor .form .next-form-item{display:table-row}.config-editor .form .next-form-item .next-form-item-label{white-space:nowrap;word-break:keep-all}.config-editor .form .next-form-item .next-form-item-control,.config-editor .form .next-form-item .next-select{width:100%}.config-editor .form .next-form-item .next-form-item-control,.config-editor .form .next-form-item .next-form-item-label{display:table-cell}.config-editor .form .next-form-item-control{padding-bottom:12px}.config-editor .form .next-checkbox-label{color:#73777a;font-weight:400}.config-editor .form .next-radio-label{color:#73777a}.config-editor .form .switch{color:#33cde5;cursor:pointer;user-select:none}.config-editor .form .help-label>*{display:inline-block}.config-editor .form .help-label>i{color:#1dc11d;margin:0 .25em}.config-editor .button-list{text-align:right}.config-editor .button-list button{margin-left:1em;font-size:14px}
|
||||
*/.config-editor{padding:10px}.config-editor .func-title{overflow:hidden;height:50px;width:100%;font-weight:500;margin-bottom:9px;font-size:18px;line-height:36px;color:#73777a}.config-editor .form{display:table}.config-editor .form .next-form-item{display:table-row}.config-editor .form .next-form-item .next-form-item-label{white-space:nowrap;word-break:keep-all}.config-editor .form .next-form-item .next-form-item-control,.config-editor .form .next-form-item .next-select{width:100%}.config-editor .form .next-form-item .next-form-item-control,.config-editor .form .next-form-item .next-form-item-label{display:table-cell}.config-editor .form .next-form-item-control{padding-bottom:12px}.config-editor .form .next-checkbox-label{color:#73777a;font-weight:400}.config-editor .form .next-radio-label{color:#73777a}.config-editor .form .switch{color:#33cde5;cursor:pointer;user-select:none}.config-editor .form .help-label>*{display:inline-block}.config-editor .form .help-label>i{color:#1dc11d;margin:0 .25em}.config-editor .button-list{text-align:right}.config-editor .button-list button{margin-left:1em;font-size:14px}.config-editor .editor-full-screen{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100}.config-editor .editor-normal{clear:both;height:300px}
|
||||
|
||||
/*!
|
||||
* Copyright 1999-2018 Alibaba Group Holding Ltd.
|
||||
@ -364,7 +364,7 @@
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/.next-pagination-size-selector{position:static!important}.configuration-table{margin-bottom:20px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;top:0;margin:-1px}.next-switch:after[dir=rtl]{content:" ";transition:all .1s linear;transform-origin:right center}.next-switch-medium[dir=rtl]:after,.next-switch-small[dir=rtl]:after{right:100%;transform:translateX(100%)}.next-switch-on[dir=rtl]>.next-switch-children{right:10px;left:auto;color:#fff}.next-switch-on[disabled][dir=rtl]:after{left:0;right:100%;box-shadow:1px 1px 3px 0 rgba(0,0,0,.12)}.next-switch-on.next-switch-small[dir=rtl]>.next-switch-children{right:6px;left:auto}.next-switch-off[dir=rtl]:after{right:0;transform:translateX(0);box-shadow:-1px 0 3px 0 rgba(0,0,0,.12)}.next-switch-off[dir=rtl]>.next-switch-children{left:10px;right:auto}.next-switch-off.next-switch-small[dir=rtl]>.next-switch-children{left:5px;right:auto}.next-switch{outline:none;text-align:left;transition:all .1s linear;overflow:hidden;cursor:pointer}.next-switch,.next-switch *,.next-switch :after,.next-switch :before{box-sizing:border-box}.next-switch:after{content:" ";transition:all .1s linear;transform-origin:left center}.next-switch-medium{width:56px;height:26px;border-radius:20px}.next-switch-medium:after{border:1px solid transparent;position:absolute;left:100%;transform:translateX(-100%);width:24px;height:24px;border-radius:20px;box-sizing:border-box}.next-switch-medium>.next-switch-children{font-size:12px;height:24px;line-height:24px}.next-switch-small{position:relative;display:inline-block;width:44px;height:22px}.next-switch-small,.next-switch-small:after{border:1px solid transparent;border-radius:20px}.next-switch-small:after{position:absolute;left:100%;transform:translateX(-100%);width:20px;height:20px;box-sizing:border-box}.next-switch-small>.next-switch-children{font-size:12px;position:absolute;height:20px;line-height:20px}.next-switch-on{background-color:#5584ff}.next-switch-on:after{box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-on>.next-switch-children{left:10px}.next-switch-on:focus,.next-switch-on:hover{background-color:#3e71f7}.next-switch-on:focus:after,.next-switch-on:hover:after{background-color:#fff}.next-switch-on.next-switch-small>.next-switch-children{left:6px}.next-switch-on[disabled]{background-color:#ebecf0;cursor:not-allowed}.next-switch-on[disabled]:after{right:0;box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-on[disabled]>.next-switch-children{color:#ccc}.next-switch-off{background-color:#fff;border-color:#c4c6cf}.next-switch-off:focus,.next-switch-off:hover{background-color:#f2f3f7;border-color:#c4c6cf}.next-switch-off:after{left:0;transform:translateX(0);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-off:after:focus,.next-switch-off:after:hover{background-color:#fff}.next-switch-off>.next-switch-children{right:10px;color:#999}.next-switch-off[disabled]{background-color:#f7f8fa;cursor:not-allowed}.next-switch-off[disabled]:after{box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-off[disabled]>.next-switch-children{color:#c4c6cf}.next-switch-off.next-switch-small>.next-switch-children{right:5px}
|
||||
*/.next-pagination-size-selector{position:static!important}.configuration-table{margin-bottom:20px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;top:0;margin:-1px}.next-switch:after[dir=rtl]{content:" ";transition:all .1s linear;transform-origin:right center}.next-switch-medium[dir=rtl]:after,.next-switch-small[dir=rtl]:after{right:100%;transform:translateX(100%)}.next-switch-on[dir=rtl]>.next-switch-children{right:10px;left:auto;color:#fff}.next-switch-on[disabled][dir=rtl]:after{left:0;right:100%;box-shadow:1px 1px 3px 0 rgba(0,0,0,.12)}.next-switch-on.next-switch-small[dir=rtl]>.next-switch-children{right:6px;left:auto}.next-switch-off[dir=rtl]:after{right:0;transform:translateX(0);box-shadow:-1px 0 3px 0 rgba(0,0,0,.12)}.next-switch-off[dir=rtl]>.next-switch-children{left:10px;right:auto}.next-switch-off.next-switch-small[dir=rtl]>.next-switch-children{left:5px;right:auto}.next-switch{outline:none;text-align:left;transition:all .1s linear;overflow:hidden;cursor:pointer;user-select:none}.next-switch,.next-switch *,.next-switch :after,.next-switch :before{box-sizing:border-box}.next-switch:after{content:" ";transition:all .1s linear;transform-origin:left center}.next-switch-medium{width:56px;height:26px;border-radius:20px}.next-switch-medium:after{border:1px solid transparent;position:absolute;left:100%;transform:translateX(-100%);width:24px;height:24px;border-radius:20px;box-sizing:border-box}.next-switch-medium>.next-switch-children{font-size:12px;height:24px;line-height:24px}.next-switch-small{position:relative;display:inline-block;width:44px;height:22px}.next-switch-small,.next-switch-small:after{border:1px solid transparent;border-radius:20px}.next-switch-small:after{position:absolute;left:100%;transform:translateX(-100%);width:20px;height:20px;box-sizing:border-box}.next-switch-small>.next-switch-children{font-size:12px;position:absolute;height:20px;line-height:20px}.next-switch-on{background-color:#5584ff}.next-switch-on:after{box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-on>.next-switch-children{left:10px}.next-switch-on:focus,.next-switch-on:hover{background-color:#3e71f7}.next-switch-on:focus:after,.next-switch-on:hover:after{background-color:#fff}.next-switch-on.next-switch-small>.next-switch-children{left:6px}.next-switch-on[disabled]{background-color:#ebecf0;cursor:not-allowed}.next-switch-on[disabled]:after{right:0;box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-on[disabled]>.next-switch-children{color:#ccc}.next-switch-off{background-color:#fff;border-color:#c4c6cf}.next-switch-off:focus,.next-switch-off:hover{background-color:#f2f3f7;border-color:#c4c6cf}.next-switch-off:after{left:0;transform:translateX(0);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-off:after:focus,.next-switch-off:after:hover{background-color:#fff}.next-switch-off>.next-switch-children{right:10px;color:#999}.next-switch-off[disabled]{background-color:#f7f8fa;cursor:not-allowed}.next-switch-off[disabled]:after{box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-off[disabled]>.next-switch-children{color:#c4c6cf}.next-switch-off.next-switch-small>.next-switch-children{right:5px}
|
||||
|
||||
/*!
|
||||
* Copyright 1999-2018 Alibaba Group Holding Ltd.
|
||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user