urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2025-01-05 11:09:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

link fe: various ui/ux fixes based on feedback

Browse Source 
Also sneaks in a grammar correction for link-listen-hook documentation.
This commit is contained in:
Fang 2020-03-05 22:42:02 +01:00
parent 9a3f1be1b3
commit fd9c6cee5d
No known key found for this signature in database
GPG Key ID: EB035760C1BBA972
9 changed files with 50 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pkg/arvo/app/link-listen-hook.hoon
View File

@ -1,8 +1,8 @@
:: link-listen-hook: get your friends' bookmarks
::
:: subscribes to all %link resources in the metadata-store.
:: for all all ships in groups associated with those resources, we subscribe
:: to their link's local-pages and annotations at the resource path (through
:: for all ships in groups associated with those resources, we subscribe to
:: their link's local-pages and annotations at the resource path (through
:: link-proxy-hook), and forward all entries into our link-store as
:: submissions and comments.
::

27
pkg/interface/link/src/css/custom.css
View File

@ -60,6 +60,10 @@ a {
font-family: "Source Code Pro", monospace;
}
.list-ship {
line-height: 2.2;
}
.c-default {
cursor: default;
}
@ -105,6 +109,23 @@ a {
100% {transform: rotate(360deg);}
}
/* toggler checkbox */
.toggle::after {
content: "";
height: 12px;
width: 12px;
background: white;
position: absolute;
top: 2px;
left: 2px;
border-radius: 100%;
}
.toggle.checked::after {
left: 14px;
}
/* responsive */
@media all and (max-width: 34.375em) {
.dn-s {
@ -164,6 +185,9 @@ a {
.b--gray0-d {
border-color: #333;
}
.b--gray1-d {
border-color: #4d4d4d;
}
.b--gray2-d {
border-color: #7f7f7f;
}
@ -180,6 +204,9 @@ a {
.o-60-d {
opacity: .6;
}
.focus-b--white-d:focus {
border-color: #fff;
}
a {
color: #fff;
}

4
pkg/interface/link/src/js/components/lib/channel-sidebar.js
View File

@ -41,7 +41,7 @@ export class ChannelsSidebar extends Component {
);
});
let activeClasses = (this.props.active === "channels") ? " " : "dn-s ";
let activeClasses = (this.props.active === "collections") ? " " : "dn-s ";
let hiddenClasses = true;
@ -62,7 +62,7 @@ export class ChannelsSidebar extends Component {
<a className="db dn-m dn-l dn-xl f8 pb3 pl3" href="/">⟵ Landscape</a>
<div className="overflow-y-scroll h-100">
<div className="w-100 bg-transparent pa4 bb b--gray4 b--gray1-d"
style={{paddingBottom: 13}}>
style={{paddingBottom: 10, paddingTop: 10}}>
<Link
className="dib f9 pointer green2 gray4-d mr4"
to={"/~link/new"}>

8
pkg/interface/link/src/js/components/link.js
View File

@ -5,6 +5,7 @@ import { SidebarSwitcher } from '/components/lib/icons/icon-sidebar-switch.js';
import { api } from '../api';
import { Route, Link } from 'react-router-dom';
import { Comments } from './lib/comments';
import { LoadingScreen } from './loading';
import { makeRoutePath, getContactDetails } from '../lib/util';
export class LinkDetail extends Component {
@ -64,6 +65,11 @@ export class LinkDetail extends Component {
let props = this.props;
const data = this.state.data || props.data;
if (!data.ship) {
return <LoadingScreen/>;
}
let ship = data.ship || "zod";
let title = data.title || "";
let url = data.url || "";
@ -98,7 +104,7 @@ export class LinkDetail extends Component {
<Link
className="dib f9 fw4 pt2 gray2 lh-solid"
to={makeRoutePath(props.resourcePath, props.popout, props.page)}>
{"<- Collection index"}
{`<- ${props.resource.title} index`}
</Link>
<LinksTabBar {...props} popout={props.popout} resourcePath={props.resourcePath} />
</div>

6
pkg/interface/link/src/js/components/links-list.js
View File

@ -99,14 +99,14 @@ export class Links extends Component {
<div
className={`pl4 pt2 flex relative overflow-x-scroll
overflow-x-auto-l overflow-x-auto-xl flex-shrink-0
bb bn-m bn-l bn-xl b--gray4 b--gray1-d bg-gray0-d`}
bb b--gray4 b--gray1-d bg-gray0-d`}
style={{ height: 48 }}>
<SidebarSwitcher
sidebarShown={props.sidebarShown}
popout={props.popout}/>
<Link to={makeRoutePath(props.resourcePath, props.popout, props.page)} className="pt2">
<h2 className={`dib f9 fw4 v-top lh-solid mono`}>
{props.resource.title}
<h2 className={`dib f9 fw4 v-top`}>
{props.resource.title}
</h2>
</Link>
<LinksTabBar

2
pkg/interface/link/src/js/components/member.js
View File

@ -56,7 +56,7 @@ export class MemberScreen extends Component {
<Link to={makeRoutePath(props.resourcePath, props.popout)}
className="pt2 white-d">
<h2
className="mono dib f9 fw4 v-top"
className="dib f9 fw4 v-top"
style={{ width: "max-content" }}>
{props.resource.title}
</h2>

3
pkg/interface/link/src/js/components/root.js
View File

@ -47,6 +47,7 @@ export class Root extends Component {
render={ (props) => {
return (
<Skeleton
active="collections"
spinner={state.spinner}
resources={resources}
invites={invites}
@ -112,6 +113,7 @@ export class Root extends Component {
sidebarShown={state.sidebarShown}
links={links}>
<MemberScreen
sidebarShown={state.sidebarShown}
resource={resource}
contacts={contacts}
contactDetails={contactDetails}
@ -254,6 +256,7 @@ export class Root extends Component {
links={links}>
<LinkDetail
{...props}
resource={resource}
page={page}
url={url}
linkIndex={index}

10
pkg/interface/link/src/js/components/settings.js
View File

@ -91,11 +91,9 @@ export class SettingsScreen extends Component {
let deleteText = 'Remove this collection from your collection list.';
let deleteAction = 'Remove';
if (props.amOwner && isManaged) {
deleteText = 'Delete this collection from the group. This deletes it for everyone!';
deleteText = 'Delete this collection. (All group members will no longer see this chat.)';
deleteAction = 'Delete';
deleteClasses = 'dib f9 ba pa2 b--red2 red2 pointer bg-gray0-d';
} else if (!isManaged) {
deleteText = deleteText + " You won't be able to manage access to this collection anymore!"
}
return (
@ -252,7 +250,7 @@ export class SettingsScreen extends Component {
<Link to={makeRoutePath(props.resourcePath, props.popout)}
className="pt2 white-d">
<h2
className="mono dib f9 fw4 v-top"
className="dib f9 fw4 v-top"
style={{ width: "max-content" }}>
{props.resource.title}
</h2>
@ -271,7 +269,7 @@ export class SettingsScreen extends Component {
<div
className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
style={{ height: "1rem" }}>
<Link to="/~chat/">{"⟵ All Chats"}</Link>
<Link to="/~link">{"⟵ All Collections"}</Link>
</div>
<div
className="pl4 pt2 bb b--gray4 b--gray1-d flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
@ -283,7 +281,7 @@ export class SettingsScreen extends Component {
<Link to={makeRoutePath(props.resourcePath, props.popout)}
className="pt2">
<h2
className="mono dib f9 fw4 v-top"
className="dib f9 fw4 v-top"
style={{ width: "max-content" }}>
{props.resource.title}
</h2>

1
pkg/interface/link/src/js/components/skeleton.js
View File

@ -24,6 +24,7 @@ export class Skeleton extends Component {
<HeaderBar spinner={this.props.spinner} />
<div className={`cf w-100 h-100 flex ` + popoutBorder}>
<ChannelsSidebar
active={this.props.active}
popout={popout}
resources={this.props.resources}
invites={this.props.invites}