Skip to content

adnan1naeem/bluerain-plugin-taskbar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
adnan1994
Nov 9, 2017
4c5577e · Nov 9, 2017

History

1 Commit
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017
Nov 9, 2017

Repository files navigation

Taskbar Plugin

Adds internationalization through (react-intl-redux)[https://github.com/ratson/react-intl-redux].

Usage

Run the following command in the plugin directoy:

Installation

npm i --save @blueeast/bluerain-plugin-taskbar

Then in your boot function, pass the plugin like this:

import BR from '@blueeast/bluerain-os';
import TaskbarPlugin from '@blueeast/bluerain-plugin-taskbar';

BR.boot({
	plugins: [TaskbarPlugin]
})

Initializing Plugin

Boot you function like this:

BR.boot({
	
	plugins: [IntlPlugin]
})

Add Task bar Fillter

ctx.Filters.add('bluerain.system.app.layout', function taskbar(schema) {
			schema.children.unshift({ component: withSystemNav(Taskbar) });
			return schema;
		});

ctx.Filters.add('bluerain.redux.reducers.bluerain', function           
AddSystemNavReducers(reducers) {
			return Object.assign({}, reducers, {
				systemNav: reducer
			});
	});

Adding Translations

ctx.Filters.add('bluerain.intl.messages', function eng(messages) {
			const en = require('./lang/en.ts');
			const ur = require('./lang/ur.ts');

			messages.en =  Object.assign(messages.en ? messages.en : {}, en);
			messages.ur = Object.assign(messages.ur ? messages.ur : {}, ur);

			return messages;
		});

Initial State

ctx.Filters.add('bluerain.redux.initialState', function ActivateTaskbar(state) {
			const size = ctx.Plugins.get('window-info');
			const taskbarState = getResponsiveState(size);
			return Object.assign({}, state, {
				bluerain: {
					systemNav: taskbarState
				}
			});
		});

Events

Make sure you have access to the BlueRain context. Then do this:

 ctx.Events.on('plugin.window_info.resize', (size, prevSize) => {
			const state = getResponsiveState(size);
			ctx.refs.store.dispatch(setStateSystemNav(state));
		});

Components

This plugin registers following components in the Component registry, so they can be reused later by other apps and plugins:

  • NavAppItem
  • NavDividerItem
  • NavSpacerItem

Filters

bluerain.intl.messages

This hook gives the ability to add custom intl messages.

Parameters:

Name Type Description
messages Object The messages db

Returns:

Name Type Description
messages Object The messages db

Example:

This example registers custom english and urdu messages to the system.

BR.Filters.add('bluerain.intl.messages', function eng(messages) {
	const en = require('./lang/en.json');
	const ur = require('./lang/ur.json');

	messages.en =  Object.assign(messages.en ? messages.en : {}, en);
	messages.ur = Object.assign(messages.ur ? messages.ur : {}, ur);

	return messages;
});

Bluerain Plugin Task Bar

A plugin for Task Bar that shows Platform Logo and Navigation items. Platform Logo and Navigation items are passed through Bluerain-os configurations. Extends Plugin

Adds Task Bar to BlueRain Apps.

Usage

npm i --save @blueeast/bluerain-plugin-taskbar

Then in your boot function, pass the plugin like this:

import BR from '@blueeast/bluerain-os';
import TaskbarPlugin from '@blueeast/bluerain-plugin-taskbar';

BR.boot({
	plugins: [TaskbarPlugin]
})

API

configuration

Logos

	logos: {
		default: {
      src: "https://s3-us-west-2.amazonaws.com/bluerainimages/mevris-logo.svg",
      type: "image/svg+xml"
    },
		headerLogo: {
      src: "https://s3-us-west-2.amazonaws.com/bluerainimages/mevris-logo-expended.svg",
      type: "image/svg+xml"
    },
		headerLogoSquare: {
      src: "https://s3-us-west-2.amazonaws.com/bluerainimages/mevris-logo-icon.svg",
      type: "image/svg+xml"
    },
	},

NavItems

		taskbar: {
			items: [{
				component: 'NavAppItem',
				props: { slug: 'hello-world' }
			},
			'->',
			{
				component: 'NavAppItem',
				props: { slug: 'settings' }
			}]
		}

###Components

This plugin registers following components in component registry.

  • NavAppItem

  • NavDividerItem

  • NavSpacerItem

Filters

  • It adds task bar by adding a function in 'bluerain.system.app.layout' filter.
  • It adds systemNav reducers in 'bluerain.redux.reducers.bluerain' filter.

SystemNav

Actions Following Actions can be dispatched

  • enable,
  • disable,
  • open,
  • close,
  • toggle,
  • dock,
  • undock,
  • hideLabels,
  • showLabels

Initial State

const initialState =  {
	disabled: false,
	open: true,
	docked: true,
	hideLabels: false,
};

Responsiveness

This Plugin is responsive on desktop and mobile. It shows only icons on Desktop and icon with Labels on mobile screen.

bluerain-plugin-taskbar

About

No description, website, or topics provided.

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published