Skip to content

Commit

Permalink
Update UI and layout (#73)
Browse files Browse the repository at this point in the history
* Adjust layout and tooltip of the buttons

* Translate session input placeholder and tooltip

* Fix prettier errors

* Reload the popup window on submit
  • Loading branch information
BartoszKlonowski authored Apr 27, 2023
1 parent 64000ec commit dba5d6f
Show file tree
Hide file tree
Showing 9 changed files with 27 additions and 15 deletions.
4 changes: 4 additions & 0 deletions app/src/engine/Background.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,21 @@ browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
switch (message.command) {
case "save":
correct = engine.saveSession(allTabs, message.session);
correct = true;
break;
case "delete":
correct = engine.deleteSession(message.session);
correct = true;
break;
case "reopen":
correct = engine.reopenSession(message.session);
correct = true;
break;
default:
throw {message: `Unrecognized action from ${JSON.stringify(sender)}`};
}
if (correct === true) {
window.location.reload();
sendResponse();
}
})
Expand Down
4 changes: 3 additions & 1 deletion app/src/engine/translations/de.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"save": "Speichern",
"delete": "Löschen",
"reopen": "Wieder aufnehmen"
"reopen": "Wieder aufnehmen",
"session-placeholder": "Geben Sie den Namen der Sitzung ein",
"session-tooltip": "Der Name der Sitzung"
}
4 changes: 3 additions & 1 deletion app/src/engine/translations/en.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"save": "Save",
"delete": "Delete",
"reopen": "Reopen"
"reopen": "Reopen",
"session-placeholder": "Enter the name of the session",
"session-tooltip": "Name of the session"
}
4 changes: 3 additions & 1 deletion app/src/engine/translations/fr.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"save": "Sauvegarder",
"delete": "Effacer",
"reopen": "Reprendre"
"reopen": "Reprendre",
"session-placeholder": "Entrer le nom de la session",
"session-tooltip": "Le nom de la session"
}
4 changes: 3 additions & 1 deletion app/src/engine/translations/pl.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"save": "Zapisz",
"delete": "Usuń",
"reopen": "Otwórz ponownie"
"reopen": "Otwórz ponownie",
"session-placeholder": "Wprowadź nazwę sesji",
"session-tooltip": "Nazwa sesji"
}
8 changes: 3 additions & 5 deletions app/src/popup/MainPopup.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ html, body {
}

.panel-session-name {
display: flex;
flex-direction: column;
height: 50;
justify-content: center;
margin-top: 15px;
Expand Down Expand Up @@ -37,11 +39,6 @@ form {
vertical-align: top;
}

.panel-session-name {
display: flex;
flex-direction: column;
}

.session-name-input {
width: 100%;
margin: 10px;
Expand Down Expand Up @@ -113,6 +110,7 @@ button {
border-radius: 10px;
height: 40px;
margin: 10px;
white-space: nowrap;
cursor: pointer;
background-image: radial-gradient( white, lightblue);
border: 1px solid transparent;
Expand Down
1 change: 0 additions & 1 deletion app/src/popup/MainPopupLogic.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ export function getSessionNameFromInput(document) {

export function listenForClicks(document, browser) {
document.addEventListener("click", (event) => {
event.preventDefault();
const session = getSessionNameFromInput(document);
browser.tabs
.query({active: true, currentWindow: true})
Expand Down
8 changes: 5 additions & 3 deletions app/src/popup/components/ActionButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ import Button from "./reusable/Button";
export class ActionButton extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.state = {
translatedButtonText: translate(this.props.text.toLowerCase()),
};
}

render() {
return (
<Button text={this.props.text} name={this.props.name}>
<Button text={this.state.translatedButtonText} name={this.props.name}>
<i id={this.props.name} className={this.props.icon}></i>
{translate(this.props.text.toLowerCase())}
{this.state.translatedButtonText}
</Button>
);
}
Expand Down
5 changes: 3 additions & 2 deletions app/src/popup/components/ExpandedSessionListInput.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import Database from "../../engine/Database";
import {translate} from "../../engine/i18n";
import {SessionsList} from "./SessionsList";

export class ExpandedSessionListInput extends React.Component {
Expand Down Expand Up @@ -39,7 +40,7 @@ export class ExpandedSessionListInput extends React.Component {
return (
<div className="panel-session-name">
<input
title="Name of session"
title={translate("session-tooltip")}
aria-label={"session-name-input-field"}
aria-required="true"
type="text"
Expand All @@ -49,7 +50,7 @@ export class ExpandedSessionListInput extends React.Component {
className={this.state.textInputID}
onChange={this.onChange}
onClick={this.onClick}
placeholder="..."
placeholder={translate("session-placeholder")}
/>
<SessionsList
sessions={this.state.sessions}
Expand Down

0 comments on commit dba5d6f

Please sign in to comment.