Skip to content

Commit

Permalink
Feat #194 styling (#195)
Browse files Browse the repository at this point in the history
* FEAT: #194 Styling

* Oberes menu

* Header

* settings

* types

* types

* types
  • Loading branch information
MiRo1310 authored Oct 19, 2024
1 parent 1197020 commit 5a592ba
Show file tree
Hide file tree
Showing 24 changed files with 344 additions and 331 deletions.
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ You can create different groups with separate menus, and then assign users to th
Placeholder for the next version (at the beginning of the line):
### **WORK IN PROGRESS**
-->

### **WORK IN PROGRESS**

- FEAT: #194 Styling

### 2.1.2 (2024-10-18)

- FIX: Different telegram instances cannot be selected
Expand Down
47 changes: 25 additions & 22 deletions admin/app.d.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import { GenericAppProps, GenericAppState } from "@iobroker/adapter-react-v5";
import { Tab } from '@mui/material';
import { AdminConnection } from '@iobroker/socket-client';
import { LegacyRef, ReactNode } from "react";
import { EventButton } from "@components/btn-Input/button";
import { setState } from '../src/lib/setstate';
import { HelperText } from "@/config/helper";
import { SaveDataObject } from "@/pages/AppContentTabActionContentRowEditorCopyModalSelectedValues";
import { EventButton, EventCheckbox, EventTextarea } from "@/types/event";
import { TelegramMenuApp } from "@/types/props-types.js";
import { EventSelect } from "@components/btn-Input/select";
import { Theme } from "@emotion/react";
import { AdminConnection, Width } from "@iobroker/adapter-react-v5";

import { LegacyRef, ReactNode } from "react";


export type Nullable<T> = T | null | undefined;

Expand Down Expand Up @@ -108,7 +111,7 @@ export interface PropsTabAction {
export interface AppData {
activeMenu?: string;
nav?: NavData;
state: AdditionalStateInfo;
state: TelegramMenuApp.AdditionalState;
data?: NativeData;
action?: ActionData;
socket?: Socket;
Expand Down Expand Up @@ -154,10 +157,10 @@ export interface ButtonProps {
setNative?: boolean;
title?: string;
name?: string;
index: number;
disabled?: string | boolean;
className?: string;
children?: ReactNode;
disableButtonStyleByComponent?: boolean;
}
export type CallbackValue = boolean | string | number | undefined;

Expand Down Expand Up @@ -227,7 +230,7 @@ export interface InputProps {
}
export interface PropsHeaderIconBar {
instance: number;
common: ioBroker.InstanceCommon | null;
common: any | null;
native: Native;
onLoad: (error: Record<string, null>) => void;
onError: (text: string | number) => void;
Expand Down Expand Up @@ -327,7 +330,7 @@ export interface PropsTelegramUserCard {
name: string;
chatID: string;
data: {
state: AdditionalStateInfo;
state: TelegramMenuApp.AdditionalState;
activeMenu: string;
usersInGroup: UsersInGroup;
userActiveCheckbox: UserActiveCheckbox
Expand Down Expand Up @@ -369,7 +372,7 @@ export interface PropsPopupContainer {
, setState: SetStateFunction | undefined) => void;
onMouseLeave?: (event: React.MouseEvent<HTMLDivElement> | undefined
, setState: SetStateFunction | undefined) => void;
callback: (val) => void;
callback: (val: EventButton) => void;
value?: string;
setState?: SetStateFunction;
children?: ReactNode;
Expand Down Expand Up @@ -449,11 +452,11 @@ export interface AppState {
isConfigurationError: string;
expertMode: boolean;
toast: string;
theme: import("./src/types").Theme;
theme: Theme;
themeName: string;
themeType: string;
bottomButtons: boolean;
width: import("./src/types").Width;
width: Width;
confirmClose: boolean;
_alert: boolean;
_alertType: string;
Expand Down Expand Up @@ -536,7 +539,7 @@ export interface StateSquare {
}
export interface PropsHeaderTelegramUsers {
callback: CallbackFunctionsApp;
data: { state: AdditionalStateInfo, activeMenu: string, usersInGroup: UsersInGroup, userActiveCheckbox: UserActiveCheckbox };
data: { state: TelegramMenuApp.AdditionalState, activeMenu: string, usersInGroup: UsersInGroup, userActiveCheckbox: UserActiveCheckbox };
}
export interface StateHeaderTelegramUsers {
menuOpen: boolean;
Expand Down Expand Up @@ -671,17 +674,17 @@ export interface CallbackFunctionsApp {
updateNative: UpdateNativeFunction;
}
export interface PropsMainTriggerOverview {
state: AdditionalStateInfo;
state: TelegramMenuApp.AdditionalState;
callback: CallbackFunctions;
}
export interface PropsMainDoubleTriggerInfo {
state: AdditionalStateInfo;
state: TelegramMenuApp.AdditionalState;
}
export interface PropsMainContent {
data: DataMainContent;
callback: CallbackFunctionsApp;
}
export interface DataMainContent { state: AdditionalStateInfo, adapterName: string, socket: Socket }
export interface DataMainContent { state: TelegramMenuApp.AdditionalState, adapterName: string, socket: Socket }

export type Socket = AdminConnection;

Expand All @@ -691,7 +694,7 @@ export interface PropsMainDropBox {
}
export interface DataDropBox {
dropBoxRef: Dropbox.Ref;
state: AdditionalStateInfo
state: TelegramMenuApp.AdditionalState
}

export interface ShowButtons {
Expand All @@ -714,10 +717,10 @@ export interface RowForButton {
}

export namespace Dropbox {
type newX = Nullable<number>;
type newY = Nullable<number>;
type Ref = React.RefObject<HTMLDivElement> | undefined;
interface Position {
export type newX = Nullable<number>;
export type newY = Nullable<number>;
export type Ref = React.RefObject<HTMLDivElement> | undefined;
export interface Position {
dropboxTop: number;
dropboxRight: number;
}
Expand Down
208 changes: 104 additions & 104 deletions admin/build/index.js

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions admin/build/index.js.map

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions admin/css/button.css
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,16 @@
align-items: end;
justify-content: center;
}

.button__icon {
width: 30px !important;
min-width: none !important;
height: 30px !important;
margin: 0 5px 0 5px !important;
border: 1px solid black !important;
border-radius: 6px !important;
}
.button__white {
background-color: white !important;
color: black !important;
}
25 changes: 25 additions & 0 deletions admin/css/header.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/* IconBar */
img[alt="logo"] {
padding: 0px !important;
width: 40px !important;
}

.header__icons {
margin-bottom: 0;
}
.light .Header__icons,
.colored .header__icons {
background-color: #3399cc;
}
.dark form.header__icons {
background-image: linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09));
}
.blue form.header__icons {
background-color: rgb(62, 68, 72);
}
.header__icons button {
margin-left: 5px;
}
.header__icons img {
margin: 5px;
}
4 changes: 4 additions & 0 deletions admin/css/input.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ input {
border-bottom: 1px solid #ccc !important;
}

#newMenuName {
min-width: 300px;
}

.HeaderMenu-GridContainer input {
margin-top: 0 !important;
margin-left: 0 !important;
Expand Down
46 changes: 12 additions & 34 deletions admin/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,13 @@
@import "./textarea.css";
@import "./app-content.css";
@import "./row-editor.css";
@import "./header.css";

body {
height: 100vh;
overflow: auto;
}

/* IconBar */
img[alt="logo"] {
padding: 0px !important;
width: 40px !important;
}
.iconBar {
height: 40px;
}
.Tab-Header {
margin-bottom: 0;
}
.light .Tab-Header,
.colored .Tab-Header {
background-color: #3399cc;
}
.dark form.Tab-Header {
background-image: linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09));
}
.blue form.Tab-Header {
background-color: rgb(62, 68, 72);
}
.Tab-Header button {
margin-left: 5px;
}
.Tab-Header img {
margin: 5px;
}
/* Tab-Navigation */
.App-TabList button {
border-radius: 6px;
Expand Down Expand Up @@ -141,6 +115,11 @@ img[alt="logo"] {
.HeaderMenu-GridContainer {
font-size: 0.8rem;
}
.HeaderMenu-GridContainer button.header__button_actions {
margin-top: 10px !important;
margin-left: 5px !important;
margin-right: 5px !important;
}

/* Header Telegram User */
.HeaderThirdRow-ButtonAction {
Expand Down Expand Up @@ -474,11 +453,6 @@ button {
cursor: pointer;
}

.HeaderTelegramUser-Container .Btn-Expand {
position: absolute;
top: -35px;
left: -55px;
}
.dark .Btn-Expand button {
background-color: #555 !important;
border-color: #aaa !important;
Expand Down Expand Up @@ -565,7 +539,9 @@ p.inUse {
.blue .Settings {
color: white;
}

.HeaderTelegramUsers-TelegramUserCard {
width: 100%;
}
.light .HeaderTelegramUsers-TelegramUserCard,
.colored .HeaderTelegramUsers-TelegramUserCard {
background-color: #eee;
Expand Down Expand Up @@ -619,7 +595,9 @@ p.inUse {
}

.HeaderTelegramUser-Container {
position: relative;
display: flex;
}
.HeaderTelegramUser-Container .Btn-Expand {
}
span[title],
.title {
Expand Down
2 changes: 1 addition & 1 deletion admin/src/components/btn-Input/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ class Button extends Component<ButtonProps> {

return (
<button
style={buttonStyle}
style={this.props.disableButtonStyleByComponent ? undefined : buttonStyle}
onClick={this.eventOnclickButton}
title={I18n.t(this.props.title || "")}
name={this.props.name}
Expand Down
5 changes: 4 additions & 1 deletion admin/src/components/btn-Input/select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ export interface EventSelect {
}
class Select extends Component<SelectProps> {
onChangeHandler = (event: React.ChangeEvent<HTMLSelectElement> | undefined): void => {
this.props.callback({ id: this.props.id, val: event?.target?.value });
if (!event) {
return;
}
this.props.callback({ id: this.props.id, val: event.target.value });
};

render(): React.ReactNode {
Expand Down
5 changes: 4 additions & 1 deletion admin/src/components/btn-Input/textarea.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ import { PropsTextarea, StateTextarea } from "admin/app";

class Textarea extends Component<PropsTextarea, StateTextarea> {
onChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement> | undefined): void => {
this.props.callback({ val: event?.target.value, index: this.props.index, id: this.props.id });
if (!event) {
return;
}
this.props.callback({ val: event?.target.value, index: this.props.index as number, id: this.props.id });
};

render(): React.ReactNode {
Expand Down
2 changes: 1 addition & 1 deletion admin/src/lib/movePosition.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Dropbox, SetStateFunction } from "../../app";
import { Dropbox, SetStateFunction } from "admin/app";

const drag = { dragStartX: 0, dragStartY: 0, dragEndX: 0, dragEndY: 0 };

Expand Down
2 changes: 1 addition & 1 deletion admin/src/lib/socket.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function getAllTelegramInstances(socket: socket, callback: (val: string[]) => vo
console.error("Error getAllTelegramInstance: " + JSON.stringify(err));
}

function isAdapterTelegram(objects: Record<string, ioBroker.InstanceObject & { type: "instance" }>, obj: string): boolean {
function isAdapterTelegram(objects: Record<string, any & { type: "instance" }>, obj: string): boolean {
return "telegram" === objects?.[obj]?.common.name;
}
}
Expand Down
13 changes: 9 additions & 4 deletions admin/src/pages/AppContentHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,20 @@ class MainActions extends Component<PropsMainActions> {
super(props);
this.state = {};
}
isSettings(): boolean {
return this.props.data.state.tab === "settings";
}

render(): React.ReactNode {
return (
<Grid container spacing={1} className="Grid-HeaderMenu ">
{!this.isSettings() ? (
<Grid item xs={12}>
<HeaderMenu data={this.props.data} callback={this.props.callback} />
</Grid>
) : null}
<Grid item xs={12}>
{this.props.data.state.tab != "settings" ? <HeaderMenu data={this.props.data} callback={this.props.callback} /> : null}
</Grid>
<Grid item xs={12}>
{this.props.data.state.tab != "settings" ? (
{!this.isSettings() ? (
<HeaderTelegramUsers
data={{
state: this.props.data.state,
Expand Down
Loading

0 comments on commit 5a592ba

Please sign in to comment.