Emulation/fpPS4-Temmie-s-Launcher
1
0
Fork 0
mirror of https://github.com/themitosan/fpPS4-Temmie-s-Launcher.git synced 2024-06-22 22:22:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

GUI: Move grid icon size to game list, Update launcher actions display mode

Browse source
This commit is contained in:
TemmieHeartz 2023-01-03 11:09:13 -03:00
parent 0146d0a560
commit 7da9609414
4 changed files with 59 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
App/css/style.css
View file

@ -109,7 +109,12 @@ img {
width: 100%;
height: 22px;
padding: 8px;
display: flex;
flex-wrap: nowrap;
position: absolute;
align-items: center;
align-content: center;
justify-content: center;
background-image: linear-gradient(45deg, #28467f, #1c325f);
}
.DIV_OPTIONS {
@ -404,23 +409,25 @@ img {
padding-bottom: 4px;
margin: 2px 0px 2px 0px;
}
.BTN_right {
float: right;
margin-right: 8px;
.BTN_actions {
margin-left: 2px;
margin-right: 2px;
}
.INPUT_gameListSearch {
width: 196px;
margin: -8px;
border: none;
outline: none;
color: #fffb8e;
text-align: center;
font-family: monospace;
background-image: none;
background-color: #0000;
width: calc(100% - 628px);
margin: 0px 16px 0px 16px;
padding: 12px 0px 12px 6px;
}
.INPUT_gameListSearch:focus {
background-image: linear-gradient(45deg, #36185eb0, #0000);
background-image: linear-gradient(90deg, #0000, #36185eb0, #0000);
}
.APP_LOG {
color: #0f0;
@ -445,9 +452,8 @@ img {
margin-top: 2px;
}
.BTN_STOP {
float: right;
margin-right: 16px;
padding: 1px 98px 1px 100px;
margin: 0px 4px 0px 4px;
padding: 1px 70px 1px 70px;
}
.BTN_SAVE {
font-size: 18px;

13
App/index.htm
View file

@ -61,7 +61,7 @@
<div class="DIV_settingsEntry DIV_settingsEntryFlex" id="DIV_settingsGridIconSize">
Grid Icon size:
<input type="range" min="116" max="512" step="0.01" value="116" id="RANGE_settingsGridIconSize" onmouseup="APP.design.renderSettings(!0);" onkeyup="APP.design.renderSettings(!0);">
<label id="LABEL_settingsGridIconSize">???</label>%
</div>
@ -189,11 +189,14 @@
<!-- Search -->
<input type="text" class="INPUT_gameListSearch" id="INPUT_gameListSearch" placeholder="Search: Insert game name..." oninput="APP.gameList.search();">
<!-- Grid icon size -->
<input type="range" min="116" max="512" step="0.01" value="116" id="RANGE_settingsGridIconSize" oninput="APP.design.renderSettings(!0);APP.design.renderGameList();" onkeyup="APP.design.renderSettings(!0);APP.design.renderGameList();">
<input type="button" class="APP_btn BTN_actions" id="BTN_REFRESH" onclick="APP.gameList.load();" value="Refresh game list">
<input type="button" class="APP_btn BTN_actions" id="BTN_SETTINGS" onclick="APP.design.toggleSettings();" value="Settings">
<input type="button" class="APP_btn BTN_actions" id="BTN_CLEAR_LOG" onclick="APP.clearLog();" value="Clear Log">
<input type="button" class="APP_btn BTN_actions" onclick="APP.about();" value="About">
<input type="button" class="APP_btn BTN_STOP" id="BTN_KILL" onclick="APP.emuManager.killEmu();" disabled="disabled" value="Stop fpPS4">
<input type="button" class="APP_btn BTN_right" onclick="APP.about();" value="About">
<input type="button" class="APP_btn BTN_right" id="BTN_CLEAR_LOG" onclick="APP.clearLog();" value="Clear log">
<input type="button" class="APP_btn BTN_right" id="BTN_SETTINGS" onclick="APP.design.toggleSettings();" value="Settings">
<input type="button" class="APP_btn BTN_right" id="BTN_REFRESH" onclick="APP.gameList.load();" value="Refresh game list">
</div>

51
App/js/design.js
View file

@ -51,6 +51,7 @@ temp_DESIGN = {
// Process game list
Object.keys(gList).forEach(function(cGame){
// Settings for display mode: Normal
var appTitle = '',
gameBgAndIcon,
gameEntryStyle = '',
@ -79,21 +80,26 @@ temp_DESIGN = {
gameMetadata = '';
}
// Display mode: Compact
if (APP.settings.data.gameListMode === 'compact'){
gameMetadata = '';
gameBgAndIcon = '';
appNameClass = 'LABEL_gameTitleCompact';
classDisplayEntryMode = ' GAME_ENTRY_COMPACT';
}
// Display modes
switch (APP.settings.data.gameListMode){
// Display mode: Compact
case 'compact':
gameMetadata = '';
gameBgAndIcon = '';
appNameClass = 'LABEL_gameTitleCompact';
classDisplayEntryMode = ' GAME_ENTRY_COMPACT';
break;
// Display mode: Grid
case 'grid':
appTitle = gList[cGame].name;
classGameDetailsMode = 'none';
classDisplayEntryMode = ' GAME_ENTRY_GRID';
gameEntryStyle = 'border-radius: ' + APP.settings.data.gridBorderRadius + 'px;'
gameBgAndIcon = '<div class="none" style="background-image: ' + bgPath + '";></div><img class="IMG_GAME_ICON IMG_GRID" style="width: ' + gridIconSize + 'px;" src="' + gList[cGame].icon + '">';
break;
// Display mode: Grid
if (APP.settings.data.gameListMode === 'grid'){
appTitle = gList[cGame].name;
classGameDetailsMode = 'none';
classDisplayEntryMode = ' GAME_ENTRY_GRID';
gameEntryStyle = 'border-radius: ' + APP.settings.data.gridBorderRadius + 'px;'
gameBgAndIcon = '<div class="none" style="background-image: ' + bgPath + '";></div><img class="IMG_GAME_ICON IMG_GRID" style="width: ' + gridIconSize + 'px;" src="' + gList[cGame].icon + '">';
}
/*
@ -356,7 +362,11 @@ temp_DESIGN = {
});
showList.forEach(function(cElement){
TMS.css(cElement, {'display': 'block'});
if (cElement === 'DIV_ACTIONS'){
TMS.css(cElement, {'display': 'flex'});
} else {
TMS.css(cElement, {'display': 'block'});
}
});
// Render Settings
@ -406,6 +416,11 @@ temp_DESIGN = {
document.getElementById('RANGE_settingsEmuRunningBgOpacity').value = cSettings.bgEmuOpacity;
document.getElementById('RANGE_settingsGridIconBorderRadius').value = cSettings.gridBorderRadius;
// Fix for grid size
if (cSettings.gridIconSize > 512){
cSettings.gridIconSize = 512;
}
// Update settings GUI
this.updateLauncherSettingsGUI();
@ -420,12 +435,18 @@ temp_DESIGN = {
case 'normal':
TMS.css('DIV_settingsGridOptions', {'display': 'none'});
TMS.css('RANGE_settingsGridIconSize', {'display': 'none'});
TMS.css('DIV_settingsShowBgOnGameEntry', {'display': 'flex'});
break;
case 'compact':
TMS.css('RANGE_settingsGridIconSize', {'display': 'none'});
break;
case 'grid':
TMS.css('DIV_settingsGridOptions', {'display': 'block'});
TMS.css('DIV_settingsShowBgOnGameEntry', {'display': 'none'});
TMS.css('RANGE_settingsGridIconSize', {'display': 'inline-block'});
break;
}

2
package.json
View file

@ -11,7 +11,7 @@
"width": 1186,
"height": 710,
"toolbar": true,
"min_width": 834,
"min_width": 1062,
"min_height": 626,
"fullscreen": false,
"position": "center",