buzzcode2007/ShopAI-Extension
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rebuild settings GUI

Browse source
This commit is contained in:
buzz-lightsnack-2007 2024-03-25 10:12:50 +08:00
parent 36fb6ce52e
commit 4686f89010
3 changed files with 85 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

114
gui/layouts/settings.json
View file

@ -1,114 +0,0 @@
{
"general": {
"type": "tab",
"content": {
"appearance": {
"type": "group",
"content": {
"showApplicable": {
"type": "tickbox",
"preference": ["preferences", "appearance", "showApplicable"]
},
"injectPage": {
"type": "tickbox",
"preference": ["preferences", "appearance", "injectPage"]
}
}
},
"behavior": {
"type": "group",
"content": {
"autoRun": {
"type": "tickbox",
"description": "autoRunDisclaimer",
"preference": ["preferences", "behavior", "autoRun"]
}
}
}
}
},
"filters": {
"type": "tab",
"content": {
"filters": {
"type": "filter",
"search criteria": {
"search": {
"type": "search",
"directory": ["filters"],
"criteria": [".", "URL"]
},
"add": {
"type": "button",
"action": "add"
}
},
"result selection": {
"foundItems": {
"type": "select"
}
},
"result detail": {
"rulesViewer": {
"type": "textbox",
"result": ["filters", "."]
},
"preferences": {
"type": "footer",
"content": {
"enable": {
"type": "tickbox",
"preference": ["filter preferences", ".", "enabled"]
},
"remove": {
"type": "button",
"action": "remove"
},
"save": {
"type": "button",
"action": "save"
}
}
}
}
}
}
},
"storage": {
"type": "tab",
"content": {
"storage_management": {
"type": "group",
"content": {
"description": {
"type": "label"
},
"delete": {
"type": "button",
"action": "remove"
}
}
}
}
},
"about": {
"type": "tab",
"content": {
"app_logo": {
"type": "image"
},
"manifest_name": {
"type": "label"
},
"extension_version": {
"type": "label"
},
"extension_description": {
"type": "label"
},
"extension_help": {
"type": "label"
}
}
}
}

65
gui/settings.htm
View file

@ -3,5 +3,68 @@
<script type="module" src="scripts/settings.js"></script> <script type="module" src="scripts/settings.js"></script>
</head> </head>
<body> <body>
<main class="window-body has-space">
<menu role="tablist" aria-label="Window with Tabs">
<button role="tab" aria-controls="settings"></button>
<button role="tab" aria-controls="filters"></button>
<button role="tab" aria-controls="storage"></button>
<button role="tab" aria-controls="about"></button>
</menu>
<section class="view_main">
<section role="tabpanel" id="settings">
<fieldset id="settings_general">
<legend></legend>
<form class="field-row">
<input type="checkbox" id="settings_general_showApplicable" data-store="settings,general,showApplicable">
<label for="settings_general_showApplicable"></label>
</form>
<form class="field-row">
<input type="checkbox" id="settings_general_injectToPage" data-store="settings,general,injectToPage">
<label for="settings_general_injectToPage"></label>
</form>
</fieldset>
<fieldset id="settings_behavior">
<legend></legend>
<form class="field-row">
<input type="checkbox" id="settings_behavior_autoRun" data-store="settings,behavior,autoRun">
<label for="settings_behavior_autoRun"></label>
</form>
</fielset>
</section>
<section role="tabpanel" id="filters">
<fieldset id="filters">
<legend></legend>
<label data-name="settings_filters_description"></label>
<div class="field-row action-buttons">
<button id="settings_filters_clear" data-action="filters,clear"></button>
<button id="settings_filters_open" data-action="open,filters"></button>
</div>
</fieldset>
</section>
<section role="tabpanel" id="storage">
<fieldset id="storage">
<legend></legend>
<label data-name="settings_storage_description"></label>
<div class="field-row action-buttons">
<button id="settings_filters_clear" data-action="storage,clear"></button>
</div>
</fieldset>
</section>
</section>
<section role="tabpanel" id="about">
<img id="about_app_logo" />
<h1 data-text="manifest_name"></h1>
<p data-text="extension_version"></p>
<p data-text="extension_description"></p>
<div class="field-row action-buttons">
<button data-action="open,help"></button>
</div>
</section>
</section>
<footer class="field-row action-buttons">
<button class="default" id="apply">Apply</button>
<button id="cancel">Cancel</button>
</footer>
</main>
</div>
</body></html> </body></html>

21
gui/styles/ui.css
View file

@ -0,0 +1,21 @@
/*
ShopAI's GUI appearance
*/
.window-body {
display: flex;
flex-direction: column;
}
.window-body .view_main {
flex-grow: 1;
min-width: 0;
}
.window-body .action-buttons {
display: flex;
align-items: end;
justify-content:end;
}