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

ui: sidebar improved

Browse Source
This commit is contained in:
zelfroster 2023-03-10 13:47:45 +05:30
parent ec8ae43b00
commit 4ebe23c45e
3 changed files with 90 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
webui-src/app/home.js
View File

@ -217,52 +217,52 @@ function confirmAddPrompt(details, cert, long) {
long
? m(
'button',
{
onclick: async () =>{
const res = await rs.rsJsonApiRequest('/rsPeers/loadCertificateFromString', { cert });
if (res.body.retval) {
widget.popupMessage([
m('h3', 'Successful'),
m('hr'),
m('p', 'Successfully added friend.'),
]);
} else {
widget.popupMessage([
m('h3', 'Error'),
m('hr'),
m('p', 'An error occoured during adding. Friend not added.'),
]);
}
'button',
{
onclick: async () => {
const res = await rs.rsJsonApiRequest('/rsPeers/loadCertificateFromString', { cert });
if (res.body.retval) {
widget.popupMessage([
m('h3', 'Successful'),
m('hr'),
m('p', 'Successfully added friend.'),
]);
} else {
widget.popupMessage([
m('h3', 'Error'),
m('hr'),
m('p', 'An error occoured during adding. Friend not added.'),
]);
}
},
},
'Finish'
)
'Finish'
)
: m(
'button',
{
onclick: async () => {
const res = await rs.rsJsonApiRequest('/rsPeers/addSslOnlyFriend', {
sslId: details.id,
pgpId: details.gpg_id,
});
if (res.body.retval) {
widget.popupMessage([
m('h3', 'Successful'),
m('hr'),
m('p', 'Successfully added friend.'),
]);
} else {
widget.popupMessage([
m('h3', 'Error'),
m('hr'),
m('p', 'An error occoured during adding. Friend not added.'),
]);
}
},
'button',
{
onclick: async () => {
const res = await rs.rsJsonApiRequest('/rsPeers/addSslOnlyFriend', {
sslId: details.id,
pgpId: details.gpg_id,
});
if (res.body.retval) {
widget.popupMessage([
m('h3', 'Successful'),
m('hr'),
m('p', 'Successfully added friend.'),
]);
} else {
widget.popupMessage([
m('h3', 'Error'),
m('hr'),
m('p', 'An error occoured during adding. Friend not added.'),
]);
}
},
'Finish'
),
},
'Finish'
),
]);
}
@ -319,8 +319,8 @@ const AddFriend = () => {
// Styling element when file is dragged
style: vnode.state.isDragged
? {
border: '5px solid #3ba4d7',
}
border: '5px solid #3ba4d7',
}
: {},
ondragover: (e) => e.preventDefault(),

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

@ -27,9 +27,16 @@ const navIcon = {
const navbar = () => {
return {
view: (vnode) =>
m(
'nav.tab-menu',
view: (vnode) => m(
'nav.tab-menu',
[
m('.nav-logo', [
m('img', {
src: '../data/retroshare.svg',
alt: 'retroshare_icon',
}),
m('h4', 'Retroshare'),
]),
Object.keys(vnode.attrs.links).map((linkName, i) => {
const active = m.route.get().split('/')[1] === linkName;
return m(
@ -38,10 +45,11 @@ const navbar = () => {
href: vnode.attrs.links[linkName],
class: (active ? 'selected-tab-item' : '') + ' tab-menu-item',
},
[navIcon[linkName], linkName]
[navIcon[linkName], m('p[style="margin: 0; align-self: end"]', linkName)]
);
})
),
]
),
};
};

41
webui-src/app/theme.css
View File

@ -356,40 +356,61 @@ Target specific sections
}
/* Navbar */
.nav-logo {
width: 9rem;
padding: 1.2rem 0;
display: flex;
gap: 0.3rem;
align-items: center;
}
.nav-logo img {
width: 1.6rem;
}
.nav-logo h4 {
margin: 0;
color: white;
align-self: end;
}
nav.tab-menu {
border-right: 5px solid #3ba4d7;
background-color: #333;
border-right: 4px solid #3ba4d7;
background-color: #14141B;
box-shadow: 0 5px 5px #aaa;
float: left;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: 0.5rem 0.4rem;
margin-right: 0rem;
}
.tab-menu-item {
width: 6rem;
width: 10rem;
border-radius: 8px;
display: flex;
align-items: center;
}
a.tab-menu-item {
padding: 1em;
margin: 0.2rem;
padding: 0.7rem 0.4rem;
text-align: center;
text-decoration: none;
color: #ccc;
font-size: 1em;
/* CSS capitalization is magical! */
text-transform: capitalize;
transition: all 0.5s;
transition: all 300ms;
/* To vertically stack child nodes */
display: inline-flex;
flex-direction: row;
}
.tab-menu-item:hover {
background-color: #999;
background-color: #FFFFFF15;
}
.tab-menu-item.selected-tab-item {
background-color: #3ba4d7;
color: white;
background-color: #FFFFFF20;
font-weight: medium;
}
.sidebar {
height: 30%;
@ -447,5 +468,9 @@ a.tab-menu-item {
}
i.sidenav-icon {
padding-right: 1rem;
width: 2.5rem;
height: 1.4rem;
display: grid;
place-items: center;
padding-right: 0.5rem;
}