fix the press F1 to full screen issue (#5505)

This commit is contained in:
brothelul 2021-04-27 14:07:12 +08:00 committed by GitHub
parent 6c20d35af8
commit b148d4b503
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 79 additions and 18 deletions

View File

@ -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());
}
});

View File

@ -102,7 +102,6 @@ class DiffEditorDialog extends React.Component {
)}
</div>
);
console.log(footer);
return (
<div>
<Dialog

View File

@ -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>

View File

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

View File

@ -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>

View File

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

View File

@ -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