\n
Current Version
\n
React 16.7.0 and PrimeReact 3.0.0
\n\n
Getting Started
\n
Avalon is an application template for React based on the popular create-react-app that allows\n creating React apps with no configuration. To get started extract the contents of the zip bundle and install the dependencies\n with npm or yarn.
\n
\n{\n`npm install\n`}\n\n\n or\n\n
\n{\n`yarn\n`}\n\n\n
Next step is running the application using the start script and navigate to http://localhost:3000/ to view the application.\n That is it, you may now start with the development of your application using the Avalon template.
\n\n
\n{\n`npm start\n`}\n\n\n or\n\n
\n{\n`yarn start\n`}\n\n\n
React Scripts
\n
Following commands are derived from create-app-app.
\n
\n{\n`\"npm start\" or \"yarn start\": Starts the development server\n\"npm test\" or \"yarn test\": Runs the tests.\n\"npm run build\" or \"yarn run build\": Creates a production build.\n`}\n\n\n
Dependencies
\n
Only required dependencies are PrimeReact, PrimeIcons PrimeFlex where optional dependencies exist to enable certain components in PrimeReact such as Google Maps.
\n\n
\n{\n`\"primereact\": \"^2.0.0-beta.8\", //required: PrimeReact components\n\"primeflex\": \"^1.0.0-rc.1\", //required: Layout\n\"primeicons\": \"^1.0.0-beta.10\", //required: Component Icons\n\"react-router-dom\": \"^4.2.2\" //optional: Router\n`\n}\n\n\n
Structure
\n
Avalon consists of 3 main parts; the application layout, layout resources and theme resources for PrimeReact components. App.js inside src folder is the main component containing the template for the base layout\n whereas required resources for the layout are placed inside the public/assets/layout folder and similarly theme resources are inside public/assets/theme folder.\n
\n\n
Template
\n
Main layout is the JSX of the App.js, it is divided into a couple of child components such as topbar, profile, menu and footer. Here is render method of the\n App.js component that implements the logic such as menu state, layout modes and so on.\n
\n\n
\n{\n`render() {\n let layoutClassName = classNames('layout-wrapper', {\n 'menu-layout-static': this.state.layoutMode !== 'overlay',\n 'menu-layout-overlay': this.state.layoutMode === 'overlay',\n 'layout-menu-overlay-active': this.state.overlayMenuActive,\n 'menu-layout-slim': this.state.layoutMode === 'slim',\n 'menu-layout-horizontal': this.state.layoutMode === 'horizontal',\n 'layout-menu-static-inactive': this.state.staticMenuDesktopInactive,\n 'layout-menu-static-active': this.state.staticMenuMobileActive\n });\n let menuClassName = classNames('layout-menu-container', {'layout-menu-dark': this.state.darkMenu});\n \n return (\n \n
\n
\n\n
\n
this.layoutMenuScroller = el} style={{height: '100%'}}>\n \n {(this.state.profileMode === 'inline' && this.state.layoutMode !== 'horizontal') &&
}\n
\n
\n
\n \n
\n {this.props.children || }\n
\n \n
\n \n
\n
\n
\n\n
Menu
\n
Menu is a separate component defined in AppMenu.js file based on PrimeReact MenuModel API. In order to define the menuitems,\n navigate to createMenu() method App.js file and define your own model as a nested structure. Here is the menu component from the demo application.\n Notice that menu object is bound to the model property of AppMenu component as shown above.
\n\n
\n{\n`createMenu() {\n this.menu = [\n {\n label: 'Bootstrap Version', icon: 'fa fa-fw fa-tags',\n items: [\n {label: 'Bootstrap v3', icon: 'fa fa-fw fa-tag', command: () => this.changeVersion('v3')},\n {label: 'Bootstrap v4', icon: 'fa fa-fw fa-tag', command: () => this.changeVersion('v4')}\n ]\n },\n {label: 'Dashboard', icon: 'fa fa-fw fa-home', command: () => { window.location.hash=\"/\"}},\n {\n label: 'Customization', icon: 'fa fa-fw fa-bars' ,badge: '8',\n items: [\n {label: 'Static Menu', icon: 'fa fa-fw fa-bars', command: () => this.setState({layoutMode: 'static'}) },\n {label: 'Overlay Menu', icon: 'fa fa-fw fa-bars', command: () => this.setState({layoutMode: 'overlay'}) },\n {label: 'Slim Menu', icon: 'fa fa-fw fa-bars', command: () => this.setState({layoutMode: 'slim'}) },\n {label: 'Horizontal Menu', icon: 'fa fa-fw fa-bars', command: () => this.setState({layoutMode: 'horizontal'}) },\n {label: 'Inline Profile', icon: 'fa fa-sun-o fa-fw', command: () => this.setState({profileMode: 'inline'}) },\n {label: 'Top Profile', icon: 'fa fa-moon-o fa-fw', command: () => this.setState({profileMode: 'top'}) },\n {label: 'Light Menu', icon: 'fa fa-sun-o fa-fw', command: () => this.setState({darkMenu: false}) },\n {label: 'Dark Menu', icon: 'fa fa-moon-o fa-fw', command: () => this.setState({darkMenu: true}) }\n ]\n },\n {\n label: 'Layout Colors', icon: 'fa fa-fw fa-magic',\n items: [\n {\n label: 'Flat', \n icon: 'fa fa-fw fa-circle',\n items: [\n {label: 'Blue', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('blue')}},\n {label: 'Purple', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('purple')}},\n {label: 'Cyan', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('cyan')}},\n {label: 'Indigo', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('indigo')}},\n {label: 'Teal', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('teal')}},\n {label: 'Pink', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('pink')}},\n {label: 'Lime', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('lime')}},\n {label: 'Green', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('green')}},\n {label: 'Amber', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('amber')}},\n {label: 'Dark Grey', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('darkgrey')}},\n ]\n },\n {\n label: 'Special', \n icon: 'fa fa-fw fa-fire',\n items: [\n {label: 'Influenza', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('influenza', true)}},\n {label: 'Suzy', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('suzy', true)}},\n {label: 'Calm', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('calm', true)}},\n {label: 'Crimson', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('crimson', true)}},\n {label: 'Night', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('night', true)}},\n {label: 'Skyling', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('skyline', true)}},\n {label: 'Sunkist', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('sunkist', true)}},\n {label: 'Little Leaf', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('littleleaf', true)}},\n {label: 'Joomla', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('joomla', true)}},\n {label: 'Firewatch', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeLayout('firewatch', true)}}\n ]\n }\n ]\n },\n {\n label: 'Themes', icon: 'fa fa-fw fa-paint-brush', badge: '5',\n items: [\n {label: 'Blue', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('blue')}},\n {label: 'Cyan', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('cyan')}},\n {label: 'Indigo', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('indigo')}},\n {label: 'Purple', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('purple')}},\n {label: 'Teal', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('teal')}},\n {label: 'Orange', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('orange')}},\n {label: 'Deep Purple', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('deeppurple')}},\n {label: 'Light Blue', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('lightblue')}},\n {label: 'Green', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('green')}},\n {label: 'Light Green', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('lightgreen')}},\n {label: 'Lime', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('lime')}},\n {label: 'Amber', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('amber')}},\n {label: 'Brown', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('brown')}},\n {label: 'Dark Grey', icon: 'fa fa-fw fa-paint-brush', command: (event) => {this.changeTheme('darkgrey')}},\n ]\n },\n {\n label: 'Components', icon: 'fa fa-fw fa-sitemap',\n items: [\n {label: 'Sample Page', icon: 'fa fa-fw fa-columns', command: () => { window.location.hash=\"/sample\"; }},\n {label: 'Forms', icon: 'fa fa-fw fa-code', command: () => { window.location.hash=\"/forms\"; }},\n {label: 'Data', icon: 'fa fa-fw fa-table', command: () => { window.location.hash=\"/data\"; }},\n {label: 'Panels', icon: 'fa fa-fw fa-list-alt', command: () => { window.location.hash=\"/panels\"; }},\n {label: 'Overlays', icon: 'fa fa-fw fa-square', command: () => { window.location.hash=\"/overlays\"; }},\n {label: 'Menus', icon: 'fa fa-fw fa-minus-square-o', command: () => { window.location.hash=\"/menus\"; }},\n {label: 'Messages', icon: 'fa fa-fw fa-circle-o-notch', command: () => { window.location.hash=\"/messages\"; }},\n {label: 'Charts', icon: 'fa fa-fw fa-area-chart', command: () => { window.location.hash=\"/charts\"; }},\n {label: 'Misc', icon: 'fa fa-fw fa-user-secret', command: () => { window.location.hash=\"/misc\"; }}\n ]\n },\n {\n label: 'Template Pages', icon: 'fa fa-fw fa-life-saver',\n items: [\n {label: 'Empty Page', icon: 'fa fa-fw fa-square-o', command: () => { window.location.hash=\"/empty\"; }},\n {label: 'Landing', icon: 'fa fa-fw fa-certificate', url: 'assets/pages/landing.html', target: '_blank'},\n {label: 'Login', icon: 'fa fa-fw fa-sign-in', url: 'assets/pages/login.html', target: '_blank'},\n {label: 'Error', icon: 'fa fa-fw fa-exclamation-circle', url: 'assets/pages/error.html', target: '_blank'},\n {label: 'Not Found', icon: 'fa fa-fw fa-times', url: 'assets/pages/notfound.html', target: '_blank'},\n {label: 'Access Denied', icon: 'fa fa-fw fa-exclamation-triangle', url: 'assets/pages/access.html', target: '_blank'}\n ]\n },\n {\n label: 'Menu Hierarchy', icon: 'fa fa-fw fa-gg',\n items: [\n {\n label: 'Submenu 1', icon: 'fa fa-fw fa-sign-in',\n items: [\n {\n label: 'Submenu 1.1', icon: 'fa fa-fw fa-sign-in',\n items: [\n {label: 'Submenu 1.1.1', icon: 'fa fa-fw fa-sign-in'},\n {label: 'Submenu 1.1.2', icon: 'fa fa-fw fa-sign-in'},\n {label: 'Submenu 1.1.3', icon: 'fa fa-fw fa-sign-in'},\n ]\n },\n {\n label: 'Submenu 1.2', icon: 'fa fa-fw fa-sign-in',\n items: [\n {label: 'Submenu 1.2.1', icon: 'fa fa-fw fa-sign-in'},\n {label: 'Submenu 1.2.2', icon: 'fa fa-fw fa-sign-in'}\n ]\n },\n ]\n },\n {\n label: 'Submenu 2', icon: 'fa fa-fw fa-sign-in',\n items: [\n {\n label: 'Submenu 2.1', icon: 'fa fa-fw fa-sign-in',\n items: [\n {label: 'Submenu 2.1.1', icon: 'fa fa-fw fa-sign-in'},\n {label: 'Submenu 2.1.2', icon: 'fa fa-fw fa-sign-in'},\n {label: 'Submenu 2.1.3', icon: 'fa fa-fw fa-sign-in'},\n ]\n },\n {\n label: 'Submenu 2.2', icon: 'fa fa-fw fa-sign-in',\n items: [\n {label: 'Submenu 2.2.1', icon: 'fa fa-fw fa-sign-in'},\n {label: 'Submenu 2.2.2', icon: 'fa fa-fw fa-sign-in'}\n ]\n },\n ]\n }\n ]\n },\n {label: 'Utils', icon: 'fa fa-fw fa-wrench', command: () => { window.location.hash=\"/utils\"; }},\n {label: 'Documentation', icon: 'fa fa-fw fa-book', command: () => { window.location.hash=\"/documentation\"; }}\n ];\n}\n \n`}\n\n\n
Bootstrap 3 and 4
\n
Avalon offers bootstrap 3 and 4 styling options for both the theme and layout. Default one is bootstrap 4 and adding \"-v4\" suffix to the files you use to enables V4 support such as layout-blue-v4.css for the layout and theme-blue-v4.css for the theme.\n Note that there is no dependency on Bootstrap since Avalon provides a theme on Bootstrap styling only without using Bootstrap directly. However it is\n perfectly compatible with Bootstrap as they share the same look and feel.\n
\n\n
Theme and Layout SASS
\n
Avalon provides 30 PrimeReact themes out of the box, setup of a theme is simple as including the css of theme to your application. All themes are located inside are located inside assets/theme folder.
\n\n
\n - theme-amber
\n - theme-amber-v4
\n - theme-blue
\n - theme-blue-v4
\n - theme-brown
\n - theme-brown-v4
\n - theme-cyan
\n - theme-cyan-v4
\n - theme-darkgrey
\n - theme-darkgrey-4
\n - theme-deeppurple
\n - theme-green
\n - theme-green-v4
\n - theme-indigo
\n - theme-indigo-v4
\n - theme-lightblue
\n - theme-lightblue-v4
\n - theme-lightgreen
\n - theme-lightgreen-v4
\n - theme-lime
\n - theme-lime-v4
\n - theme-orange
\n - theme-orange-v4
\n - theme-pink
\n - theme-pink-v4
\n - theme-purple
\n - theme-purple-v4
\n - theme-teal
\n - theme-teal-v4
\n
\n\n
A custom theme can be developed by the following steps.
\n
\n - Choose a custom theme name such as theme-myown.
\n - Create a file named theme-myown.scss under public/assets/theme folder.
\n - Define the variables listed below and import the ../sass/theme/_theme.scss or ../sass/theme-v4/_theme.scss file depending on Bootstrap version.
\n - Build the scss to generate css
\n - Include the generated theme.css in your application.
\n
\n\n
Here are the variables required to create a theme.
\n\n
Bootstrap 3\n
\n{\n`$primaryColor:#337ab7;\n$primaryTextColor:#ffffff;\n$inputFocusBorderColor:#66afe9;\n$highlightBgColor:#337ab7;\n$highlightTextColor:#ffffff;\n$headerBgColor:#f5f5f5;\n$headerHoverBgColor:#dcdcdc;\n$headerHoverBorderColor:#c4c4c4;\n$headerTextColor:#292B2C;\n$headerBorderColor:#dddddd;\n$headerIconColor:#999999;\n$headerIconHoverColor:#777777;\n$datableEvenRowBgColor:#f9f9f9;\n$datatableHoverBgColor:#f5f5f5;\n\n@import '../sass/theme/_theme';\n`\n}\n\n\n
Bootstrap 4\n
\n{\n`$primaryColor:#007bff;\n$primaryTextColor:#ffffff;\n$inputFocusBorderColor:#80bdff;\n$inputFocusBorderShadowColor:rgba(0,123,255,.25);\n$highlightBgColor:#007bff;\n$highlightTextColor:#ffffff;\n$headerBgColor:#f5f5f5;\n$headerHoverBgColor:#dcdcdc;\n$headerHoverBorderColor:#c4c4c4;\n$headerTextColor:#292B2C;\n$headerBorderColor:#dddddd;\n$headerIconColor:#999999;\n$headerIconHoverColor:#bd9090;\n$datableEvenRowBgColor:#f9f9f9;\n$datatableHoverBgColor:#f5f5f5;\n$buttonTextColor:#ffffff;\n$buttonBgColor:#007bff;\n$buttonBorderColor:#007bff;\n$buttonHoverBgColor:#0069d9;\n$buttonHoverBorderColor:#0062cc;\n$buttonActiveBgColor:#0062cc;\n$buttonActiveBorderColor:#005cbf;\n$buttonFocusBorderShadow:rgba(0,123,255,.5);\n\n@import '../sass/theme-v4/_theme';\n`\n}\n\n\n
An example sass command to compile the css would be;
\n\n
\nsass public/assets/theme/theme-myown.scss public/assets/theme/theme-myown.css\n
\n\n
Watch mode is handy to avoid compiling everytime when a change is made, instead use the following command\n so that sass generates the file whenever you make a customization. This builds all css files whenever a change is made to any scss file.
\n
\nsass -w src/assets/ --sourcemap=none\n
\n\n
Same can also be applied to layout itself;
\n
\n - Choose a layout name such as layout-myown.
\n - Create an empty file named layout-myown.scss inside assets/layout/css folder.
\n - Define the variables listed below and import the ../sass/layout/_layout.scss or ../sass/layout-v4/_layout.scss file depending on the Bootstrap version.
\n - Build the scss to generate css
\n - Serve the css by importing it using a link tag or a bundler.
\n
\n\n
Here are the variables required to create a layout.
\n\n
\n{\n`$topbarLeftGradientStartBgColor:#ff8f00;\n$topbarLeftGradientEndBgColor:#ffb300;\n$topbarRightGradientStartBgColor:#ff8f00;\n$topbarRightGradientEndBgColor:#ffb300;\n$topbarTextColor:#ffffff;\n$menuGradientStartBgColor:#ffffff;\n$menuGradientEndBgColor:#ffffff;\n$menuitemHoverBgColor:#e8e8e8;\n$menuitemActiveColor: #ff8f00;\n$menuitemActiveBgColor:#e8e8e8;\n$menuButtonBgColor:#ffffff;\n$menuButtonColor:#ff6f00;\n$badgeBgColor:#3eb839;\n$badgeColor:#ffffff;\n$darkMenuGradientStartBgColor:#363a41;\n$darkMenuGradientEndBgColor:#363a41;\n$darkMenuHoverBgColor:#4a4d54;\n$darkMenuMenuitemColor:#ffffff;\n$darkMenuMenuitemActiveColor:#ffe57f;\n$darkMenuMenuitemActiveBgColor:#282b30;\n\n//Bootstrap V3\n@import '../../sass/layout/_layout';\n\n//or\n\n//Bootstrap V4\n@import '../../sass/layout-v4/_layout';\n`\n}\n\n\n
Common SASS Variables
\n
In case you'd like to customize common variables, the _common.scss and _common-v4.scss under sass variables folder is where the core variables (e.g. font size, paddings) for the layout are defined.
\n\n
sass/variables/_common.scss
\n
\n{\n`$fontFamily:\"Helvetica Neue\",Helvetica,Arial,sans-serif;\n$fontSize:14px;\n$textColor:#212529;\n$textSecondaryColor:#777777;\n$borderRadius:4px;\n$dividerColor:#e5e5e5;\n$transitionDuration:.3s;\n$disabledBgColor:#eeeeee;\n\n/* Predefined Colors */\n$lightestGray:#f5f5f5;\n$lightGray:#cccccc;\n$gray:#999999;\n$darkGray:#777777;\n$white:#ffffff;\n\n$blue:#337ab7;\n$purple:#9189fd;\n$orange:#ffbf79;\n$lightBlue:#8dc8ff;\n$pink:#f790c8;\n\n$green:#3e9018;\n$red:#da2f31;\n$orange:#ffb200;\n$teal:#599597;\n$black:#000000;\n$yellow:#ffd644;\n\n$inputInvalidBorderColor:#fa8a28;\n$inputInvalidBgColor:#ffffff;\n`\n}\n\n\n
sass/variables/_common-v4.scss
\n
\n{\n`$fontFamily:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";\n$fontSize:14px;\n$textColor:#292B2C;\n$textSecondaryColor:#777777;\n$borderRadius:4px;\n$dividerColor:#e5e5e5;\n$transitionDuration:.3s;\n$disabledBgColor:#eeeeee;\n\n/* Predefined Colors */\n$lightestGray:#f5f5f5;\n$lightGray:#cccccc;\n$gray:#999999;\n$darkGray:#777777;\n$white:#ffffff;\n\n$blue:#007bff;\n$purple:#9189fd;\n$orange:#ffbf79;\n$lightBlue:#8dc8ff;\n$pink:#f790c8;\n$indigo:#6610f2;\n$green:#3e9018;\n$red:#da2f31;\n$orange:#ffb200;\n$teal:#599597;\n$black:#000000;\n$yellow:#ffd644;\n\n\n$inputInvalidBorderColor:#fa8a28;\n$inputInvalidBgColor:#ffffff;\n`\n}\n\n\n
_variables.scss under layout and layout-v4 folder define the shared variables of the layout.
\n
\n{\n`@import '../variables/_common';\n\n$menuHoverBgColor:#f4f4f4;\n$bodyBgColor:#EEF2F6;\n`\n}\n\n
Similarly _variables.scss files inside theme and theme-v4 folders contain the shared variables of the PrimeReact theme.
\n
sass/theme/_variables.scss
\n
\n{\n`@import '../variables/common';\n\n/* Icons */\n$iconFontSize:14px;\n$iconWidth:16px;\n\n/* Error */\n$errorColor:#a94442;\n$disabledColor:#eeeeee;\n\n/* Invalid Input */\n$errorBorderColor:#fa8a28;\n\n/* Headers */\n$headerPadding:10px 15px;\n\n/* Contents */\n$contentPadding:15px;\n$contentBorderColor:#dddddd;\n$contentBgColor:#ffffff;\n$contentLineHeight:1.43;\n\n/* Forms */\n$inputBgColor:#ffffff;\n$inputPadding:6px 12px;\n$inputBorderColor:#cccccc;\n$inputHoverBorderColor:#cccccc;\n$inputTextColor:#495057;\n\n//groups\n$inputGroupBorderColor:#cccccc;\n$inputGroupBgColor:#ffffff;\n$inputGroupTextColor:$textColor;\n$inputGroupIconColor:$textSecondaryColor;\n$inputGroupAddonMinWidth:2*$fontSize;\n$checkboxWidth:20px;\n$checkboxHeight:20px;\n\n/* Buttons */\n$buttonPadding: 0.429em 0.857em;\n$buttonIconOnlyPadding: 0.429em;\n$buttonTextColor:#ffffff;\n$toggleButtonBgColor:#ffffff;\n$toggleButtonBorderColor:#cccccc;\n$toggleButtonHoverBgColor:#e6e6e6;\n$toggleButtonHoverBorderColor:#adadad;\n\n/* List Items */\n$listPadding:6px 0;\n$listItemPadding:6px 20px;\n$listItemHoverBgColor:#f5f5f5;\n$listItemHoverTextColor:#292B2C;\n\n/* Messages */\n$infoMessageBgColor:#d9edf7;\n$infoMessageBorderColor:#bce8f1;\n$infoMessageTextColor:#31708f;\n$warnMessageBgColor:#fcf8e3;\n$warnMessageBorderColor:#faebcc;\n$warnMessageTextColor:#8a6d3b;\n$errorMessageBgColor:#f2dede;\n$errorMessageBorderColor:#ebccd1;\n$errorMessageTextColor:#a94442;\n$fatalMessageBgColor:#999999;\n$fatalMessageBorderColor:#6b6b6b;\n$fatalMessageTextColor:#ffffff;\n$successMessageBgColor:#dff0d8;\n$successMessageBorderColor:#d6e9c6;\n$successMessageTextColor:#3c763d;\n\n/* Overlays */\n$overlayBorderColor:#cccccc;\n\n/* Data */\n$datatableCellBorderColor:#dddddd;\n$datatableCellPadding:8px;\n$paginatorBgColor:#ffffff;\n\n/* Panel */\n$panelContentBorderColor:#DCE1E7;\n\n`\n}\n\n\n
sass/theme-v4/_variables.scss
\n
\n{\n`@import '../variables/common-v4';\n\n/* Icons */\n$iconFontSize:14px;\n$iconWidth:16px;\n\n/* Error */\n$errorColor:#a94442;\n$disabledColor:#eeeeee;\n\n/* Headers */\n$headerPadding:10px 15px;\n\n/* Contents */\n$contentPadding:15px;\n$contentBorderColor:#dddddd;\n$contentBgColor:#ffffff;\n$contentLineHeight:1.43;\n\n/* Forms */\n$inputBgColor:#ffffff;\n$inputPadding:6px 12px;\n$inputBorderColor:#cccccc;\n$inputHoverBorderColor:#cccccc;\n$inputTextColor:#495057;\n\n//groups\n$inputGroupBorderColor:#cccccc;\n$inputGroupBgColor:#ffffff;\n$inputGroupTextColor:$textColor;\n$inputGroupIconColor:$textSecondaryColor;\n$inputGroupAddonMinWidth:2*$fontSize;\n$checkboxWidth:20px;\n$checkboxHeight:20px;\n\n/* Buttons */\n$buttonTextColor:#ffffff;\n$toggleButtonBgColor:#ffffff;\n$toggleButtonBorderColor:#cccccc;\n$toggleButtonHoverBgColor:#e6e6e6;\n$toggleButtonHoverBorderColor:#adadad;\n\n/* List Items */\n$listPadding:6px 0;\n$listItemPadding:8px 20px;\n$listItemHoverBgColor:#f7f7f9;\n$listItemHoverTextColor:#1d1e1f;\n\n/* Messages */\n$infoMessageBgColor:#d9edf7;\n$infoMessageBorderColor:#bcdff1;\n$infoMessageTextColor:#31708f;\n$warnMessageBgColor:#fcf8e3;\n$warnMessageBorderColor:#faf2cc;\n$warnMessageTextColor:#8a6d3b;\n$errorMessageBgColor:#f2dede;\n$errorMessageBorderColor:#ebcccc;\n$errorMessageTextColor:#a94442;\n$fatalMessageBgColor:#999999;\n$fatalMessageBorderColor:#797979;\n$fatalMessageTextColor:#ffffff;\n$successMessageBgColor:#dff0d8;\n$successMessageBorderColor:#d6e9c6;\n$successMessageTextColor:#3c763d;\n\n/* Overlays */\n$overlayBorderColor:#cccccc;\n\n/* Data */\n$datatableCellBorderColor:#dddddd;\n$datatableCellPadding:8px;\n$paginatorBgColor:#ffffff;\n\n/* Panel */\n$panelContentBorderColor:#DCE1E7;\n\n\n`\n}\n\n\n
In the demo app layout and theme css files are defined using link tags in index.html so the demo can switch them on the fly by changing the path however if this is not a requirement, you may also import them in App.js so that webpack adds them to the bundle.
\n\n
Menu Item Badges
\n
Badges are numerical indicators associated with a link defined using the badge property.
\n
\nlabel: 'Components', icon: 'list', badge: '2'\n
\n\n
Menu Modes
\n
Menu has 4 modes, static, overlay, slim and horizontal. Main layout container element in App.js is used to define which mode to use by adding specific classes. List\n below indicates the style classes for each mode.
\n\n
\n - Static: \"layout-wrapper menu-layout-static\"
\n - Overlay: \"layout-wrapper menu-layout-overlay\"
\n - Slim: \"layout-wrapper menu-layout-static menu-layout-slim\"
\n - Horizontal: \"layout-wrapper menu-layout-static menu-layout-horizontal\"
\n
\n\n
For example to create a horizontal menu, the div element should be in following form;
\n
\n<div className=\"layout-wrapper menu-layout-static menu-layout-horizontal\">\n
\n\n
It is also possible to leave the choice to the user by keeping the preference at a component and using an expression to bind it so that user can switch between modes. Sample\n application has an example implementation of such use case. Refer to App.js for an example.
\n\n
Dark Menu
\n
Default color scheme of menu is light and alternative dark mode can be activated by adding layout-menu-dark style class to the menu container.
\n\n
\n<div className=\"layout-menu-container layout-menu-dark\">\n
\n\n
Profile Modes
\n
There are two possible locations for the user profile menu, first option is inline located inside the main menu and second option is the topbar menu. For inline mode,\n profile content should be placed above the menu and for inline mode content goes in topbar-items list. The sample demo application provides examples for\n both cases.
\n\n
PrimeFlex Grid System
\n
Avalon uses PrimeFlex Grid System throughout the samples, although any Grid library can be used we suggest using PrimeFlex as your grid system as it is well tested and supported by PrimeReact. PrimeFlex is\n available at npm and defined at package.json of Avalon so that it gets installed by default.
\n\n
Customizing Styles
\n
It is suggested to write your customizations in _layout_styles.scss and _theme_styles.scss files for seamless updates\n as these files are empty by default and never updated.
\n \n
Migration Guide
\n\t\t\t\t\t\t
2.0.0-beta.1 to 3.0.0
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t- Update index.jx
\n\t\t\t\t\t\t\t- Update App.js
\n\t\t\t\t\t\t\t- Update AppFooter.js
\n\t\t\t\t\t\t\t- Update AppMenu.js
\n\t\t\t\t\t\t\t- Update AppInlineProfile.js
\n\t\t\t\t\t\t\t- Update AppTopbar.js
\n\t\t\t\t\t\t\t- Add AppWrapper.js
\n\t\t\t\t\t\t\t- Update layout css files
\n\t\t\t\t\t\t\t- Update theme css files
\n\t\t\t\t\t\t
\n\n
1.x to 2.0.0-beta.1
\n
Brings support to PrimeReact 2.x
\n
\n - Install PrimeFlex from npm.
\n - Update layout css files
\n - Update theme css files
\n
\n\n
1.6.0 to 1.6.1
\n
Brings support for PrimeReact 1.6.x.
\n\n
\n - Import primeicons.css in App.js.
\n - Update layout css files
\n - Update theme css files
\n
\n
1.5.0 to 1.6.0
\n
\n - Update AppMenu.js.
\n - Update layout css files.
\n - Update theme css files.
\n
\n
1.4.2 to 1.5.0
\n
\n - Update App.js.
\n - Update layout css files.
\n - Update theme css files.
\n
\n\n
1.4.1 to 1.4.2
\n
\n - Update theme css files
\n
\n\n
1.4.0 to 1.4.1
\n
\n - Update theme css files
\n
\n \n
1.0.0 to 1.4.0
\n
\n - Update PrimeReact to 1.4.0
\n - Update css files of theme and layout
\n
\n
![\"avalon-react\"](\"assets/layout/images/login/icon-login.svg\")
\n\t\t\t\t\t\t\t\t\t![\"avalon-react\"/](\"assets/layout/images/exception/icon-error.png\"){kind=icon}
\n\t\t\t\t![\"Logo\"](\"assets/layout/images/logo_c3leng.png\"){kind=logo}
![\"\"](\"assets/layout/images/backdrop.jpg\")
\n ![\"\"](\"assets/layout/images/line_qrcode.jpg\")
\n ![\"Logo\"](\"assets/layout/images/logo_c3leng.png\"\n){kind=logo}
\n ![\"Logo\"](\"assets/layout/images/logo-dark.png\"){kind=logo}
\n ![\"Brazil](\"assets/layout/images/dashboard/flag-brazil.png\")
![\"China](\"assets/layout/images/dashboard/flag-china.png\")
![\"Belgium](\"assets/layout/images/dashboard/flag-belgium.png\")
![\"France](\"assets/layout/images/dashboard/flag-france.png\")
![\"Chart](\"assets/layout/images/dashboard/graph-1.svg\")
\n ![\"Chart](\"assets/layout/images/dashboard/graph-2.svg\")
\n ![\"Chart](\"assets/layout/images/dashboard/graph-3.svg\")
\n ![\"User\"](\"assets/layout/images/avatar.png\"){kind=avatar}
\n ![\"Contact](\"assets/layout/images/avatar1.png\"){kind=avatar}
\n ![\"Contact](\"assets/layout/images/avatar2.png\"){kind=avatar}
\n ![\"Contact](\"assets/layout/images/avatar3.png\"){kind=avatar}
\n ![\"Contact](\"assets/layout/images/avatar4.png\"){kind=avatar}
\n ![\"Bridge\"](\"assets/layout/images/dashboard/bridge.png\")
\n ![\"Nature\"](\"assets/demo/images/nature/nature1.jpg\")
\n ![\"Map\"](\"assets/layout/images/dashboard/map.png\")
\n ![\"Profile\"](\"assets/avatar/user.png\")
\n );\n\n if (this.state.isLoading) {\n if (userInfo) {\n this.initial(userInfo);\n this.setState({ isLoadAvatar: true })\n }\n if(this.props.location.search == '?from=chat'){\n this.setState({ fromChat: true})\n }\n }\n\n \n if(userInfo){\n if(userInfo.person_type==1){\n if (userInfo.person_first_name && userInfo.person_last_name) {\n fullName = userInfo.person_first_name + \" \" + userInfo.person_last_name\n }\n }else{\n fullName = userInfo.org_name\n }\n }\n\n if (this.props.userInfo) {\n if (!this.props.userInfo.img_person_name) {\n imageProfile = (\n