lat5211/devstar_plugin
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: tab -> 2 spaces in all html files

Browse Source
This commit is contained in:
Levi Yan
2024-11-06 00:30:48 +08:00
parent 5b886c1409
commit 270b36c464
2 changed files with 902 additions and 877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
test/home.html
View File

@@ -6,30 +6,40 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embedded page</title> <title>Embedded page</title>
<link rel="stylesheet" href="web_src/css/themes/theme-gitea-auto.css">
<style> <style>
/* 弹窗基本样式 */ /* 弹窗基本样式 */
.modal { .modal {
display: none; /* 默认隐藏 */ display: none;
position: fixed; /* 固定定位 */ /* 默认隐藏 */
position: fixed;
/* 固定定位 */
left: 0; left: 0;
top: 0; top: 0;
width: 100%; /* 全屏宽 */ width: 100%;
height: 100%; /* 全屏高 */ /* 全屏宽 */
background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */ height: 100%;
z-index: 1; /* 确保在顶部 */ /* 全屏高 */
background-color: rgba(0, 0, 0, 0.5);
/* 半透明黑色背景 */
z-index: 1;
/* 确保在顶部 */
} }
/* 弹窗内容框样式 */ /* 弹窗内容框样式 */
.modal-content { .modal-content {
background-color: #fefefe; background-color: #fefefe;
margin: 15% auto; /* 15% 从顶部开始，自动水平居中 */ margin: 15% auto;
/* 15% 从顶部开始，自动水平居中 */
padding: 20px; padding: 20px;
border: 1px solid #888; border: 1px solid #888;
width: 30%; /* 弹窗宽度 */ width: 30%;
/* 弹窗宽度 */
} }
/* 关闭按钮样式 */ /* 关闭按钮样式 */
@@ -49,9 +59,12 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
.alert { .alert {
position: fixed; position: fixed;
top: 20px; /* 距离顶部20px */ top: 20px;
left: 50%; /* 水平居中 */ /* 距离顶部20px */
transform: translateX(-50%); /* 水平居中调整 */ left: 50%;
/* 水平居中 */
transform: translateX(-50%);
/* 水平居中调整 */
background-color: green; background-color: green;
color: white; color: white;
text-align: center; text-align: center;
@@ -59,42 +72,54 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
border-radius: 5px; border-radius: 5px;
display: none; display: none;
z-index: 2; z-index: 2;
width: auto; /* 自动宽度 */ width: auto;
max-width: 60%; /* 最大宽度60% */ /* 自动宽度 */
max-width: 60%;
/* 最大宽度60% */
} }
/* table样式 */ /* table样式 */
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
th, td {
th,
td {
border: 1px solid black; border: 1px solid black;
padding: 8px; padding: 8px;
text-align: left; text-align: left;
} }
.required::before { .required::before {
content: "*"; content: "*";
color: red; color: red;
} }
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
label, input, textarea { label,
input,
textarea {
margin-bottom: 10px; margin-bottom: 10px;
} }
input, textarea { input,
textarea {
padding: 8px; padding: 8px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
} }
.button-container { .button-container {
display: flex; display: flex;
/* justify-content: space-between; */ /* justify-content: space-between; */
} }
ton { ton {
width: 100px; width: 100px;
height: 30px; height: 30px;
@@ -104,6 +129,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
} }
button:hover { button:hover {
background-color: #45a049; background-color: #45a049;
} }
@@ -116,6 +142,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
<div id="loginModal" class="modal"> <div id="loginModal" class="modal">
<div class="modal-content"> <div class="modal-content">
<span class="close" onclick="closeLoginModal()">&times;</span> <span class="close" onclick="closeLoginModal()">&times;</span>
<div>
<h2>Login</h2> <h2>Login</h2>
<form id="loginForm"> <form id="loginForm">
<label for="username">Username:</label> <label for="username">Username:</label>
@@ -126,6 +153,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
</form> </form>
</div> </div>
</div> </div>
</div>
<button onclick="openLoginModal()">Login</button> <button onclick="openLoginModal()">Login</button>
<button onclick="logout()">Logout</button> <button onclick="logout()">Logout</button>
@@ -140,11 +168,12 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
<form> <form>
<!-- project settings --> <!-- project settings -->
<label class="required" for="projectName">Name</label> <label class="required" for="projectName">Name</label>
<input type="text" id="projectName" name="projectName" ><br><br> <input type="text" id="projectName" name="projectName"><br><br>
<label for="projectDesc">Description</label> <label for="projectDesc">Description</label>
<textarea id="projectDesc" name="projectDesc" placeholder="(Optional)"></textarea><br><br> <textarea id="projectDesc" name="projectDesc" placeholder="(Optional)"></textarea><br><br>
<label for="repoURL">Repo URL</label> <label for="repoURL">Repo URL</label>
<input type="text" id="repoURL" name="repoURL" placeholder="(Optional) Project repository you want to clone"><br><br> <input type="text" id="repoURL" name="repoURL"
placeholder="(Optional) Project repository you want to clone"><br><br>
<hr> <hr>
<!-- repo settings--> <!-- repo settings-->
<label for="template"> <label for="template">
@@ -200,7 +229,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
var REPOLIST = [] var REPOLIST = []
var PROJECTLIST = [] var PROJECTLIST = []
window.onload = async function() { window.onload = async function () {
await getUserTokenFromVSCode() await getUserTokenFromVSCode()
.then(async userToken => { .then(async userToken => {
// verify user token // verify user token
@@ -257,7 +286,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
async function getUsernameFromVSCode() { async function getUsernameFromVSCode() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
await communicateVSCodeByWebview('getUsername', null) await communicateVSCodeByWebview('getUsername', null)
.then(async data=> { .then(async data => {
const username = data.username const username = data.username
if (username === undefined) { if (username === undefined) {
reject('username is undefined') reject('username is undefined')
@@ -384,7 +413,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
}); });
} }
function generateTokenName(length=10) { function generateTokenName(length = 10) {
// tokenName is random string and number and _ combination (10 characters) // tokenName is random string and number and _ combination (10 characters)
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_'; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_';
let name = ''; let name = '';
@@ -414,9 +443,9 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
communicateVSCodeByWebview('setUserToken', { userToken: userToken }) communicateVSCodeByWebview('setUserToken', { userToken: userToken })
.then(result => { .then(result => {
if (result.ok) { if (result.ok) {
console.log(removeUserToken ? 'User token has been removed from vscode' :'User token has been stored in vscode') console.log(removeUserToken ? 'User token has been removed from vscode' : 'User token has been stored in vscode')
} else { } else {
console.error(removeUserToken ? 'Failed to remove user token from vscode': 'Failed to store user token into vscode') console.error(removeUserToken ? 'Failed to remove user token from vscode' : 'Failed to store user token into vscode')
} }
}) })
.catch(error => { .catch(error => {
@@ -430,12 +459,12 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
removeUsername = true; removeUsername = true;
} }
await communicateVSCodeByWebview('setUsername', {username: username}) await communicateVSCodeByWebview('setUsername', { username: username })
.then(result => { .then(result => {
if (result.ok) { if (result.ok) {
console.log(removeUsername ? 'User name has been removed from vscode': 'User name has been stored in vscode') console.log(removeUsername ? 'User name has been removed from vscode' : 'User name has been stored in vscode')
} else { } else {
console.error(removeUsername ? 'Failed to removing user name from vscode': 'Failed to store user name in vscode') console.error(removeUsername ? 'Failed to removing user name from vscode' : 'Failed to store user name in vscode')
} }
}) })
.catch(error => { .catch(error => {
@@ -561,7 +590,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
document.getElementById('myModal').style.display = "none"; document.getElementById('myModal').style.display = "none";
} }
// 点击窗外关闭弹窗 // 点击窗外关闭弹窗
window.onclick = function(event) { window.onclick = function (event) {
if (event.target == document.getElementById('myModal')) { if (event.target == document.getElementById('myModal')) {
closeModal(); closeModal();
} }
@@ -679,7 +708,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
const devContainerWorkDir = data.data.devContainerWorkDir const devContainerWorkDir = data.data.devContainerWorkDir
// default: open with key // default: open with key
communicateVSCodeByWebview('firstOpenRemoteFolder', {host: `${devContainerHost}`, username: `${devContainerUsername}`, port: `${devContainerPort}`, path: `${devContainerWorkDir}`}) communicateVSCodeByWebview('firstOpenRemoteFolder', { host: `${devContainerHost}`, username: `${devContainerUsername}`, port: `${devContainerPort}`, path: `${devContainerWorkDir}` })
} else { } else {
// show Error to User // show Error to User
showAlert("打开容器失败！", 1500) showAlert("打开容器失败！", 1500)
@@ -822,11 +851,11 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
function firstOpenRemoteFolder(host, username, password, port, path) { function firstOpenRemoteFolder(host, username, password, port, path) {
const message = { const message = {
action: 'firstOpenRemoteFolder', action: 'firstOpenRemoteFolder',
host : host, host: host,
username : username, username: username,
password : password, password: password,
port : port, port: port,
path : path, path: path,
} }
// 向iframe父页面发送消息 // 向iframe父页面发送消息
window.parent.postMessage(message, '*'); window.parent.postMessage(message, '*');
@@ -835,8 +864,8 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
function openRemoteFolder(host, path) { function openRemoteFolder(host, path) {
const message = { const message = {
action: 'openRemoteFolder', action: 'openRemoteFolder',
host : host, host: host,
path : path, path: path,
} }
// 向iframe父页面发送消息 // 向iframe父页面发送消息
window.parent.postMessage(message, '*'); window.parent.postMessage(message, '*');
@@ -848,7 +877,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
function showAlert(alertText, duration) { function showAlert(alertText, duration) {
document.getElementById('alertBox').innerHTML = alertText; document.getElementById('alertBox').innerHTML = alertText;
document.getElementById('alertBox').style.display = 'block'; document.getElementById('alertBox').style.display = 'block';
setTimeout(function() { setTimeout(function () {
document.getElementById('alertBox').style.display = 'none'; document.getElementById('alertBox').style.display = 'none';
}, duration); // 消息显示 duration/1000 秒后消失 }, duration); // 消息显示 duration/1000 秒后消失
} }

12
test/index.html
View File

@@ -14,12 +14,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
</head> </head>
<body> <body>
<iframe <iframe id="embedded-devstar" src="http://localhost:8080/test/home.html" width="100%" height="100%" frameborder="0"
id="embedded-devstar"
src="http://localhost:8080/test/home.html"
width="100%"
height="100%"
frameborder="0"
style="border: 0; left: 0; right: 0; bottom: 0; top: 0; position:absolute;"> style="border: 0; left: 0; right: 0; bottom: 0; top: 0; position:absolute;">
</iframe> </iframe>
@@ -92,8 +87,8 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
const dataFromVSCodeResponse = await communicateVSCode(actionFromHome, dataFromHome) const dataFromVSCodeResponse = await communicateVSCode(actionFromHome, dataFromHome)
var iframe = document.getElementById('embedded-devstar'); var iframe = document.getElementById('embedded-devstar');
if(iframe && iframe.contentWindow) { if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage({action: actionFromHome, data: dataFromVSCodeResponse}, '*') iframe.contentWindow.postMessage({ action: actionFromHome, data: dataFromVSCodeResponse }, '*')
} }
} }
} catch (error) { } catch (error) {
@@ -102,4 +97,5 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
}); });
</script> </script>
</body> </body>
</html> </html>