The_Great_Archive/RSNewWebUI
1
0
Fork 0
mirror of https://github.com/RetroShare/RSNewWebUI.git synced 2026-09-12 19:50:04 +05:00
Code Issues Packages Projects Releases Wiki Activity

chore: make sidebar layout better

Browse Source
This commit is contained in:
Sumit Kumar Soni 2026-07-26 17:29:25 +05:30
parent dd66e7e1ff
commit 8ab15bfce1
3 changed files with 105 additions and 2286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
webui-src/app/main.js
View File

@ -45,7 +45,7 @@ const navbar = () => {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
marginRight: '10px', marginRight: isCollapsed ? 0 : '10px',
}, },
}, },
[ [
@ -53,28 +53,11 @@ const navbar = () => {
src: 'images/retroshare.svg', src: 'images/retroshare.svg',
alt: 'retroshare_icon', alt: 'retroshare_icon',
}), }),
m('i.fas.fa-circle', {
style: {
color: rs.connectionState.status ? '#2ecc71' : '#e74c3c',
fontSize: '0.6em',
marginTop: '5px',
transition: 'color 0.3s ease',
},
title: rs.connectionState.status ? 'Connected to RetroShare Core' : 'Connection Lost',
}),
m('span.webui-version', { style: { fontSize: '0.7em', marginTop: '3px', color: '#888' } }, 'v131'),
m('i.fas.fa-sync-alt.refresh-icon', {
style: { fontSize: '0.8em', marginTop: '2px', cursor: 'pointer', color: '#888' },
onclick: () => window.location.reload(true),
title: 'Force reload application',
}),
] ]
), ),
m('.nav-menu__logo-text', [ m('.nav-menu__logo-text', [m('h5', 'RetroShare')]),
m('h5', 'RetroShare'),
]),
]), ]),
m('.nav-menu__box', [ m('.nav-menu__box', { style: { flex: 1 } }, [
Object.keys(vnode.attrs.links).map((linkName) => { Object.keys(vnode.attrs.links).map((linkName) => {
const active = m.route.get().split('/')[1] === linkName; const active = m.route.get().split('/')[1] === linkName;
return m( return m(
@ -83,20 +66,9 @@ const navbar = () => {
href: vnode.attrs.links[linkName], href: vnode.attrs.links[linkName],
class: (active ? 'active-link' : '') + ' item', class: (active ? 'active-link' : '') + ' item',
}, },
[ [navIcon[linkName], m('span', linkName.charAt(0).toUpperCase() + linkName.slice(1))]
navIcon[linkName],
m('span', linkName.charAt(0).toUpperCase() + linkName.slice(1)),
]
); );
}), }),
m(
'a.logout-link.item',
{
onclick: () => rs.logout(),
style: { marginTop: 'auto', cursor: 'pointer' },
},
[m('i.fas.fa-sign-out-alt'), m('span', 'Logout')]
),
m( m(
'button.toggle-nav', 'button.toggle-nav',
{ {
@ -105,6 +77,84 @@ const navbar = () => {
m('i.fas.fa-angle-double-left') m('i.fas.fa-angle-double-left')
), ),
]), ]),
m(
'.nav-menu__footer',
{
style: {
marginTop: 'auto',
padding: '0.75rem 0 0',
color: '#888',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: '0.75rem',
},
},
[
m(
'.nav-menu__status',
{
style: {
display: 'flex',
flexDirection: isCollapsed ? 'column' : 'row',
alignItems: 'center',
justifyContent: 'center',
gap: isCollapsed ? '0.35rem' : '0.6rem',
},
},
[
m('i.fas.fa-circle', {
style: {
color: rs.connectionState.status ? '#2ecc71' : '#e74c3c',
fontSize: '0.6em',
transition: 'color 0.3s ease',
},
title: rs.connectionState.status
? 'Connected to RetroShare Core'
: 'Connection Lost',
}),
m('span.webui-version', { style: { fontSize: '0.7em' } }, 'v131'),
m('i.fas.fa-sync-alt.refresh-icon', {
style: { cursor: 'pointer', fontSize: '0.8em' },
onclick: () => window.location.reload(true),
title: 'Force reload application',
}),
]
),
m(
'a.logout-link.item',
{
onclick: () => rs.logout(),
style: {
cursor: 'pointer',
margin: 0,
padding: isCollapsed ? '0.675rem 0' : '0.675rem 0.5rem',
width: isCollapsed ? '2.5rem' : '10rem',
display: 'flex',
alignItems: 'center',
justifyContent: isCollapsed ? 'center' : 'flex-start',
lineHeight: 1,
borderRadius: '0.5rem',
textDecoration: 'none',
color: '#ccc',
textTransform: 'capitalize',
},
},
[
m('i.fas.fa-sign-out-alt.sidenav-icon', {
style: {
width: '2.5rem',
height: '1.4rem',
display: 'grid',
placeItems: 'center',
},
}),
!isCollapsed && m('span', 'Logout'),
]
),
]
),
] ]
), ),
}; };
@ -128,10 +178,22 @@ const Layout = () => {
config: '/config/network', config: '/config/network',
}, },
}), }),
m('.main-container', { style: { display: 'flex', flexDirection: 'column', width: '100%', height: '100%', overflow: 'hidden' } }, [ m(
m('.tab-content', { style: { flex: '1', overflow: 'auto' } }, vnode.children), '.main-container',
m(statusbar) {
]), style: {
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
overflow: 'hidden',
},
},
[
m('.tab-content', { style: { flex: '1', overflow: 'auto' } }, vnode.children),
m(statusbar),
]
),
]), ]),
}; };
}; };
@ -208,8 +270,8 @@ m.route(document.getElementById('main'), '/', {
if (rs.loginKey.isVerified && rs.loginKey.username && rs.loginKey.passwd) { if (rs.loginKey.isVerified && rs.loginKey.username && rs.loginKey.passwd) {
rs.logon( rs.logon(
{ Authorization: `Basic ${btoa(`${rs.loginKey.username}:${rs.loginKey.passwd}`)}` }, { Authorization: `Basic ${btoa(`${rs.loginKey.username}:${rs.loginKey.passwd}`)}` },
() => { }, // displayAuthError () => {}, // displayAuthError
() => { }, // displayErrorMessage () => {}, // displayErrorMessage
() => { } () => {}
); );
} }

4
webui-src/app/scss/components/_navbar.scss
View File

@ -11,7 +11,7 @@
box-shadow: 0 5px 5px #222; box-shadow: 0 5px 5px #222;
@include flex(column, $align: center); @include flex(column, $align: center);
height: 100%; height: 100%;
padding: 0.5rem 0.25rem; padding: 0.25rem;
margin-right: 0rem; margin-right: 0rem;
&__logo { &__logo {
@ -225,4 +225,4 @@
.sidebarquickview>h6 { .sidebarquickview>h6 {
display: none !important; display: none !important;
} }
} }

2247
webui-src/styles.css
View File

File diff suppressed because one or more lines are too long