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

Jump to bottom

enhanced ctrl + click new tab opening feature #1248

Merged
merged 3 commits into from
Jul 20, 2020
Merged

enhanced ctrl + click new tab opening feature #1248

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a03ba39
enhanced ctrl + click new tab opening feature
samcaspus Jul 20, 2020
1290f1c
worked on review changes reverted and fixed over link.js component
samcaspus Jul 20, 2020
f78ef53
add return method for ctrl click and command click
samcaspus Jul 20, 2020
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
40 changes: 15 additions & 25 deletions frontend/src/layout/Sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,7 @@ const submenuOverride = {
export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
const [inviteModalOpen, setInviteModalOpen] = useState(false)
const [toolbarModalOpen, setToolbarModalOpen] = useState(false)
const collapseSidebar = (url) => (e) => {
if (e.ctrlKey) {
console.log(e)
window.open(url, '_blank')
}
const collapseSidebar = () => {
if (!sidebarCollapsed && window.innerWidth <= 991) {
setSidebarCollapsed(true)
}
Expand Down Expand Up @@ -136,25 +132,22 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
>
<LineChartOutlined />
<span className="sidebar-label">{dashboard.name}</span>
<Link
to={`/dashboard/${dashboard.id}`}
onClick={collapseSidebar(`/dashboard/${dashboard.id}`)}
/>
<Link to={`/dashboard/${dashboard.id}`} onClick={collapseSidebar} />
</Menu.Item>
))}

<Menu.Item key="dashboards" style={itemStyle} data-attr="menu-item-dashboards" title="">
<FundOutlined />
<span className="sidebar-label">Dashboards</span>
<Link to="/dashboard" onClick={collapseSidebar('/dashboard')} />
<Link to="/dashboard" onClick={collapseSidebar} />
</Menu.Item>

{pinnedDashboards.length > 0 ? <Menu.Divider /> : null}

<Menu.Item key="trends" style={itemStyle} data-attr="menu-item-trends" title="">
<RiseOutlined />
<span className="sidebar-label">{'Trends'}</span>
<Link to={'/trends'} onClick={collapseSidebar('/trends')} />
<Link to={'/trends'} onClick={collapseSidebar} />
</Menu.Item>

<Menu.SubMenu
Expand All @@ -173,22 +166,22 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
<Menu.Item key="events" style={itemStyle} data-attr="menu-item-all-events">
<ContainerOutlined />
<span className="sidebar-label">{'All Events'}</span>
<Link to={'/events'} onClick={collapseSidebar('/events')} />
<Link to={'/events'} onClick={collapseSidebar} />
</Menu.Item>
<Menu.Item key="actions" style={itemStyle} data-attr="menu-item-actions">
<AimOutlined />
<span className="sidebar-label">{'Actions'}</span>
<Link to={'/actions'} onClick={collapseSidebar('/actions')} />
<Link to={'/actions'} onClick={collapseSidebar} />
</Menu.Item>
<Menu.Item key="liveActions" style={itemStyle} data-attr="menu-item-live-actions">
<SyncOutlined />
<span className="sidebar-label">{'Live Actions'}</span>
<Link to={'/actions/live'} onClick={collapseSidebar('/actions/live')} />
<Link to={'/actions/live'} onClick={collapseSidebar} />
</Menu.Item>
<Menu.Item key="sessions" style={itemStyle} data-attr="menu-item-sessions">
<ClockCircleOutlined />
<span className="sidebar-label">{'Sessions'}</span>
<Link to={'/sessions'} onClick={collapseSidebar('/sessions')} />
<Link to={'/sessions'} onClick={collapseSidebar} />
</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu
Expand All @@ -207,41 +200,38 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
<Menu.Item key="people" style={itemStyle} data-attr="menu-item-all-people">
<UserOutlined />
<span className="sidebar-label">{'All Users'}</span>
<Link to={'/people'} onClick={collapseSidebar('/people')} />
<Link to={'/people'} onClick={collapseSidebar} />
</Menu.Item>
<Menu.Item key="cohorts" style={itemStyle} data-attr="menu-item-cohorts">
<UsergroupAddOutlined />
<span className="sidebar-label">{'Cohorts'}</span>
<Link to={'/people/cohorts'} onClick={collapseSidebar('/people/cohorts')} />
<Link to={'/people/cohorts'} onClick={collapseSidebar} />
</Menu.Item>
<Menu.Item key="retention" style={itemStyle} data-attr="menu-item-retention">
<RetweetOutlined />
<span className="sidebar-label">{'Retention'}</span>
<Link to={'/people/retention'} onClick={collapseSidebar('/people/retention')} />
<Link to={'/people/retention'} onClick={collapseSidebar} />
</Menu.Item>
</Menu.SubMenu>
<Menu.Item key="funnels" style={itemStyle} data-attr="menu-item-funnels">
<FunnelPlotOutlined />
<span className="sidebar-label">{'Funnels'}</span>
<Link to={'/funnel'} onClick={collapseSidebar('/funnel')} />
<Link to={'/funnel'} onClick={collapseSidebar} />
</Menu.Item>
<Menu.Item key="paths" style={itemStyle} data-attr="menu-item-paths">
<ForkOutlined />
<span className="sidebar-label">{'Paths'}</span>
<Link to={'/paths'} onClick={collapseSidebar('/paths')} />
<Link to={'/paths'} onClick={collapseSidebar} />
</Menu.Item>
<Menu.Item key="experiments" style={itemStyle} data-attr="menu-item-feature-f">
<ExperimentOutlined />
<span className="sidebar-label">{'Experiments'}</span>
<Link
to={'/experiments/feature_flags'}
onClick={collapseSidebar('/experiments/feature_flags')}
/>
<Link to={'/experiments/feature_flags'} onClick={collapseSidebar} />
</Menu.Item>
<Menu.Item key="setup" style={itemStyle} data-attr="menu-item-setup">
<SettingOutlined />
<span className="sidebar-label">{'Setup'}</span>
<Link to={'/setup'} onClick={collapseSidebar('/setup')} />
<Link to={'/setup'} onClick={collapseSidebar} />
</Menu.Item>
<Menu.Item
key="invite"
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/lib/components/Link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export function Link({ to, preventClick = false, ...props }) {
href={to || '#'}
{...props}
onClick={(event) => {
if (event.ctrlKey) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you do if (event.metaKey || event.ctrlKey) so that it works on mac as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure will add it right away

window.open(to, '_blank')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you do return window.open(to, '_blank')? Now if you open it in a new tab it'll also load the page in the current tab

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done 😄

}

if (!props.target) {
event.preventDefault()
event.stopPropagation()
Expand Down