Skip to content

Commit

Permalink
Add support for TDesktop
Browse files Browse the repository at this point in the history
  • Loading branch information
@erfanmola
erfanmola committed Jan 13, 2025
1 parent 401b6c5 commit 714698d
Show file tree
Hide file tree
Showing 24 changed files with 3,359 additions and 6,604 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "tma-studio",
"version": "1.0.10",
"version": "1.1.0",
"description": "A unified solution for developing Telegram Mini Apps.",
"main": "./out/main/index.js",
"author": "Erfan Mola",
Expand Down
3,195 changes: 0 additions & 3,195 deletions src/renderer/public/assets/patterns/pattern-1-dark.svg
View file

This file was deleted.

3,267 changes: 0 additions & 3,267 deletions src/renderer/public/assets/patterns/pattern-2-dark.svg
View file

This file was deleted.

2,318 changes: 2,318 additions & 0 deletions src/renderer/public/assets/patterns/pattern-3.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/renderer/src/Inter/Inter-VariableFont_opsz,wght.ttf
View file
Binary file not shown.
23 changes: 21 additions & 2 deletions src/renderer/src/components/DeviceFrames.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
aspect-ratio: 0.485;
max-width: 100%;
height: 100%;
border-radius: calc(var(--android-frame-radius) - var(--android-frame-border));
position: relative;
overflow: hidden;
background: url("/assets/devices/Samsung-S22.svg") no-repeat;
Expand Down Expand Up @@ -65,8 +64,24 @@
}
}

#frame-desktop {
display: flex;
aspect-ratio: 0.566;
max-width: 100%;
height: 80%;
position: relative;
overflow: hidden;

> div {
display: flex;
flex-grow: 1;
overflow: hidden;
}
}

#frame-iphone,
#frame-android {
#frame-android,
#frame-desktop {
&.placeholder {
background-color: var(--device-frame-color-placeholder);
border-color: var(--device-frame-border-placeholder);
Expand All @@ -90,3 +105,7 @@
#frame-android.placeholder {
border-radius: 12% / 6%;
}

#frame-desktop.placeholder {
border-radius: 0.625rem;
}
12 changes: 12 additions & 0 deletions src/renderer/src/components/DeviceFrames.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,15 @@ export const AndroidFrame: ParentComponent<{
</div>
);
};

export const DesktopFrame: ParentComponent<{
classList?: {
[k: string]: boolean | undefined;
};
}> = (props) => {
return (
<div id="frame-desktop" classList={props.classList}>
<div>{props.children}</div>
</div>
);
};
18 changes: 16 additions & 2 deletions src/renderer/src/components/FloatingProject.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ body.floating-project {
color: var(--text-color);

#section-telegram-ios,
#section-telegram-android {
#section-telegram-android,
#section-telegram-tdesktop {
> div {
width: 100%;

Expand All @@ -41,7 +42,20 @@ body.floating-project {
}

#frame-iphone,
#frame-android {
#frame-android,
#frame-desktop {
width: 100% !important;
}

#viewport-telegram-desktop {
> section {
> header {
> div {
&:nth-child(2) {
app-region: drag;
}
}
}
}
}
}
29 changes: 25 additions & 4 deletions src/renderer/src/components/FloatingProject.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { generateProjectFrame } from "@renderer/utils/telegram";
import { deserializeObject } from "@renderer/utils/general";
import { useSettings } from "@renderer/contexts/SettingsContext";
import { PlatformNames } from "@renderer/utils/platforms";
import { ViewportDesktop } from "@renderer/sections/ViewportDesktop";

const FloatingProject: Component = () => {
const params = useParams();
Expand Down Expand Up @@ -62,11 +63,11 @@ const FloatingProject: Component = () => {
return (
<Switch>
<Match when={platform === "android"}>
<div id="section-telegram-android">
<div id={`section-telegram-${platform}`}>
<div>
<HeaderWidget
project={project}
platform="android"
platform={platform}
title={`Telegram ${PlatformNames[projectFrame.platform]}`}
projectFrameStore={[projectFrame, setProjectFrame]}
placeholder={false}
Expand All @@ -82,11 +83,11 @@ const FloatingProject: Component = () => {
</Match>

<Match when={platform === "ios"}>
<div id="section-telegram-ios">
<div id={`section-telegram-${platform}`}>
<div>
<HeaderWidget
project={project}
platform="ios"
platform={platform}
title={`Telegram ${PlatformNames[projectFrame.platform]}`}
projectFrameStore={[projectFrame, setProjectFrame]}
placeholder={false}
Expand All @@ -100,6 +101,26 @@ const FloatingProject: Component = () => {
</div>
</div>
</Match>

<Match when={platform === "tdesktop"}>
<div id={`section-telegram-${platform}`}>
<div>
<HeaderWidget
project={project}
platform={platform}
title={`Telegram ${PlatformNames[projectFrame.platform]}`}
projectFrameStore={[projectFrame, setProjectFrame]}
placeholder={false}
/>

<ViewportDesktop
project={project}
projectFrameStore={[projectFrame, setProjectFrame]}
placeholder={false}
/>
</div>
</div>
</Match>
</Switch>
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const Header = () => {
menu.append(
new MenuItem({
type: "normal",
label: "Delete Project",
label: "Delete User",
click: () => {
setContextMenuStore("delete", {
id: userId,
Expand Down Expand Up @@ -125,7 +125,7 @@ const Header = () => {
},
...preferences.users.users.map((user) => ({
value: user.id,
label: `${user.first_name} ${user.last_name}`,
label: `${user.first_name} ${user.last_name ?? ""}`,
})),
],
{
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/pages/Preferences.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ const PreferencesPage: Component = () => {
<h2>Viewport Settings</h2>

<ul>
<For each={["android", "ios"] as TelegramPlatform[]}>
<For each={["android", "ios", "tdesktop"] as TelegramPlatform[]}>
{(platform) => (
<li>
<span>{PlatformNames[platform]} Viewport</span>
Expand Down
196 changes: 99 additions & 97 deletions src/renderer/src/pages/Project.scss
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,114 @@
#container-page-project {
position: relative;
display: flex;
align-items: center;
justify-content: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;

> svg {
z-index: -1;
}
> svg {
z-index: -1;
}

> div {
display: grid;
grid-template-columns: 1fr 1fr;
flex-grow: 1;
padding: 1rem;
grid-gap: 1rem;
width: 100%;
height: 100%;
max-height: 1024px;
}
> div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
flex-grow: 1;
padding: 1rem;
grid-gap: 1rem;
width: 100%;
height: 100%;
max-height: 1024px;
}
}

#section-telegram-ios,
#section-telegram-android {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
align-items: center;
justify-content: center;
overflow: hidden;
#section-telegram-android,
#section-telegram-tdesktop {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
align-items: center;
justify-content: center;
overflow: hidden;

> div {
display: flex;
flex-direction: column;
gap: 1rem;
flex-grow: 1;
flex-shrink: 0;
align-items: center;
justify-content: center;
> div {
display: flex;
flex-direction: column;
gap: 1rem;
flex-grow: 1;
flex-shrink: 0;
align-items: center;
justify-content: flex-start;

> header {
display: flex;
justify-content: flex-start;
background-color: var(--bg-color);
box-shadow: var(--shadow-card);
border: 1px solid rgba(var(--opposite-rgb), 0.125);
border-radius: 0.25rem;
padding: 0;
align-items: center;
width: 100%;
> header {
display: flex;
justify-content: flex-start;
background-color: var(--bg-color);
box-shadow: var(--shadow-card);
border: 1px solid rgba(var(--opposite-rgb), 0.125);
border-radius: 0.25rem;
padding: 0;
align-items: center;
width: 100%;
gap: 1rem;

> h2 {
display: flex;
font-weight: 600;
flex-grow: 1;
height: 100%;
align-items: center;
padding-inline-start: 1rem;
min-height: 3.5rem;
}
> h2 {
display: flex;
font-weight: 600;
flex-grow: 1;
height: 100%;
align-items: center;
padding-inline-start: 1rem;
min-height: 3.5rem;
}

> ul {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem 0.5rem 0;
}
}
}
> ul {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem 0.5rem 0;
}
}
}
}

.shake {
animation: vibrate 0.5s;
animation-iteration-count: infinite;
animation: vibrate 0.5s;
animation-iteration-count: infinite;

@keyframes vibrate {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(-1deg);
}
20% {
transform: rotate(1deg);
}
30% {
transform: rotate(0deg);
}
40% {
transform: rotate(1deg);
}
50% {
transform: rotate(-1deg);
}
60% {
transform: rotate(0deg);
}
70% {
transform: rotate(-1deg);
}
80% {
transform: rotate(1deg);
}
90% {
transform: rotate(0deg);
}
100% {
transform: rotate(-1deg);
}
}
@keyframes vibrate {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(-1deg);
}
20% {
transform: rotate(1deg);
}
30% {
transform: rotate(0deg);
}
40% {
transform: rotate(1deg);
}
50% {
transform: rotate(-1deg);
}
60% {
transform: rotate(0deg);
}
70% {
transform: rotate(-1deg);
}
80% {
transform: rotate(1deg);
}
90% {
transform: rotate(0deg);
}
100% {
transform: rotate(-1deg);
}
}
}
Loading

0 comments on commit 714698d

Please sign in to comment.