You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@couchdb.apache.org by GitBox <gi...@apache.org> on 2017/11/20 15:33:12 UTC
[GitHub] garrensmith closed pull request #1023: Add show/hide alert badge on navbar items
garrensmith closed pull request #1023: Add show/hide alert badge on navbar items
URL: https://github.com/apache/couchdb-fauxton/pull/1023
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/app/addons/fauxton/assets/less/navigation.less b/app/addons/fauxton/assets/less/navigation.less
index 2d89e34e9..74ba89aea 100644
--- a/app/addons/fauxton/assets/less/navigation.less
+++ b/app/addons/fauxton/assets/less/navigation.less
@@ -103,6 +103,29 @@
color: @navIconColor;
font-size: 24px;
vertical-align: middle;
+ position: relative;
+}
+
+.faux-navbar__icon-badge:after {
+ content:"";
+ position: absolute;
+ background: @hoverHighlight;
+ border: 1px solid @hoverHighlight;
+ height:8px;
+ width:8px;
+ top:0;
+ right:-2px;
+ text-align: center;
+ font-size: 0.5rem;
+ border-radius: 50%;
+}
+
+.faux-navbar__link:hover .faux-navbar__icon-badge:after {
+ border-color: @navIconActive;
+}
+
+.faux-navbar__link--active .faux-navbar__icon-badge:after {
+ border-color: @navIconActive;
}
.faux-navbar__text {
diff --git a/app/addons/fauxton/navigation/__tests__/navbar-test.js b/app/addons/fauxton/navigation/__tests__/navbar-test.js
index 7a6331ebb..cda36b2dd 100644
--- a/app/addons/fauxton/navigation/__tests__/navbar-test.js
+++ b/app/addons/fauxton/navigation/__tests__/navbar-test.js
@@ -40,4 +40,27 @@ describe('Navigation Bar', () => {
expect(NavBar.find('.faux-navbar').length).toBe(1);
});
+ it('can display items with icon badge', () => {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.ADD_NAVBAR_LINK,
+ link: {
+ href: "#/_with_badge",
+ title: "WithBadge",
+ icon: "fonticon-database",
+ badge: true
+ }
+ });
+ FauxtonAPI.dispatch({
+ type: ActionTypes.ADD_NAVBAR_LINK,
+ link: {
+ href: "#/_without_badge",
+ title: "WithoutBadge",
+ icon: "fonticon-database"
+ }
+ });
+ const NavBar = mount(<NavBarContainer />);
+ expect(NavBar.find('div[data-nav-name="WithoutBadge"] i.faux-navbar__icon-badge').length, 0);
+ expect(NavBar.find('div[data-nav-name="WithBadge"] i.faux-navbar__icon-badge').length, 1);
+ });
+
});
diff --git a/app/addons/fauxton/navigation/__tests__/navlink-test.js b/app/addons/fauxton/navigation/__tests__/navlink-test.js
index 8201f4e4a..3c4a7c939 100644
--- a/app/addons/fauxton/navigation/__tests__/navlink-test.js
+++ b/app/addons/fauxton/navigation/__tests__/navlink-test.js
@@ -45,4 +45,27 @@ describe('Navigation Bar', () => {
expect(linkEl.find('span.faux-navbar__text').length).toBe(0);
});
});
+
+ describe('Link icon badge', () => {
+ const aLinkNoBadge = {
+ href: "#/_all_dbs",
+ title: "Databases",
+ icon: "fonticon-database"
+ };
+ it('is not displayed when not set', () => {
+ const linkEl = mount(<NavLink link={aLinkNoBadge} active={"Databases"} isMinimized={false} />);
+ expect(linkEl.find('i.faux-navbar__icon-badge').length).toBe(0);
+ });
+
+ const aLinkWithBadge = {
+ href: "#/_all_dbs",
+ title: "Databases",
+ icon: "fonticon-database",
+ badge: true
+ };
+ it('is displayed when set to true', () => {
+ const linkEl = mount(<NavLink link={aLinkWithBadge} active={"Databases"} isMinimized={false} />);
+ expect(linkEl.find('i.faux-navbar__icon-badge').length).toBe(1);
+ });
+ });
});
diff --git a/app/addons/fauxton/navigation/actiontypes.js b/app/addons/fauxton/navigation/actiontypes.js
index e5f685f33..2a5d72f36 100644
--- a/app/addons/fauxton/navigation/actiontypes.js
+++ b/app/addons/fauxton/navigation/actiontypes.js
@@ -16,6 +16,8 @@ export default {
UPDATE_NAVBAR_LINK: 'UPDATE_NAVBAR_LINK',
CLEAR_NAVBAR_LINK: 'CLEAR_NAVBAR_LINK',
REMOVE_NAVBAR_LINK: 'REMOVE_NAVBAR_LINK',
+ HIDE_NAVBAR_LINK_BADGE: 'HIDE_NAVBAR_LINK_BADGE',
+ SHOW_NAVBAR_LINK_BADGE: 'SHOW_NAVBAR_LINK_BADGE',
NAVBAR_SET_VERSION_INFO: 'NAVBAR_SET_VERSION_INFO',
NAVBAR_ACTIVE_LINK: 'NAVBAR_ACTIVE_LINK',
NAVBAR_HIDE: 'NAVBAR_HIDE',
diff --git a/app/addons/fauxton/navigation/components/NavLink.js b/app/addons/fauxton/navigation/components/NavLink.js
index 80ade7600..14a984179 100644
--- a/app/addons/fauxton/navigation/components/NavLink.js
+++ b/app/addons/fauxton/navigation/components/NavLink.js
@@ -26,18 +26,26 @@ const NavLink = ({link, active, isMinimized}) => {
{'faux-navbar--narrow': isMinimized}
);
+ const linkTitle = isMinimized ?
+ null :
+ <span className="faux-navbar__text">{link.title}</span>;
+
+ let linkIcon = null;
+ if (!!link.icon) {
+ linkIcon = (
+ <i className={classNames(
+ link.icon,
+ 'fonticon faux-navbar__icon',
+ {'faux-navbar__icon-badge': link.badge})}>
+ </i>
+ );
+ }
+
return (
<a className={linkClass} href={link.href} target={link.target ? '_blank' : null} data-bypass={link.target ? 'true' : null}>
<div data-nav-name={link.title} className="faux-navbar__itemarea">
-
- {!!link.icon ?
- <i className={classNames(link.icon, 'fonticon faux-navbar__icon')}></i> :
- null
- }
- {isMinimized ?
- null :
- <span className="faux-navbar__text">{link.title}</span>
- }
+ {linkIcon}
+ {linkTitle}
</div>
</a>
);
diff --git a/app/addons/fauxton/navigation/stores.js b/app/addons/fauxton/navigation/stores.js
index be52c57c4..0026e43c0 100644
--- a/app/addons/fauxton/navigation/stores.js
+++ b/app/addons/fauxton/navigation/stores.js
@@ -135,6 +135,27 @@ Stores.NavBarStore = FauxtonAPI.Store.extend({
oldLink.href = link.href;
},
+ showLinkBadge (link) {
+ const links = this.getLinkSection(link);
+ const selectedLink = links.find(function (oldLink) {
+ return oldLink.title === link.title;
+ });
+ if (selectedLink) {
+ selectedLink.badge = true;
+ }
+ },
+
+ hideLinkBadge (link) {
+ const links = this.getLinkSection(link);
+ const selectedLink = links.find(function (oldLink) {
+ return oldLink.title === link.title;
+ });
+
+ if (selectedLink) {
+ selectedLink.badge = false;
+ }
+ },
+
getVersion () {
return this._version;
},
@@ -177,6 +198,14 @@ Stores.NavBarStore = FauxtonAPI.Store.extend({
this.removeLink(action.link);
break;
+ case ActionTypes.SHOW_NAVBAR_LINK_BADGE:
+ this.showLinkBadge(action.link);
+ break;
+
+ case ActionTypes.HIDE_NAVBAR_LINK_BADGE:
+ this.hideLinkBadge(action.link);
+ break;
+
case ActionTypes.NAVBAR_SET_VERSION_INFO:
this.setVersion(action.version);
break;
diff --git a/app/core/base.js b/app/core/base.js
index 4b1871a3b..2aa5f8eda 100644
--- a/app/core/base.js
+++ b/app/core/base.js
@@ -29,6 +29,18 @@ var FauxtonAPI = {
link: link
});
},
+ showHeaderLinkBadge: function (link) {
+ FauxtonAPI.dispatch({
+ type: 'SHOW_NAVBAR_LINK_BADGE',
+ link: link
+ });
+ },
+ hideHeaderLinkBadge: function (link) {
+ FauxtonAPI.dispatch({
+ type: 'HIDE_NAVBAR_LINK_BADGE',
+ link: link
+ });
+ },
addNotification: function (options) {
options = _.extend({
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services