Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Enhancement #80

Merged
merged 2 commits into from
Sep 27, 2021
Merged

UI Enhancement #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
17e84f8
update: UI enhancement
dkhd Sep 27, 2021
3883cd3
dependencies: bump dependencies
kimlimjustin Sep 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ src/Components/Theme/theme.ts
src/Components/Files/File Icon/fileIcon.ts
src/Components/Files/File Operation/open.ts
src/Components/Favorites/favorites.ts
src/Components/Context Menu/contextmenu.ts
src/Components/ContextMenu/contextmenu.ts
src/Components/Files/File Operation/new.ts
*.min.css
7 changes: 6 additions & 1 deletion src/Components/Context Menu/contextMenu.scss → src/Components/ContextMenu/contextMenu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,13 @@
-webkit-box-orient: vertical;

.contextmenu-item {
padding: 0.5rem;
display: block;
cursor: pointer;
img {
width: 1rem;
padding: 0.2rem;
vertical-align: bottom;
margin-right: 1rem;
}

.contextmenu-item-shortcut {
Expand All @@ -24,6 +25,10 @@
opacity: 0.5;
}
}
.contextmenu-item:hover {
background: var(--selected-grid-background) !important;
color: var(--selected-grid-color) !important;
}
}

.contextmenu-submenu {
Expand Down
0 src/Components/Context Menu/contextMenu.ts → src/Components/ContextMenu/contextMenu.ts
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion src/Components/Drives/drives.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const drivesToElements = (drives: Drive[], kBlockFormat = false): string => {
const driveName =
drive.mounted.split('/')[drive.mounted.split('/').length - 1]; // Get name of drive
result += `
<div class="pendrive card-hover-effect" data-tilt data-isdir="true" data-listenOpen data-path = "${getDriveBasePath(
<div class="pendrive file card-hover-effect" data-tilt data-isdir="true" data-listenOpen data-path = "${getDriveBasePath(
drive.mounted
)}">
<img src="${fileIcon(
Expand Down
1 change: 1 addition & 0 deletions src/Components/Favorites/favorites.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
font-size: 1rem;
text-align: center;
transition: all 0.3s ease;
font-weight: normal;
}

.favorite-icon {
Expand Down
12 changes: 6 additions & 6 deletions src/Components/Favorites/favorites.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,22 @@ import getPath from "platform-folders"
const Favorites = ():string => {
const result = `<section class="home-section">
<h2 class="section-title">${Translate("Favorites")}</h2>
<div class="favorite card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("desktop")}">
<div class="favorite file card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("desktop")}">
<h3 class="favorite-title"><img src="${fileIcon('desktop', "favorites", false)}" alt="Desktop icon" class="favorite-icon">${Translate("Desktop")}</h3>
</div>
<div class="favorite card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("documents")}">
<div class="favorite file card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("documents")}">
<h3 class="favorite-title"><img src="${fileIcon('document', "favorites", false)}" alt="Document icon" class="favorite-icon">${Translate("Documents")}</h3>
</div>
<div class="favorite card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("downloads")}">
<div class="favorite file card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("downloads")}">
<h3 class="favorite-title"><img src="${fileIcon('download', "favorites", false)}" alt="Download icon" class="favorite-icon">${Translate("Downloads")}</h3>
</div>
<div class="favorite card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("pictures")}">
<div class="favorite file card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("pictures")}">
<h3 class="favorite-title"><img src="${fileIcon('picture', "favorites", false)}" alt="Pictures icon" class="favorite-icon">${Translate("Pictures")}</h3>
</div>
<div class="favorite card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("music")}">
<div class="favorite file card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("music")}">
<h3 class="favorite-title"><img src="${fileIcon('music', "favorites", false)}" alt="Music icon" class="favorite-icon">${Translate("Music")}</h3>
</div>
<div class="favorite card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("videos")}">
<div class="favorite file card-hover-effect" data-tilt data-listenOpen data-isdir="true" data-path="${getPath("videos")}">
<h3 class="favorite-title"><img src="${fileIcon('video', "favorites", false)}" alt="Video icon" class="favorite-icon">${Translate("Videos")}</h3>
</div></section>
`;
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Files/File Operation/open.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Recent from "../../Recent/recent";
import LAZY_LOAD from "../../Functions/lazyLoadingImage";
import fs from "fs";
import {isHiddenFile} from "is-hidden-file";
import { ContextMenu } from "../../Context Menu/contextMenu";
import { ContextMenu } from "../../ContextMenu/contextMenu";
import formatBytes from "../../Functions/filesize";
import getType from "../File Type/type";
import { SelectListener, Select } from "./select";
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Layout/home.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import fileIcon from '../Files/File Icon/fileIcon';
import { startLoading, stopLoading } from '../Functions/Loading/loading';
import storage from 'electron-json-storage-sync';
import LAZY_LOAD from '../Functions/lazyLoadingImage';
import { createContextMenus } from '../Context Menu/contextMenu';
import { createContextMenus } from '../ContextMenu/contextMenu';
import { isHiddenFile } from 'is-hidden-file';
import getType from '../Files/File Type/type';
import formatBytes from '../Functions/filesize';
Expand Down
23 changes: 17 additions & 6 deletions src/Components/Layout/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,33 @@
overflow: auto;
width: -webkit-fill-available;
.sidebar-nav-item {
margin: 1rem 0.5rem;
// margin: 1rem 0.5rem;
.sidebar-nav-item-dropdown-btn {
cursor: pointer;
font-size: 1.3rem;
font-size: 1rem;
display: flex;
flex-direction: row;
padding: 0.7rem;
gap: 1rem;
img {
width: 1.5rem;
vertical-align: bottom;
align-items: flex-end;
}
&::after {
content: '▲';
float: right;
padding-left: 1.75rem;
}
}
.sidebar-nav-item-dropdown-spacer {
flex-grow: 1;
}
.sidebar-nav-item-dropdown-container {
span {
display: flex;
cursor: pointer;
padding: 0.2rem;
padding: 0.7rem 1.25rem;
img {
width: 1.5rem;
height: 1.5rem;
Expand All @@ -54,7 +62,7 @@
}
.sidebar-text {
margin: 0 0.2rem;
padding: 0 !important;
padding: 0 0 0 1rem !important;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
Expand All @@ -70,11 +78,14 @@
display: none !important;
}
}
.sidebar-nav-drives {
margin-top: 1.5rem;
}
}
.sidebar-setting-btn {
text-align: center;
text-align: left;
cursor: pointer;
padding: 15px;
padding: 1rem;
transition: 0.5s;
.sidebar-setting-btn-inner:hover {
transform: scale(0.95);
Expand Down
8 changes: 4 additions & 4 deletions src/Components/Layout/sidebar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const changeSidebar = (newElement: HTMLElement) => {
* @returns {void}
*/
const createSidebar = (): void => {
const { ContextMenu } = require('../Context Menu/contextMenu'); //eslint-disable-line
const { ContextMenu } = require('../ContextMenu/contextMenu'); //eslint-disable-line
const { data } = storage.get('sidebar'); // Get user favorites data on sidebar
// Functions to get favorites element
const getFavoritesElement = (favorites: Favorites[]) => {
Expand Down Expand Up @@ -80,7 +80,7 @@ const createSidebar = (): void => {
false
)}" alt="Favorites icon"><span class="sidebar-text">${Translate(
'Favorites'
)}</span></span>
)}</span><div class="sidebar-nav-item-dropdown-spacer"></div></span>
</div>
<div class="sidebar-nav-item-dropdown-container">
${favoritesElement}
Expand Down Expand Up @@ -112,7 +112,7 @@ const createSidebar = (): void => {
false
)}" alt="${driveName}"><span class="sidebar-text">${driveName}</span></span>`;
}
const result = `<div class="sidebar-nav-item ${
const result = `<div class="sidebar-nav-item sidebar-nav-drives ${
data?.hideSection?.drives ? 'nav-hide-item' : ''
}" id="sidebar-drives">
<div class="sidebar-hover-effect">
Expand All @@ -124,7 +124,7 @@ const createSidebar = (): void => {
process.platform === 'win32'
? Translate('Drives')
: Translate('Pendrives')
}</span></span>
}</span><div class="sidebar-nav-item-dropdown-spacer"></div></span>
</div>
<div class="sidebar-nav-item-dropdown-container">
${drivesElement}
Expand Down
4 changes: 2 additions & 2 deletions src/Components/Setting/setting.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
min-width: 250px;
.settings-sidebar-header {
padding: 1rem;
text-align: center;
text-align: left;
}

.settings-sidebar-item {
display: block;
margin: 0.5rem;
padding: 0.5rem;
padding: 0.7rem;
cursor: pointer;
img {
width: 1.5rem;
Expand Down
Loading