sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-12 10:39:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve options page about box

Browse Source
This commit is contained in:
hensm
2020-08-13 04:57:09 +01:00
parent 865bde56a4
commit 4b03d0dd8f
8 changed files with 103 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
ext/src/ui/options/assets/icons8-github-24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 487 B

BIN
ext/src/ui/options/assets/icons8-github-48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 903 B

BIN
ext/src/ui/options/assets/icons8-icons8-24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 392 B

BIN
ext/src/ui/options/assets/icons8-icons8-48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 674 B

BIN
ext/src/ui/options/assets/icons8-paypal-24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 500 B

BIN
ext/src/ui/options/assets/icons8-paypal-48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 912 B

120
ext/src/ui/options/index.tsx
View File

@@ -179,6 +179,82 @@ class OptionsApp extends Component<{}, OptionsAppState> {
return ( return (
<div> <div>
<details className="about">
<summary>
<h2>About</h2>
</summary>
<div className="about__container">
<ul className="about__links">
<li>
<a className="about__link"
href="https://github.com/hensm/fx_cast">
<img src="assets/icons8-github-24.png"
srcSet="assets/icons8-github-48.png 2x"
width="24"
alt="GitHub icon" />
@hensm/fx_cast
</a>
</li>
<li>
<a className="about__link"
href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3Z2FTMSG976WN&source=url">
<img src="assets/icons8-paypal-24.png"
srcSet="assets/icons8-paypal-48.png 2x"
width="24"
alt="PayPal icon" />
Donate via PayPal
</a>
</li>
<li>
<a className="about__link"
href="https://icons8.com">
<img src="assets/icons8-icons8-24.png"
srcSet="assets/icons8-icons8-48.png 2x"
width="24"
alt="icons8 icon" />
Icons by icons8
</a>
</li>
</ul>
<hr />
<details className="about__license">
<summary>
<h3>License</h3>
</summary>
<textarea>
{ LICENSE.replace(/(\S)\n(\S)/g, "$1 $2") }
</textarea>
</details>
<hr />
<details className="about__translators">
<summary>
<h3>Translators</h3>
</summary>
<ul>
<li className="translator">
@RAVMN
<div className="translator__tag">es</div>
</li>
<li className="translator">
@rimrul
<div className="translator__tag">de</div>
</li>
<li className="translator">
@ThaDaVos
<div className="translator__tag">nl</div>
</li>
<li className="translator">
@Vistaus
<div className="translator__tag">nl</div>
</li>
</ul>
</details>
</div>
</details>
<form id="form" ref={ form => { this.form = form; }} <form id="form" ref={ form => { this.form = form; }}
onSubmit={ this.handleFormSubmit } onSubmit={ this.handleFormSubmit }
onChange={ this.handleFormChange }> onChange={ this.handleFormChange }>
@@ -448,50 +524,6 @@ class OptionsApp extends Component<{}, OptionsAppState> {
</button> </button>
</div> </div>
</form> </form>
<details className="about">
<summary>
<h2>ABOUT</h2>
</summary>
<div className="about__container">
<h3>GitHub</h3>: <a href="https://github.com/hensm/fx_cast">@hensm/fx_cast</a>
<hr />
<details className="about__license">
<summary>
<h3>LICENSE</h3>
</summary>
<div className="about__license-text">
{ LICENSE.replace(/(\S)\n(\S)/g, "$1 $2") }
</div>
</details>
<hr />
<div className="about__translators">
<h3>TRANSLATORS</h3>
<ul>
<li className="translator">
@RAVMN
<div className="translator__tag">es</div>
</li>
<li className="translator">
@rimrul
<div className="translator__tag">de</div>
</li>
<li className="translator">
@ThaDaVos
<div className="translator__tag">nl</div>
</li>
<li className="translator">
@Vistaus
<div className="translator__tag">nl</div>
</li>
</ul>
</div>
</div>
</details>
</div> </div>
); );
} }

35
ext/src/ui/options/styles/index.css
View File

@@ -39,6 +39,10 @@
.about hr { .about hr {
border-top: 1px solid rgba(255, 255, 255, 0.1) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
} }
.about__link > img {
filter: invert(1);
}
} }
*:invalid { *:invalid {
@@ -427,8 +431,8 @@ button.ghost:not(:hover) {
.about { .about {
border-radius: 5px; border-radius: 2px;
margin-top: 30px; margin-bottom: 40px;
overflow: hidden; overflow: hidden;
} }
@@ -455,6 +459,7 @@ button.ghost:not(:hover) {
font: inherit; font: inherit;
font-weight: bold; font-weight: bold;
margin: 5px 0; margin: 5px 0;
text-transform: uppercase;
} }
.about hr { .about hr {
@@ -463,12 +468,26 @@ button.ghost:not(:hover) {
margin: 10px 0; margin: 10px 0;
} }
.about__license-text { .about__links {
cursor: text; margin: initial;
font-family: monospace; padding: initial;
pointer-events: initial; list-style: none;
user-select: text; }
white-space: pre-line; .about__link {
align-items: center;
display: inline-flex;
font-size: 1.2em;
gap: 5px;
}
.about__link > img {
vertical-align: middle;
}
.about__license > textarea {
height: 200px;
resize: vertical;
overflow-y: auto;
width: 100%;
} }
.about__translators > ul { .about__translators > ul {