From 9163baea35d911ab4058214a284e18e36c2341bd Mon Sep 17 00:00:00 2001 From: BorysLevytskyi Date: Fri, 19 May 2023 20:20:59 +0200 Subject: [PATCH] Polish UI --- src/index.css | 4 +- src/shell/AppState.ts | 11 ++++- src/shell/appStateStore.ts | 3 +- src/shell/components/AppRoot.tsx | 3 ++ .../components/CookieDisclaimerFooter.css | 13 ++++++ .../components/CookieDisclaimerFooter.tsx | 43 +++++++++++++++++++ 6 files changed, 74 insertions(+), 3 deletions(-) create mode 100644 src/shell/components/CookieDisclaimerFooter.css create mode 100644 src/shell/components/CookieDisclaimerFooter.tsx diff --git a/src/index.css b/src/index.css index 4a774ee..3b9c1be 100644 --- a/src/index.css +++ b/src/index.css @@ -77,6 +77,8 @@ a.hashLink { font-size: 1.1em;} .indicator { padding: 0px 5px; background: transparent; border: none; cursor: pointer; vertical-align: middle; color:rgba(0, 0, 0, 0.25) } +.expanded { display: block;} +.collapsed { display: none;} .error { color: maroon; } @@ -102,7 +104,7 @@ button.link-button {text-decoration: underline;} margin-left: 5px; } -.solid-border { border: solid 1px rgba(255, 255, 255, 0.8);} +.solid-border { border: solid 1px rgba(255, 255, 255, 0.8); border-radius: 5px;} .zero { opacity: 0.5} .dim-extra-bits .extra-bit { opacity: 0.1;} diff --git a/src/shell/AppState.ts b/src/shell/AppState.ts index b824fd3..b5d52cf 100644 --- a/src/shell/AppState.ts +++ b/src/shell/AppState.ts @@ -11,6 +11,7 @@ export type PersistedAppData = { donationClicked: boolean; annotateTypes: boolean; dimExtrBits: boolean; + cookieDisclaimerHidden: boolean } export type CommandResultView = { @@ -39,6 +40,7 @@ export default class AppState { showSettings: boolean = false; annotateTypes: boolean = false; dimExtraBits: boolean = false; + cookieDisclaimerHidden: boolean = false; constructor(persistData: PersistedAppData, env: string) { @@ -53,6 +55,7 @@ export default class AppState { this.donationClicked = persistData.donationClicked; this.annotateTypes = !!persistData.annotateTypes; this.dimExtraBits = !!persistData.dimExtrBits; + this.cookieDisclaimerHidden = !!persistData.cookieDisclaimerHidden } addCommandResult(input: string, view: ViewFactory) { @@ -126,6 +129,11 @@ export default class AppState { return true; } + setCookieDisclaimerHidden(value: boolean) { + this.cookieDisclaimerHidden = value; + this.triggerChanged(); + } + getPersistData(): PersistedAppData { return { emphasizeBytes: this.emphasizeBytes, @@ -135,7 +143,8 @@ export default class AppState { pageVisistsCount: this.pageVisitsCount, donationClicked: this.donationClicked, annotateTypes: this.annotateTypes, - dimExtrBits: this.dimExtraBits + dimExtrBits: this.dimExtraBits, + cookieDisclaimerHidden: this.cookieDisclaimerHidden } } }; diff --git a/src/shell/appStateStore.ts b/src/shell/appStateStore.ts index cac6c78..934721c 100644 --- a/src/shell/appStateStore.ts +++ b/src/shell/appStateStore.ts @@ -10,7 +10,8 @@ const DEFAULT_DATA : PersistedAppData = { pageVisistsCount: 0, donationClicked: false, annotateTypes: false, - dimExtrBits: false + dimExtrBits: false, + cookieDisclaimerHidden: false } export default { diff --git a/src/shell/components/AppRoot.tsx b/src/shell/components/AppRoot.tsx index 44618ef..f21770e 100644 --- a/src/shell/components/AppRoot.tsx +++ b/src/shell/components/AppRoot.tsx @@ -10,6 +10,7 @@ import TopLinks from './TopLinks'; import SettingsPane from './SettingsPane'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faGear } from '@fortawesome/free-solid-svg-icons'; +import CookieDisclaimerFooter from './CookieDisclaimerFooter'; type AppRootProps = { @@ -51,6 +52,7 @@ export default class AppRoot extends React.Component const enableNewUi = this.props.appState.env != 'prod' || true; const newUi = enableNewUi ? 'new-ui' : ''; const settingsCss = "settings-button" + (this.props.appState.showSettings ? '' : ' soft'); + return
@@ -69,6 +71,7 @@ export default class AppRoot extends React.Component
{this.getResultViews()}
+
; } } \ No newline at end of file diff --git a/src/shell/components/CookieDisclaimerFooter.css b/src/shell/components/CookieDisclaimerFooter.css new file mode 100644 index 0000000..e5cbebc --- /dev/null +++ b/src/shell/components/CookieDisclaimerFooter.css @@ -0,0 +1,13 @@ +.cookie-disclaimer { + position: fixed; + bottom: 0; + padding: 10px; + margin: 5px; + padding-bottom: 0; + background:green; + color: white; + border-radius: 5px; +} +.cookie-disclaimer .button { border-color: white !important} +.cookie-disclaimer .button { color: white; } +.cookie-disclaimer p { margin-top: 0; margin-bottom: 10px;} diff --git a/src/shell/components/CookieDisclaimerFooter.tsx b/src/shell/components/CookieDisclaimerFooter.tsx new file mode 100644 index 0000000..052f3ff --- /dev/null +++ b/src/shell/components/CookieDisclaimerFooter.tsx @@ -0,0 +1,43 @@ +import { useState } from "react"; +import "./CookieDisclaimerFooter.css"; +import AppState from "../AppState"; +import React from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faCaretDown, faCaretUp, faCircleXmark, faCross } from "@fortawesome/free-solid-svg-icons"; + +function CookieDisclaimerFooter(props: { appSate: AppState }): JSX.Element { + + const [expanded, setShowMore] = useState(false); + const longCss = expanded ? " expanded" : " collapsed"; + const shortCss = expanded ? " collapsed" : " expanded"; + const buttonText = expanded ? "Read Less" : "Read More"; + + if (props.appSate.cookieDisclaimerHidden) + return ; + + return
+ +
+

+ By using BitwiseCmd, you agree to the use of cookies for Google Analytics. These cookies help analyze and enhance your browsing experience. Click 'Read More' to learn about how your data is handled. +

+
+ +
+

By using BitwiseCmd, you agree to the use of cookies, including those used for Google Analytics. These cookies are employed to collect information about your usage of the website and help analyze and improve its performance and features.

+ +

Google Analytics cookies allow BitwiseCmd to gather anonymous data such as the pages you visit, the duration of your stay on each page, the website you came from, and the browser and device you are using. This information helps understand which features and content are most popular and enables informed decisions to enhance your browsing experience.

+ +

Rest assured that the data collected through Google Analytics cookies is used in an aggregated and anonymized manner. No personally identifiable information is collected, and your privacy and data protection are of utmost importance.

+ +

By continuing to use BitwiseCmd, you consent to the use of Google Analytics cookies for the purposes described above. If you prefer not to have your data collected by Google Analytics cookies, you can adjust your browser settings to disable cookies or use browser extensions that block third-party cookies.

+
+
+

+ +

+
+
+} + +export default CookieDisclaimerFooter; \ No newline at end of file