Skip to content

Commit

Permalink
New UI, Fixed Wayland Logo Issue, etc
Browse files Browse the repository at this point in the history
  • Loading branch information
@harshau007
harshau007 committed Jun 10, 2024
1 parent d3d64e3 commit c760980
Show file tree
Hide file tree
Showing 13 changed files with 301 additions and 201 deletions.
4 changes: 2 additions & 2 deletions LinuxBuild/alg-welcome.desktop → LinuxBuild/welcome.desktop
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ Encoding=UTF-8
Version=1.0
Type=Application
Terminal=false
Exec=bash -c /usr/bin/welcome
Exec=welcome
Name=Welcome
Icon=/usr/share/pixmaps/alg-logo.png
Icon=/usr/share/pixmaps/welcome.png
0 LinuxBuild/alg-logo.png → LinuxBuild/welcome.png
View file
File renamed without changes
8 changes: 4 additions & 4 deletions PKGBUILD/PKGBUILD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ pkgrel=1
destname="/usr/bin"
pkgdesc="Welcome App For ALG"
arch=('x86_64')
url="https://github.com/arch-linux-gui/alg-welcome"
url="https://github.com/harshau007/alg-welcome"
license=('GPL3')
depends=('webkit2gtk')
source=("$pkgname".tar.gz::"${url}"/releases/download/latest/"${pkgname}".tar.gz)
sha256sums=('60e71779be1cf8d19375a2a69f0e4edcfabd5ce5fbd64d7eb74bbe46ff0f782e')
sha256sums=('c69bf0c41555d1c31fca41aacef9082d7496864703b478ffc29bd92c672cb5f0')

package() {
tar -xf "$srcdir/"${pkgname}".tar.gz" -C "$pkgdir/"

install -Dm644 "$srcdir/"${pkgname}"/build/bin/alg-logo.png" "$pkgdir/usr/share/pixmaps/alg-logo.png"
install -Dm644 "$srcdir/"${pkgname}"/build/bin/welcome.png" "$pkgdir/usr/share/pixmaps/welcome.png"

install -Dm755 "$srcdir/"${pkgname}"/build/bin/alg-welcome.desktop" "$pkgdir/usr/share/applications/alg-welcome.desktop"
install -Dm755 "$srcdir/"${pkgname}"/build/bin/welcome.desktop" "$pkgdir/usr/share/applications/welcome.desktop"

install -Dm755 "$srcdir/"${pkgname}"/build/bin/welcome" "$pkgdir/usr/bin/welcome"
}
44 changes: 35 additions & 9 deletions app.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ func getLookAndFeelPackageKDE() string {
for scanner.Scan() {
line := scanner.Text()
if strings.HasPrefix(line, "LookAndFeelPackage=") {
fmt.Println(strings.TrimPrefix(line, "LookAndFeelPackage="))
return strings.TrimPrefix(line, "LookAndFeelPackage=")
}
}
Expand Down Expand Up @@ -116,27 +117,52 @@ func (a *App) CurrentTheme() string {
return currThemeName
}

/*
kwriteconfig6 --file ~/.config/kwinrc --group org.kde.kdecoration2 --key theme "__aurorae__svg__Qogir-light"
kwriteconfig6 --file ~/.config/kwinrc --group org.kde.kdecoration2 --key theme "__aurorae__svg__Qogir-circle-dark"
qdbus6 org.kde.KWin /KWin reconfigure
*/

func (a *App) ToggleTheme(dark bool) {
var style string
var winDeco string
switch desktopEnv {
case "kde":
if dark {
style = "org.kde.breezedark.desktop"
isPure := getLookAndFeelPackageKDE()
if strings.Contains(isPure, "org.kde.breeze") {
if dark {
style = "org.kde.breezedark.desktop"
} else {
style = "org.kde.breeze.desktop"
}
cmd := exec.Command("lookandfeeltool", "--apply", style)
_, err := cmd.Output()
if err != nil {
fmt.Println("failed to change KDE theme:", err)
}
} else {
style = "org.kde.breeze.desktop"
}
cmd := exec.Command("lookandfeeltool", "--apply", style)
_, err := cmd.Output()
if err != nil {
fmt.Println("failed to change KDE theme:", err)
if dark {
style = "Qogirdark"
winDeco = "__aurorae__svg__Qogir-dark-circle"
} else {
style = "Qogirlight"
winDeco = "__aurorae__svg__Qogir-light"
}
cmd := exec.Command("sh", "-c", fmt.Sprintf("plasma-apply-colorscheme %s && kwriteconfig6 --file %s/.config/kwinrc --group org.kde.kdecoration2 --key theme %s && qdbus6 org.kde.KWin /KWin reconfigure", style, os.Getenv("HOME"), winDeco))
_, err := cmd.Output()
if err != nil {
fmt.Println("failed to change KDE theme:", err)
}
}
case "gnome":
if dark {
style = "prefer-dark"
} else {
style = "prefer-light"
}
cmd := exec.Command("gsettings", "set", "org.gnome.desktop.interface", "color-scheme", style)
cmd := exec.Command("gsettings", "set", "org.gnome.desktop.interface", "gtk-theme", style)
_, err := cmd.Output()
if err != nil {
fmt.Println("failed to change GNOME theme:", err)
Expand Down
Binary file modified build/bin/welcome
View file
Binary file not shown.
118 changes: 44 additions & 74 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import {
CheckFileExists,
ToggleAutostart,
} from "../wailsjs/go/main/App";
import moon from "./assets/moon.png";
import sun from "./assets/sun.png";
import back from "./assets/back.png";
import backDark from "./assets/back-dark.png";
import WelcomeScreen from "./components/WelcomeScreen";
import AboutUs from "./components/AboutUs";
import CountrySelectionScreen from "./components/CountrySelectionScreen";
Expand All @@ -20,20 +19,22 @@ const App: React.FC = () => {
const [currentScreen, setCurrentScreen] = useState<number>(0);
const [isDarkMode, setIsDarkMode] = useState<boolean>(true);
const [isNavigated, setIsNavigated] = useState<boolean>(false);
const [isAutoStart, setIsAutoStart] = useState<boolean>(false); // New state for auto start
const [showLogger, setShowLogger] = useState<boolean>(false); // State for logger screen
const [isAutoStart, setIsAutoStart] = useState<boolean>(false);
const [showLogger, setShowLogger] = useState<boolean>(false);
const Themes = [
"Adwaita-dark",
"prefer-dark",
"org.kde.breezedark.desktop",
"com.github.vinceliuice.Qogir-dark",
];

useEffect(() => {
const fetchTheme = async () => {
try {
const currTheme = await CurrentTheme();
const fileExist = await CheckFileExists();
setIsAutoStart(fileExist);
setIsDarkMode(
currTheme === "Adwaita-dark" ||
currTheme === "prefer-dark" ||
currTheme === "org.kde.breezedark.desktop"
);
setIsDarkMode(Themes.includes(currTheme));
} catch (error) {
console.error("Failed to fetch current theme:", error);
}
Expand All @@ -42,9 +43,10 @@ const App: React.FC = () => {
fetchTheme();
}, []);

const toggleTheme = () => {
setIsDarkMode(!isDarkMode);
ToggleTheme(!isDarkMode);
const toggleTheme = async () => {
const newThemeState = !isDarkMode;
setIsDarkMode(newThemeState);
await ToggleTheme(newThemeState);
};

const toggleAutoStart = async () => {
Expand All @@ -69,17 +71,30 @@ const App: React.FC = () => {
setShowLogger(false);
};

const setterLogger = (log: boolean) => {
setShowLogger(log);
};

const screens: JSX.Element[] = [
<WelcomeScreen goToScreen={goToScreen} isDarkMode={isDarkMode} />,
<CountrySelectionScreen isDarkMode={isDarkMode} />,
<WelcomeScreen
goToScreen={goToScreen}
isDarkMode={isDarkMode}
toggleDarkMode={toggleTheme}
isAutoStart={isAutoStart}
toggleAutoStart={toggleAutoStart}
/>,
<CountrySelectionScreen
isDarkMode={isDarkMode}
setShowLogger={setterLogger}
/>,
<AboutUs />,
];

return (
<div
className={cn(
`${
isDarkMode ? "bg-[#090E0E] text-white" : "bg-white text-black"
isDarkMode ? "bg-[#090E0E] text-white" : "bg-gray-100 text-gray-800"
} w-[600px] h-[550px]`,
{ "border border-gray-300": !isDarkMode },
"select-none"
Expand All @@ -97,9 +112,21 @@ const App: React.FC = () => {
<div className="absolute top-4 left-4">
<button
onClick={goBack}
className="px-2 py-2 pr-2 w-[5rem] bg-[#6a45d1] text-white font-bold flex item-center rounded-2xl hover:bg-[#7c53ed]"
className={`flex item-center w-full py-2 px-4 pr-6 rounded-2xl ${
isDarkMode
? "bg-gray-700 hover:bg-gray-600"
: "bg-gray-300 hover:bg-gray-400"
}`}
>
<img src={back} alt="Icon" className="w-5 h-5 mt-[2px]" />
{isDarkMode ? (
<img src={back} alt="Icon" className="w-5 h-5 mt-[2px]" />
) : (
<img
src={backDark}
alt="Icon"
className="w-5 h-5 mt-[2px]"
/>
)}
Back
</button>
</div>
Expand Down Expand Up @@ -127,63 +154,6 @@ const App: React.FC = () => {
/>
</button>
)}
{currentScreen === 0 && !showLogger && (
<>
<div className="absolute bottom-4 right-7">
<div className="flex items-center space-x-2">
<span className="font-bold">Light</span>
<button
onClick={toggleTheme}
className={cn(
`${
isDarkMode ? "bg-[#6a45d1]" : "bg-gray-400"
} w-11 h-7 rounded-full relative`
)}
>
<span
className={cn(
`${
isDarkMode ? "translate-x-2" : "-translate-x-2"
} inline-block w-5 mt-1 ml-1 h-5 bg-white rounded-full shadow-md transform transition-transform duration-300`
)}
>
{isDarkMode ? (
<img src={moon} alt="Moon" className="w-5 h-5" />
) : (
<img src={sun} alt="Sun" className="w-5 h-5" />
)}
</span>
</button>
<span className="font-bold">Dark</span>
</div>
</div>
<div className="absolute bottom-4 left-4">
<div className="flex flex-col items-center">
<span className="font-bold mb-1">Auto Start</span>
<div className="flex items-center space-x-2">
<span className="font-bold">Off</span>
<button
onClick={toggleAutoStart}
className={cn(
`${
isAutoStart ? "bg-[#6a45d1]" : "bg-gray-400"
} w-11 h-7 rounded-full relative`
)}
>
<span
className={cn(
`${
isAutoStart ? "translate-x-2" : "-translate-x-2"
} inline-block w-5 mt-1 ml-1 mr-1 h-5 bg-white rounded-full shadow-md transform transition-transform duration-300`
)}
/>
</button>
<span className="font-bold">On</span>
</div>
</div>
</div>
</>
)}
</div>
);
};
Expand Down
Binary file added frontend/src/assets/back-dark.png
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 added frontend/src/assets/ext-dark.png
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 added frontend/src/assets/ext-light.png
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 added frontend/src/assets/images/alg-welcome-1.png
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 modified frontend/src/assets/images/alg-welcome.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 16 additions & 7 deletions frontend/src/components/CountrySelectionScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@ import { MirrorList } from "../../wailsjs/go/main/App";
import { EventsOn } from "../../wailsjs/runtime";
import { useLogsContext } from "@/lib/LogsContext";

const CountrySelectionScreen: React.FC<{ isDarkMode: boolean }> = ({
isDarkMode,
}) => {
const CountrySelectionScreen: React.FC<{
isDarkMode: boolean;
setShowLogger: (log: boolean) => void;
}> = ({ isDarkMode, setShowLogger }) => {
const [selectedCountries, setSelectedCountries] = useState<string[]>([]);
const [includeHttps, setIncludeHttps] = useState<boolean>(true);
const [includeHttp, setIncludeHttp] = useState<boolean>(false);
const [sortBy, setSortBy] = useState<string>("age");
const [maxMirrors, setMaxMirrors] = useState<number>(20);
const [timeout, setTimeout] = useState<number>(10);
const [timeout, setTimeout] = useState<number>(30);
const { addLog, clearLogs, loading, setLoading } = useLogsContext();

useEffect(() => {
Expand Down Expand Up @@ -58,11 +59,13 @@ const CountrySelectionScreen: React.FC<{ isDarkMode: boolean }> = ({
setLoading(true);

try {
setShowLogger(true);
await MirrorList(command);
} catch (error) {
console.error("Error updating mirrors:", error);
} finally {
setLoading(false);
setShowLogger(false);
setSelectedCountries([]);
setIncludeHttps(true);
setIncludeHttp(false);
Expand All @@ -77,7 +80,7 @@ const CountrySelectionScreen: React.FC<{ isDarkMode: boolean }> = ({
<div
className={
isDarkMode
? "p-4 bg-[#090E0E] w-[600px] h-[500px] flex flex-col"
? "p-4 w-[600px] bg-[#090E0E] h-[500px] flex flex-col"
: "p-4 w-[600px] h-[500px] flex flex-col"
}
>
Expand Down Expand Up @@ -204,8 +207,14 @@ const CountrySelectionScreen: React.FC<{ isDarkMode: boolean }> = ({
onClick={handleUpdateMirrors}
className={
!selectedCountries.length
? `w-[90%] bg-[#6a45d1] text-white mr-10 px-4 py-2 rounded-2xl opacity-50 cursor-not-allowed`
: `w-[90%] bg-[#6a45d1] text-white mr-10 px-4 py-2 rounded-2xl hover:bg-[#7c53ed]`
? `w-[90%] ${
isDarkMode ? "bg-gray-700" : "bg-gray-300"
} mr-10 px-4 py-2 rounded-2xl opacity-50 cursor-not-allowed`
: `w-[90%] ${
isDarkMode
? "bg-gray-700 hover:bg-gray-600"
: "bg-gray-300 hover:bg-gray-400"
} mr-10 px-4 py-2 rounded-2xl`
}
disabled={!selectedCountries.length || loading}
>
Expand Down
Loading

0 comments on commit c760980

Please sign in to comment.