Skip to content

Commit

Permalink
feat(mobile): replaced the scrolling menu and associated notification…
Browse files Browse the repository at this point in the history 
… with a hamburger + popup menu

re #17
  • Loading branch information
@will-moss
will-moss committed Oct 6, 2024
1 parent bf24d94 commit b2814b9
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 88 deletions.
117 changes: 77 additions & 40 deletions app/client/assets/js/isaiah.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1376,17 +1376,7 @@
else {
hgetMobileControl('previousTab').classList.add('is-active');
hgetMobileControl('nextTab').classList.add('is-active');
hgetMobileControl('menu').classList.add('is-active');
hgetMobileControl('bulk').classList.add('is-active');
hgetMobileControl('shellSystem').classList.add('is-active');
hgetMobileControl('theme').classList.add('is-active');
hgetMobileControl('parameters').classList.add('is-active');
if (_state.communication.availableAgents.length > 0)
hgetMobileControl('agent').classList.add('is-active');
if (_state.communication.availableHosts.length > 0)
hgetMobileControl('host').classList.add('is-active');
hgetMobileControl('overview').classList.add('is-active');
hgetMobileControl('jump').classList.add('is-active');
hgetMobileControl('mobileMenu').classList.add('is-active');
}

// 12. Apply extra user settings if any
Expand Down Expand Up @@ -1628,11 +1618,6 @@
* @type {boolean}
*/
enableSyntaxHighlight: true,

/**
* @type {boolean}
*/
_mobileInstructionsDisplayed: false,
},

/**
Expand Down Expand Up @@ -2768,6 +2753,79 @@
cmdRun(cmds._showPopup, 'help');
},

/**
* Public - Mobile-only - Show the mobile menu
*/
mobileMenu: function () {
state.menu.key = 'menu';
state.helper = 'menu';
state.menu.actions = [
{
Label: 'Show Single Actions',
Command: 'menu',
RequiresResource: false,
RunLocally: true,
},
{
Label: 'Show Bulk Actions',
Command: 'bulk',
RequiresResource: false,
RunLocally: true,
},
{
Label: 'Open System Shell',
Command: 'shellSystem',
RequiresResource: false,
RunLocally: true,
},
{
Label: 'Change Theme',
Command: 'theme',
RequiresResource: false,
RunLocally: true,
},
{
Label: 'Change Preferences',
Command: 'parameters',
RequiresMenuAction: true,
RequiresResource: false,
RunLocally: true,
},
{
Label: 'Show Overview',
Command: 'overview',
RequiresResource: false,
RunLocally: true,
},
{
Label: 'Perform Global Search',
Command: 'jump',
RequiresResource: false,
RunLocally: true,
},
];

if (state.communication.availableAgents.length > 0)
state.menu.actions.push({
Label: 'Change Agent',
Command: 'agent',
RequiresResource: false,
RunLocally: true,
});

if (state.communication.availableHosts.length > 0)
state.menu.actions.push({
Label: 'Change Host',
Command: 'host',
RequiresResource: false,
RunLocally: true,
});

state.navigation.currentMenuRow = 1;

cmdRun(cmds._showPopup, 'menu');
},

/**
* Public - Show the menu associated with the current tab
*/
Expand Down Expand Up @@ -2883,19 +2941,19 @@
cmdRun(cmds._clearPopup);

if (attributes.useRow) {
cmdRun(cmds[attributes.command], sgetCurrentRow());
cmdRun(cmds._clearMenu);
cmdRun(cmds[attributes.command], sgetCurrentRow());
return;
}

if (attributes.useMenuAction) {
cmdRun(cmds[attributes.command], _menuAction);
cmdRun(cmds._clearMenu);
cmdRun(cmds[attributes.command], _menuAction);
return;
}

cmdRun(cmds[attributes.command]);
cmdRun(cmds._clearMenu);
cmdRun(cmds[attributes.command]);
}

return;
Expand Down Expand Up @@ -4035,19 +4093,6 @@
};

// === Misc
const showMobileInstructions = () => {
localStorage.setItem('_mobileInstructionsDisplayed', true);

state.message.category = 'report';
state.message.type = 'success';
state.message.title = 'Welcome';
state.message.content =
"It seems that you're on a mobile device. Please note that you have more than 4 buttons available in the lower left scrollable menu.";
state.message.isEnabled = true;
state.helper = 'message';

cmdRun(cmds._showPopup, 'message');
};

// === Variables

Expand Down Expand Up @@ -4704,13 +4749,6 @@
state.isLoading = false;
if (!state.isFullyEmpty) cmdRun(cmds._inspectorTabs);

// Show mobile instructions on first launch
if (
!state.settings._mobileInstructionsDisplayed &&
window.screen.availWidth <= 440
)
showMobileInstructions();

break;

case 'init-chunk':
Expand Down Expand Up @@ -5214,7 +5252,6 @@
state.settings.enableOverviewOnLaunch = lsGet('enableOverviewOnLaunch', true);
state.settings.enableJumpFuzzySearch = lsGet('enableJumpFuzzySearch', true);
state.settings.enableSyntaxHighlight = lsGet('enableSyntaxHighlight', true);
state.settings._mobileInstructionsDisplayed = lsGet('_mobileInstructionsDisplayed', false);
}

// 1.1. Load fuzzy-search library if enabled by the user
Expand Down
56 changes: 8 additions & 48 deletions app/client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<!-- SCREEN -- LOADING -->
<div class="screen for-loading is-active">
<div class="loader">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 0 1 1.06 0Z" />
</svg>
</div>
Expand Down Expand Up @@ -74,75 +74,35 @@

<div class="mobile-controls">
<button class="has-icon" data-action="previousTab">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
<button class="has-icon" data-action="nextTab">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
<button class="has-icon" data-action="menu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<button class="has-icon" data-action="mobileMenu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<button class="has-icon" data-action="bulk">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
</svg>
</button>
<button class="has-icon" data-action="reject">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<button class="has-icon" data-action="confirm">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
</svg>
</button>
<button class="has-icon" data-action="ttyQuit">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<button class="has-icon" data-action="shellSystem">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
</button>
<button class="has-icon" data-action="theme">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z" />
</svg>
</button>
<button class="has-icon" data-action="parameters">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
</svg>
</button>
<button class="has-icon" data-action="agent">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-2.25-1.313M21 7.5v2.25m0-2.25-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3 2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75 2.25-1.313M12 21.75V19.5m0 2.25-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
</svg>
</button>
<button class="has-icon" data-action="host">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
</svg>
</button>
<button class="has-icon" data-action="overview">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z" />
</svg>
</button>
<button class="has-icon" data-action="jump">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
</div>
</div>

Expand Down

0 comments on commit b2814b9

Please sign in to comment.