Skip to content

Commit d257631

Browse files
MrCoderMrCoder
committed
feat(fullscreen): add toggle fullscreen functionality and corresponding icon
1 parent 3bdb39e commit d257631

File tree

2 files changed

+23
-143
lines changed

2 files changed

+23
-143
lines changed

‎src/components/ContentWrap.jsx‎

Lines changed: 20 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -817,6 +817,16 @@ export default class ContentWrap extends Component {
817817
this.cm.js.setValue(codeService.addCode(code, param));
818818
}
819819

820+
async toggleFullscreen() {
821+
if (this.frame) {
822+
if (document.fullscreenElement) {
823+
await document.exitFullscreen();
824+
} else {
825+
await this.frame.requestFullscreen();
826+
}
827+
}
828+
}
829+
820830
render() {
821831
return (
822832
<SplitPane
@@ -847,35 +857,6 @@ export default class ContentWrap extends Component {
847857
className="code-wrap"
848858
onTransitionEnd={this.updateCodeWrapCollapseStates.bind(this)}
849859
>
850-
{/* <div
851-
className="js-code-wrap__header code-wrap__header"
852-
title="Double click to toggle code pane"
853-
ondblclick={this.codeWrapHeaderDblClickHandler.bind(this)}
854-
>
855-
<label className="btn-group" title="Click to change">
856-
<span className="code-wrap__header-label">ZenUML</span>
857-
<span className="caret" style="display:none" />
858-
<select
859-
data-type="js"
860-
className="js-mode-select hidden-select"
861-
style="display: none"
862-
onChange={this.codeModeChangeHandler.bind(this)}
863-
value={this.props.currentItem.jsMode}
864-
>
865-
<option value="js">JS</option>
866-
<option value="coffee">CoffeeScript</option>
867-
<option value="es6">ES6 (Babel)</option>
868-
<option value="typescript">TypeScript</option>
869-
</select>
870-
</label>
871-
<div className="code-wrap__header-right-options">
872-
<a
873-
className="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn"
874-
title="Toggle code pane"
875-
onClick={this.collapseBtnHandler.bind(this)}
876-
/>
877-
</div>
878-
</div> */}
879860
<Toolbox clickSvg={this.toolboxUpdateToApp.bind(this)} />
880861
<UserCodeMirror
881862
ref={(dslEditor) => (this.dslEditor = dslEditor)}
@@ -950,11 +931,6 @@ export default class ContentWrap extends Component {
950931
<use xlinkHref="#settings-icon" />
951932
</svg>
952933
</a>
953-
{/* <a
954-
className="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn"
955-
title="Toggle code pane"
956-
onClick={this.collapseBtnHandler.bind(this)}
957-
/> */}
958934
</div>
959935
</div>
960936
<UserCodeMirror
@@ -977,117 +953,8 @@ export default class ContentWrap extends Component {
977953
/>
978954
</div>
979955
</div>
980-
{/*<div label="Cheat sheet">*/}
981-
{/* <div*/}
982-
{/* data-code-wrap-id="0"*/}
983-
{/* id="htmlCodeEl"*/}
984-
{/* data-type="html"*/}
985-
{/* class="code-wrap"*/}
986-
{/* onTransitionEnd={this.updateCodeWrapCollapseStates.bind(this)}*/}
987-
{/* >*/}
988-
{/* /!* <div*/}
989-
{/* class="js-code-wrap__header code-wrap__header"*/}
990-
{/* onDblClick={this.codeWrapHeaderDblClickHandler.bind(this)}*/}
991-
{/* >*/}
992-
{/* <label class="btn-group" dropdow title="Click to change">*/}
993-
{/* About*/}
994-
{/* </label>*/}
995-
{/* <div class="code-wrap__header-right-options">*/}
996-
{/* <a*/}
997-
{/* class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn"*/}
998-
{/* title="Toggle code pane"*/}
999-
{/* onClick={this.collapseBtnHandler.bind(this)}*/}
1000-
{/* />*/}
1001-
{/* </div>*/}
1002-
{/* </div> *!/*/}
1003-
{/* <div className="cheat-sheet">*/}
1004-
{/* <table>*/}
1005-
{/* <tr>*/}
1006-
{/* <th>Feature</th>*/}
1007-
{/* <th>Sample</th>*/}
1008-
{/* </tr>*/}
1009-
{/* <tr>*/}
1010-
{/* <td>Participant</td>*/}
1011-
{/* <td>*/}
1012-
{/* ParticipantA*/}
1013-
{/* <br />*/}
1014-
{/* ParticipantB*/}
1015-
{/* </td>*/}
1016-
{/* </tr>*/}
1017-
{/* <tr>*/}
1018-
{/* <td>Message</td>*/}
1019-
{/* <td>A.messageA()</td>*/}
1020-
{/* </tr>*/}
1021-
{/* <tr>*/}
1022-
{/* <td>Asyc message</td>*/}
1023-
{/* <td>Alice-&gt;Bob: How are you?</td>*/}
1024-
{/* </tr>*/}
1025-
{/* <tr>*/}
1026-
{/* <td>Nested message</td>*/}
1027-
{/* <td>*/}
1028-
{/* A.messageA() {'{'}*/}
1029-
{/* <br />*/}
1030-
{/* &nbsp;&nbsp;B.messageB()*/}
1031-
{/* <br />*/}
1032-
{/* {'}'}*/}
1033-
{/* </td>*/}
1034-
{/* </tr>*/}
1035-
{/* <tr>*/}
1036-
{/* <td class="tg-0pky">Self-message</td>*/}
1037-
{/* <td class="tg-0pky">internalMessage()</td>*/}
1038-
{/* </tr>*/}
1039-
{/* <tr>*/}
1040-
{/* <td>Alt</td>*/}
1041-
{/* <td>*/}
1042-
{/* if (condition1) {'{'}*/}
1043-
{/* <br />*/}
1044-
{/* &nbsp;&nbsp;A.methodA()*/}
1045-
{/* <br />*/}
1046-
{/* {'}'} else if (condition2) {'{'}*/}
1047-
{/* <br />*/}
1048-
{/* &nbsp;&nbsp;B.methodB()*/}
1049-
{/* <br />*/}
1050-
{/* {'}'} else {'{'}*/}
1051-
{/* <br />*/}
1052-
{/* &nbsp;&nbsp;C.methodC()*/}
1053-
{/* <br />*/}
1054-
{/* {'}'}*/}
1055-
{/* </td>*/}
1056-
{/* </tr>*/}
1057-
{/* <tr>*/}
1058-
{/* <td>Loop</td>*/}
1059-
{/* <td>*/}
1060-
{/* while (condition) {'{'}*/}
1061-
{/* <br />*/}
1062-
{/* &nbsp;&nbsp;A.methodA()*/}
1063-
{/* <br />*/}
1064-
{/* {'}'}*/}
1065-
{/* </td>*/}
1066-
{/* </tr>*/}
1067-
{/* </table>*/}
1068-
{/* </div>*/}
1069-
{/* </div>*/}
1070-
{/*</div>*/}
1071956
</Tabs>
1072957
</div>
1073-
{/*<SplitPane*/}
1074-
{/*class="code-side"*/}
1075-
{/*id="js-code-side"*/}
1076-
{/*sizes={this.state.codeSplitSizes}*/}
1077-
{/*minSize={minCodeWrapSize}*/}
1078-
{/*direction={*/}
1079-
{/*this.props.currentLayoutMode === 2 ||*/}
1080-
{/*this.props.currentLayoutMode === 5*/}
1081-
{/*? 'horizontal'*/}
1082-
{/*: 'vertical'*/}
1083-
{/*}*/}
1084-
{/*onDragStart={this.codeSplitDragStart.bind(this)}*/}
1085-
{/*onDragEnd={this.codeSplitDragEnd.bind(this)}*/}
1086-
{/*onSplit={splitInstance => (this.codeSplitInstance = splitInstance)}*/}
1087-
{/*>*/}
1088-
{/**/}
1089-
{/**/}
1090-
{/*</Tabs>*/}
1091958
<div class="demo-side" id="js-demo-side">
1092959
<div className="h-full flex flex-col">
1093960
<div
@@ -1104,6 +971,16 @@ export default class ContentWrap extends Component {
1104971
{window.zenumlDesktop ? null : (
1105972
<div className="shrink-0 relative z-10 bg-gray-200 py-2 px-6 flex justify-between">
1106973
<div className="flex gap-4 items-center text-black-100">
974+
<button
975+
className="px-3 py-1 bg-gray-300 text-gray-600 flex items-center gap-1.5 rounded-lg hover:bg-gray-400 duration-200"
976+
aria-label="Toggle Fullscreen"
977+
onClick={this.toggleFullscreen.bind(this)}
978+
>
979+
<svg className="w-5 h-5 fill-current">
980+
<use xlinkHref="#fullscreen-icon" />
981+
</svg>
982+
<span>Fullscreen</span>
983+
</button>
1107984
<button
1108985
onClick={() => this.props.layoutBtnClickHandler(1)}
1109986
id="layoutBtn1"

‎src/components/Icons.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,9 @@ export function Icons() {
132132
<symbol id="keyboard-icon" viewBox="0 0 24 24">
133133
<path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
134134
</symbol>
135+
<symbol id="fullscreen-icon" viewBox="0 0 24 24">
136+
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
137+
</symbol>
135138
<symbol id="mode-icon" viewBox="0 0 100 100">
136139
<g>
137140
<rect x={0} y={0} width={28} height={47} />

0 commit comments

Comments
 (0)