Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add minimizable console #330

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

add minimizable console #330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1dca15e
add minimizable console
Ben-Owen-3183 Aug 3, 2023
158cfba
added white space back
Ben-Owen-3183 Aug 3, 2023
420750f
corrected accidental deletion
Ben-Owen-3183 Aug 8, 2023
b7cdcc5
moved get and set cookie methods
Ben-Owen-3183 Aug 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions lib/web_console/templates/_inner_console_markup.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<div class='resizer layer'></div>
<div class='console-outer layer'>
<div class='console-actions'>
<div class='minimize-button button' title='close'>-</div>
<div class='close-button button' title='close'>x</div>
</div>
<div class='console-inner'></div>
Expand Down
56 changes: 56 additions & 0 deletions lib/web_console/templates/console.js.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,19 @@ REPLConsole.prototype.install = function(container) {
addClass(container.getElementsByClassName('button'), 'border-box');
addClass(consoleActions, 'pos-fixed pos-right');

var minimizedConsole = document.createElement('div')
minimizedConsole.className = 'minimized-console';
minimizedConsole.innerText = '</>'
document.body.appendChild(minimizedConsole);

var consoleMinimized = this.getCookie('console_minimized')
if(consoleMinimized === null) {
this.setCookie('console_minimized', 'false', 1);
}

container.style.display = consoleMinimized === 'true' ? 'none' : 'block';
minimizedConsole.style.display = consoleMinimized === 'true' ? 'block' : 'none';

// Make the console resizable.
function resizeContainer(ev) {
var startY = ev.clientY;
Expand Down Expand Up @@ -405,6 +418,17 @@ REPLConsole.prototype.install = function(container) {
container.parentNode.removeChild(container);
}

function minimizeContainer(ev) {
var isMinimized = container.style.display === 'none'
container.style.display = isMinimized ? 'block' : 'none';
minimizedConsole.style.display = isMinimized ? 'none' : 'block';
_this.setCookie('console_minimized', isMinimized ? 'false' : 'true', 1);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you use this.commandStorage (a Local Storage backed store) instead of a cookie?

Copy link
Author

@Ben-Owen-3183 Ben-Owen-3183 Aug 16, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I am honest, I am not sure without looking into how it works in full. It clearly persists as the console remembers stuff after a page refresh, I just don't know if I can wack anything into it.

Also, If this pr gets accepted, I actually would like to do more with the front end regarding remembering console height. position, text size and perhaps even some simple styling options such as opacity to see behind the console. If command storage can support that then I don't see why not.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does, it's a wrapper for the native LocalStorage browser API. All modern browsers supports it.

To be even more honest, our frontend has been neglected for years, a clean slate rewrite can be the best thing I do. There is no need on the Action View dependency as well.

}

minimizedConsole.addEventListener('click', function(ev) {
minimizeContainer(ev);
});

var shifted = false;
function shiftConsoleActions() {
if (consoleOuter.scrollHeight > consoleOuter.clientHeight) {
Expand Down Expand Up @@ -437,6 +461,7 @@ REPLConsole.prototype.install = function(container) {

findChild(container, 'resizer').addEventListener('mousedown', resizeContainer);
findChild(consoleActions, 'close-button').addEventListener('click', closeContainer);
findChild(consoleActions, 'minimize-button').addEventListener('click', minimizeContainer);
observer.observe(consoleOuter, { childList: true, subtree: true });

REPLConsole.currentSession = this;
Expand Down Expand Up @@ -493,6 +518,37 @@ REPLConsole.prototype.newPromptBox = function() {
this.scrollToBottom();
};

/**
* Finds the value of cookie with the given name. Returns null if not found.
*/
REPLConsole.prototype.getCookie = function(name) {
var cookieValue = null;
var cookies = document.cookie.split(";");

for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.startsWith(name + "=")) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
return cookieValue;
}

/**
* Sets a cookie with the given name and value. If daysToExpire is not
*/
REPLConsole.prototype.setCookie = function(name, value, daysToExpire) {
var cookieString = name + "=" + encodeURIComponent(value);

if (daysToExpire) {
var expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + daysToExpire);
cookieString += "; expires=" + expirationDate.toUTCString();
}
document.cookie = cookieString;
}

/**
* Remove the caret from the prompt box,
* mainly before adding a new prompt box.
Expand Down
28 changes: 27 additions & 1 deletion lib/web_console/templates/style.css.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
padding: 0;
margin: 0;
background: none repeat scroll 0% 0% #333;
z-index: 9999;
z-index: 2147483647;
}

.console .console-outer {
Expand Down Expand Up @@ -141,6 +141,10 @@
background: #966;
}

.console .button.minimize-button:hover {
background: #966;
}

.console .clipboard {
height: 0px;
padding: 0px;
Expand Down Expand Up @@ -180,3 +184,25 @@
.console.full-screen .close-button {
display: none;
}

.console.full-screen .minimize-button {
display: none;
}

.minimized-console {
position: fixed;
right: 50%;
display: none;
bottom: 0px;
background-color: #333;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
padding: 1px 10px;
font-size: 11px;
color: #fff;
z-index: 2147483647;
}

.minimized-console:hover {
background: #966;
}