yyc12345/SuperScriptMaterializer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update tabcontrol style

Browse Source
This commit is contained in:
yyc12345 2020-08-10 11:45:43 +08:00
parent e40f3d0511
commit d1fbb8ffb7
7 changed files with 165 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
SuperScriptViewer/ServerCore.py
View File

@ -44,9 +44,19 @@ def nospecHandle():
return redirect(url_for('indexHandle')) return redirect(url_for('indexHandle'))
@app.route('/help', methods=['GET']) @app.route('/help', methods=['GET'])
def helpHandle(): def helpMainHandle():
return render_template("help.html") return render_template("help.html")
@app.route('/help/<path:scriptPath>', methods=['GET'])
def helpHandle(scriptPath):
if scriptPath == 'converter':
return render_template("help/converter.html",
tabcontrol_css = url_for('static', filename='tabcontrol.css'),
tabcontrol_js = url_for('static', filename='tabcontrol.js'),
converter_js = url_for('static', filename='converter.js'))
else:
abort(404)
@app.route('/about', methods=['GET']) @app.route('/about', methods=['GET'])
def aboutHandle(): def aboutHandle():
return render_template("about.html", static_icon = url_for('static', filename='icon.png')) return render_template("about.html", static_icon = url_for('static', filename='icon.png'))
@ -104,8 +114,10 @@ def viewerHandle(scriptPath):
gWidth = width, gWidth = width,
gHeight = height, gHeight = height,
hamburgerHistory = hamburger, hamburgerHistory = hamburger,
static_css = url_for('static', filename='viewer.css'), viewer_css = url_for('static', filename='viewer.css'),
static_js = url_for('static', filename='viewer.js'), tabcontrol_css = url_for('static', filename='tabcontrol.css'),
viewer_js = url_for('static', filename='viewer.js'),
tabcontrol_js = url_for('static', filename='tabcontrol.js'),
hamburgerCurrent = currentHamburger, hamburgerCurrent = currentHamburger,
blocks = dbBlocks, blocks = dbBlocks,
cells = dbCells, cells = dbCells,

0
SuperScriptViewer/static/converter.js Normal file
View File

14
SuperScriptViewer/static/tabcontrol.css Normal file
View File

@ -0,0 +1,14 @@
/*side panel style*/
div.tabitem-activated {
background: #0000ff;
}
div.tabitem-activated b {
color: white;
}
div.tabitem-deactivated {
background: #ffffff00;
}
div.tabitem-deactivated b {
color: black;
}

13
SuperScriptViewer/static/tabcontrol.js Normal file
View File

@ -0,0 +1,13 @@
function tabControlSwitcher(tabcontrolIndex, neededIndex) {
//disable all
$(".tabnavigation_" + tabcontrolIndex).each(function () {
$(this).removeClass("tabitem-activated").addClass("tabitem-deactivated");
});
$(".tabpanel_" + tabcontrolIndex).each(function () {
$(this).hide();
});
// set current
$("#tabnavigation_" + tabcontrolIndex + "_" + neededIndex).removeClass("tabitem-deactivated").addClass("tabitem-activated");
$("#tabpanel_" + tabcontrolIndex + "_" + neededIndex).show();
}

15
SuperScriptViewer/static/viewer.css
View File

@ -85,21 +85,6 @@ text.link-delay {
color: black; color: black;
} }
/*side panel style*/
div.tabitem-activated {
background: #0000ff;
}
b.tabitem-activated {
color: white;
}
div.tabitem-deactivated {
background: #ffffff00;
}
b.tabitem-deactivated {
color: black;
}
pre { pre {
border: 1px solid black; border: 1px solid black;
border-radius: 2px; border-radius: 2px;

123
SuperScriptViewer/templates/help/converter.html
View File

@ -4,6 +4,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Help - Converter</title> <title>Help - Converter</title>
<link rel="stylesheet" href="{{tabcontrol_css}}">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
<script src="{{tabcontrol_js}}"></script>
<script src="{{converter_js}}"></script>
</head> </head>
<body> <body>
@ -11,39 +15,118 @@
<p>This page provide some useful converter for your decoding work. All converter is interactive..</p> <p>This page provide some useful converter for your decoding work. All converter is interactive..</p>
<br /> <br />
<h2>Reverse C style byte array</h2> <div style="display: flex; flex-flow: row; height: 30px; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid black;">
<div id="tabnavigation_1_1" class="tabnavigation_1 tabitem-activated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 1);"><b>Reverse C style byte array</b></div>
<div id="tabnavigation_1_2" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 2);"><b>C style byte array to HEX</b></div>
<div id="tabnavigation_1_3" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 3);"><b>C style byte array to DEC</b></div>
<div id="tabnavigation_1_4" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 4);"><b>Lowcase upcase converter</b></div>
</div>
<div id="tabpanel_1_1" class="tabpanel_1">
<p>This converter will reverse your inputed C style byte array. Actually, it take responsibility for the convert between big-endian and little-endian.<br /> <p>This converter will reverse your inputed C style byte array. Actually, it take responsibility for the convert between big-endian and little-endian.<br />
Typical and legal input just like this: <code>0x00, 0xBb, 0xff, 0xFF</code><br /> Typical and legal input just like this: <code>0x00, 0xBb, 0xff, 0xFF</code><br />
Support multi-input. Use line break to split each input.</p> Support multi-input. Use line break to split each input.</p>
<p>Input:</p> <table>
<textarea style="width: 350px; height: 100px; resize: none;"></textarea> <tr>
<p>Output:</p> <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
<textarea style="width: 350px; height: 100px; resize: none;" readonly="true"></textarea> </tr>
<tr>
<td align="left">Input</td>
<th colspan="2">&nbsp;</th>
</tr>
<tr>
<td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
<td style="width: 150px;">&nbsp;</td>
<td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
</tr>
<tr>
<th colspan="2">&nbsp;</th>
<td align="right">Output</td>
</tr>
<tr>
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;" readonly="true"></textarea></th>
</tr>
</table>
</div>
<h2>C style byte array to HEX</h2> <div id="tabpanel_1_2" class="tabpanel_1" style="display: none;">
<p>This converter will converte provided C style byte array into HEX number. It is double interactive.<br /> <p>This converter will converte provided C style byte array into HEX number. It is double interactive.<br />
Acceptable byte array should follow little-endian format.<br /> Acceptable byte array should follow little-endian format.<br />
Support multi-input. Use line break to split each input.</p> Support multi-input. Use line break to split each input.</p>
<p>Byte array:</p> <table>
<textarea style="width: 350px; height: 100px; resize: none;"></textarea> <tr>
<p>HEX number:</p> <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
<textarea style="width: 350px; height: 100px; resize: none;"></textarea> </tr>
<tr>
<td align="left">Byte array</td>
<th colspan="2">&nbsp;</th>
</tr>
<tr>
<td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
<td style="width: 150px;">&nbsp;</td>
<td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
</tr>
<tr>
<th colspan="2">&nbsp;</th>
<td align="right">HEX number</td>
</tr>
<tr>
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
</tr>
</table>
</div>
<h2>C style byte array to DEC</h2> <div id="tabpanel_1_3" class="tabpanel_1" style="display: none;">
<p>This converter will converte provided C style byte array into DEC number. It is double interactive.<br /> <p>This converter will converte provided C style byte array into DEC number. It is double interactive.<br />
Acceptable byte array should follow little-endian format.<br /> Acceptable byte array should follow little-endian format.<br />
Support multi-input. Use line break to split each input.</p> Support multi-input. Use line break to split each input.</p>
<p>Byte array:</p> <table>
<textarea style="width: 350px; height: 100px; resize: none;"></textarea> <tr>
<p>DEC number:</p> <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
<textarea style="width: 350px; height: 100px; resize: none;"></textarea> </tr>
<tr>
<td align="left">Byte array</td>
<th colspan="2">&nbsp;</th>
</tr>
<tr>
<td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
<td style="width: 150px;">&nbsp;</td>
<td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
</tr>
<tr>
<th colspan="2">&nbsp;</th>
<td align="right">DEC number</td>
</tr>
<tr>
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
</tr>
</table>
</div>
<h2>Lowcase upcase converter</h2> <div id="tabpanel_1_4" class="tabpanel_1" style="display: none;">
<p>This converter will provide the convert between lowcase and upcase string. It is double interactive.</p> <p>This converter will provide the convert between lowcase and upcase string. It is double interactive.</p>
<p>Lowcase:</p> <table>
<textarea style="width: 350px; height: 100px; resize: none;"></textarea> <tr>
<p>Upcase:</p> <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
<textarea style="width: 350px; height: 100px; resize: none;"></textarea> </tr>
<tr>
<td align="left">Lowcase</td>
<th colspan="2">&nbsp;</th>
</tr>
<tr>
<td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
<td style="width: 150px;">&nbsp;</td>
<td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
</tr>
<tr>
<th colspan="2">&nbsp;</th>
<td align="right">Upcase</td>
</tr>
<tr>
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
</tr>
</table>
</div>
</body> </body>

18
SuperScriptViewer/templates/viewer.html
View File

@ -4,9 +4,11 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Script Viewer</title> <title>Script Viewer</title>
<link rel="stylesheet" href="{{static_css}}"> <link rel="stylesheet" href="{{viewer_css}}">
<link rel="stylesheet" href="{{tabcontrol_css}}">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
<script src="{{static_js}}"></script> <script src="{{viewer_js}}"></script>
<script src="{{tabcontrol_js}}"></script>
</head> </head>
<body style="display: flex; flex-flow: row; height: 100%; width: 100%; margin: 0; padding: 0;" onkeydown="keyboardNavigation(true);" onkeyup="keyboardNavigation(false);"> <body style="display: flex; flex-flow: row; height: 100%; width: 100%; margin: 0; padding: 0;" onkeydown="keyboardNavigation(true);" onkeyup="keyboardNavigation(false);">
@ -81,18 +83,18 @@
<div id="sidepanelContainer" style="display: flex; flex-flow: column; background: #cfcfcf; height: 100%; width: 20%; margin: 0; padding: 0; border-left: 1px solid black;"> <div id="sidepanelContainer" style="display: flex; flex-flow: column; background: #cfcfcf; height: 100%; width: 20%; margin: 0; padding: 0; border-left: 1px solid black;">
<div style="display: flex; flex-flow: row; height: 30px; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid black;"> <div style="display: flex; flex-flow: row; height: 30px; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid black;">
<div class="tabitem tabitem1 tabitem-activated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(0);"><b style="margin: 0;" class="tabitem tabitem1 tabitem-activated">Properties</b></div> <div id="tabnavigation_1_1" class="tabnavigation_1 tabitem-activated" style="height: 100%; width: 33.33%; text-align: center;" onclick="tabControlSwitcher(1, 1);"><b style="margin: 0;">Properties</b></div>
<div class="tabitem tabitem2 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(1);"><b style="margin: 0;" class="tabitem tabitem2 tabitem-deactivated">Display</b></div> <div id="tabnavigation_1_2" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="tabControlSwitcher(1, 2);"><b style="margin: 0;">Display</b></div>
<div class="tabitem tabitem3 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(2);"><b style="margin: 0;" class="tabitem tabitem3 tabitem-deactivated">Tools</b></div> <div id="tabnavigation_1_3" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="tabControlSwitcher(1, 3);"><b style="margin: 0;">Tools</b></div>
</div> </div>
<div id="sidepanel-properties" style="display: flex; flex-flow: column;width: 100%; height: 100%; display: flex; flex-flow: column;"> <div id="tabpanel_1_1" class="tabpanel_1" style="display: flex; flex-flow: column;width: 100%; height: 100%; display: flex; flex-flow: column;">
<p style="margin: 5px;">Properties of <b id="sidepanel-properties-id">---</b></p> <p style="margin: 5px;">Properties of <b id="sidepanel-properties-id">---</b></p>
<div id="sidepanel-properties-container" style="width: 100%; height: 100%; overflow: scroll;"> <div id="sidepanel-properties-container" style="width: 100%; height: 100%; overflow: scroll;">
</div> </div>
</div> </div>
<div id="sidepanel-display" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;"> <div id="tabpanel_1_2" class="tabpanel_1" id="sidepanel-display" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;">
<p style="margin: 5px;">Render:<br /> <p style="margin: 5px;">Render:<br />
<input type="checkbox" id="sidepanel-display-plink" value="1" onclick="settingChange(&quot;plink&quot;);">Show pLink and eLink</input> <input type="checkbox" id="sidepanel-display-plink" value="1" onclick="settingChange(&quot;plink&quot;);">Show pLink and eLink</input>
</p> </p>
@ -103,7 +105,7 @@
</p> </p>
</div> </div>
<div id="sidepanel-tools" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;"> <div id="tabpanel_1_3" class="tabpanel_1" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;">
<p style="margin: 5px;">Object finder:<br /> <p style="margin: 5px;">Object finder:<br />
<input type="text" id="sidepanel-tools-objfinder"></input><br /> <input type="text" id="sidepanel-tools-objfinder"></input><br />
<button style="height: 30px; margin: 10px 0 10px 0;">Find</button> <button style="height: 30px; margin: 10px 0 10px 0;">Find</button>