Skip to content

Commit

Permalink
Theme switcher
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Mar 28, 2017
1 parent 3d137f7 commit 904d8fa
Show file tree
Hide file tree
Showing 79 changed files with 57 additions and 48 deletions.
12 changes: 1 addition & 11 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="%PUBLIC_URL%/resources/themes/omega/theme.css">
<link id="theme-link" rel="stylesheet" href="%PUBLIC_URL%/resources/themes/omega/theme.css">
<link rel="stylesheet" href="%PUBLIC_URL%/resources/primeng.min.css">
<script src="%PUBLIC_URL%/showcase/resources/script/prism.js" data-manual></script>

<title>PrimeReact</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
Binary file removed public/showcase/resources/demo/images/themes/afterdark.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/afternoon.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/afterwork.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/aristo.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/black-tie.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/blitzer.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/bluesky.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/bootstrap.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/casablanca.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/cruze.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/cupertino.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/dark-hive.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/dot-luv.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/eggplant.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/excite-bike.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/flick.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/glass-x.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/home.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/hot-sneaks.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/humanity.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/le-frog.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/midnight.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/mint-choc.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/overcast.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/pepper-grinder.png
View file
Binary file not shown.
Binary file removed public/showcase/resources/demo/images/themes/redmond.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/rocket.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/sam.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/smoothness.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/south-street.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/start.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/sunny.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/swanky-purse.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/afterdark.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/afternoon.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/afterwork.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/aristo.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/black-tie.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/blitzer.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/bluesky.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/bootstrap.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/casablanca.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/cruze.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/cupertino.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/dark-hive.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/delta.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/dot-luv.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/eggplant.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/excite-bike.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/flick.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/glass-x.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/home.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/hot-sneaks.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/humanity.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/le-frog.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/midnight.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/mint-choc.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/overcast.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/pepper-grinder.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/redmond.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/rocket.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/sam.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/smoothness.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/south-street.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/start.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/sunny.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/swanky-purse.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/trontastic.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/ui-darkness.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/ui-lightness.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/themesIndex/vader.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/trontastic.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/ui-darkness.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/ui-lightness.png
View file
Diff not rendered.
Binary file removed public/showcase/resources/demo/images/themes/vader.png
View file
Diff not rendered.
20 changes: 12 additions & 8 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ body {
left: 0;
top: 0;
background-color: #f6f6f6;
overflow: hidden;
overflow: auto;
width: 300px;
box-sizing: border-box;
-moz-box-shadow: 1px 0 10px rgba(0, 0, 0, 0.2);
Expand Down Expand Up @@ -339,8 +339,12 @@ body {
float: right;
}

#themeswitcher:hover > div {
display: block;
}

/** ThemeSwitcher **/
#GlobalThemeSwitcher {
#themeswitcher > div {
display: none;
text-align: left;
width: 200px;
Expand All @@ -358,18 +362,18 @@ body {
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
margin-left: -60px;
}
#GlobalThemeSwitcher a {
#themeswitcher > div a {
display: block;
padding: 10px;
border-bottom: solid 1px #dde3e7;
text-align: left;
color: #87939B;
overflow: hidden;
}
#GlobalThemeSwitcher a:hover {
#themeswitcher > div a:hover {
color: #fdd106;
}
#GlobalThemeSwitcher a span.ui-theme {
#themeswitcher > div a span.ui-theme {
width: 30px;
height: 27px;
float: left;
Expand All @@ -378,18 +382,18 @@ body {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#GlobalThemeSwitcher a img {
#themeswitcher > div a img {
float: left;
width: 30px;
height: 27px;
}
#GlobalThemeSwitcher a span.ui-text {
#themeswitcher > div a span.ui-text {
display: inline-block;
margin-top: 7px;
margin-left: 10px;
font-size: 14px;
}
#GlobalThemeSwitcher > span {
#themeswitcher > div > span {
font-size: 18px;
display: inline-block;
margin: 20px 0 0 9px;
Expand Down
70 changes: 44 additions & 26 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import './App.css';

class Home extends Component {

render() {
return (
<div className="homepage">
Expand Down Expand Up @@ -196,11 +197,11 @@
<Link to="/fileupload">&#9679; Upload</Link>
</div>

<a href="#" onClick={(event) => this.openMenu(event,6)} className={classNames({'active-menuitem': this.state.activeMenu === 6})}>
<a href="#" onClick={(event) => this.openMenu(event,6)} className={classNames({'active-menuitem': this.state.activeMenu === 6})} style={{display:'none'}}>
<img alt="button" src="showcase/resources/images/mono/menu.svg"></img>
<span>Menu</span>
</a>
<div className={classNames({'submenu-hidden': this.state.activeMenu !== 6, 'submenu-visible': this.state.activeMenu === 6})}>
<div className={classNames({'submenu-hidden': this.state.activeMenu !== 6, 'submenu-visible': this.state.activeMenu === 6})} style={{display:'none'}}>

</div>

Expand All @@ -227,19 +228,19 @@
<Link to="/growl">&#9679; Growl</Link>
</div>

<a href="#" onClick={(event) => this.openMenu(event,9)} className={classNames({'active-menuitem': this.state.activeMenu === 9})}>
<a href="#" onClick={(event) => this.openMenu(event,9)} className={classNames({'active-menuitem': this.state.activeMenu === 9})} style={{display:'none'}}>
<img alt="button" src="showcase/resources/images/mono/multimedia.svg"></img>
<span>Multimedia</span>
</a>
<div className={classNames({'submenu-hidden': this.state.activeMenu !== 9, 'submenu-visible': this.state.activeMenu === 9})}>
<div className={classNames({'submenu-hidden': this.state.activeMenu !== 9, 'submenu-visible': this.state.activeMenu === 9})} style={{display:'none'}}>

</div>

<a href="#" onClick={(event) => this.openMenu(event,10)} className={classNames({'active-menuitem': this.state.activeMenu === 10})}>
<a href="#" onClick={(event) => this.openMenu(event,10)} className={classNames({'active-menuitem': this.state.activeMenu === 10})} style={{display:'none'}}>
<img alt="button" src="showcase/resources/images/mono/dragdrop.svg"></img>
<span>DragDrop</span>
</a>
<div className={classNames({'submenu-hidden': this.state.activeMenu !== 10, 'submenu-visible': this.state.activeMenu === 10})}>
<div className={classNames({'submenu-hidden': this.state.activeMenu !== 10, 'submenu-visible': this.state.activeMenu === 10})} style={{display:'none'}}>

</div>

Expand All @@ -257,6 +258,22 @@
}

class App extends Component {

constructor() {
super();
this.theme = 'omega';
this.changeTheme = this.changeTheme.bind(this);
}

changeTheme(event) {
var theme = event.currentTarget.dataset.theme;
var themeElement = document.getElementById('theme-link');
var oldThemeURL = themeElement.getAttribute('href');
var newThemeURL = oldThemeURL.replace(this.theme, theme);
this.theme = theme;
themeElement.setAttribute('href', newThemeURL);
event.preventDefault();
}

render() {
return (
Expand All @@ -280,30 +297,31 @@
<img alt="logo" src="showcase/resources/images/menuicon.svg"/>
</a>

<a href="http://forum.primefaces.org/viewforum.php?f=35" className="topbar-link">
<a href="http://forum.primefaces.org/viewforum.php?f=57" className="topbar-link">
<img alt="mockosx" src="showcase/resources/images/forum.png" />
</a>

<span className="topbar-link" id="themeSwitcher">
<span id="themeswitcher" className="topbar-link">
<img alt="themeswitcher" src="showcase/resources/images/themes.png" />
<div id="GlobalThemeSwitcher">
<span>Free Themes</span>
<a href="#" data-theme="omega"><span className="ui-theme ui-theme-omega"></span><span className="ui-text">Omega</span></a>
<a href="#" data-theme="bootstrap"><span className="ui-theme ui-theme-bootstrap"></span><span className="ui-text">Bootstrap</span></a>
<a href="#" data-theme="aristo"><span className="ui-theme ui-theme-aristo"></span><span className="ui-text">Aristo</span></a>
<a href="#" data-theme="cupertino"><span className="ui-theme ui-theme-cupertino"></span><span className="ui-text">Cupertino</span></a>
<a href="#" data-theme="cruze"><span className="ui-theme ui-theme-cruze"></span><span className="ui-text">Cruze</span></a>
<a href="#" data-theme="darkness"><span className="ui-theme ui-theme-ui-darkness"></span><span className="ui-text">Darkness</span></a>
<a href="#" data-theme="delta"><span className="ui-theme ui-theme-delta"></span><span className="ui-text">Delta</span></a>
<a href="#" data-theme="flick"><span className="ui-theme ui-theme-flick"></span><span className="ui-text">Flick</span></a>
<a href="#" data-theme="home"><span className="ui-theme ui-theme-home"></span><span className="ui-text">Home</span></a>
<a href="#" data-theme="lightness"><span className="ui-theme ui-theme-ui-lightness"></span><span className="ui-text">Lightness</span></a>
<a href="#" data-theme="pepper-grinder"><span className="ui-theme ui-theme-pepper-grinder"></span><span className="ui-text">Pepper-Grinder</span></a>
<a href="#" data-theme="redmond"><span className="ui-theme ui-theme-redmond"></span><span className="ui-text">Redmond</span></a>
<a href="#" data-theme="rocket"><span className="ui-theme ui-theme-rocket"></span><span className="ui-text">Rocket</span></a>
<a href="#" data-theme="south-street"><span className="ui-theme ui-theme-south-street"></span><span className="ui-text">South-Street</span></a>
<a href="#" data-theme="start"><span className="ui-theme ui-theme-start"></span><span className="ui-text">Start</span></a>
<a href="#" data-theme="trontastic"><span className="ui-theme ui-theme-trontastic"></span><span className="ui-text">Trontastic</span></a>
<div>
<span>Themes</span>
<a href="#" data-theme="omega" onClick={this.changeTheme}><span className="ui-text">Omega</span></a>
<a href="#" data-theme="bootstrap" onClick={this.changeTheme}><span className="ui-text">Bootstrap</span></a>
<a href="#" data-theme="cruze" onClick={this.changeTheme}><span className="ui-text">Cruze</span></a>
<a href="#" data-theme="cupertino" onClick={this.changeTheme}><span className="ui-text">Cupertino</span></a>
<a href="#" data-theme="darkness" onClick={this.changeTheme}><span className="ui-text">Darkness</span></a>
<a href="#" data-theme="flick" onClick={this.changeTheme}><span className="ui-text">Flick</span></a>
<a href="#" data-theme="home" onClick={this.changeTheme}><span className="ui-text">Home</span></a>
<a href="#" data-theme="kasper" onClick={this.changeTheme}><span className="ui-text">Kasper</span></a>
<a href="#" data-theme="lightness" onClick={this.changeTheme}><span className="ui-text">Lightness</span></a>
<a href="#" data-theme="ludvig" onClick={this.changeTheme}><span className="ui-text">Ludvig</span></a>
<a href="#" data-theme="pepper-grinder" onClick={this.changeTheme}><span className="ui-text">Pepper-Grinder</span></a>
<a href="#" data-theme="redmond" onClick={this.changeTheme}><span className="ui-text">Redmond</span></a>
<a href="#" data-theme="rocket" onClick={this.changeTheme}><span className="ui-text">Rocket</span></a>
<a href="#" data-theme="south-street" onClick={this.changeTheme}><span className="ui-text">South-Street</span></a>
<a href="#" data-theme="start" onClick={this.changeTheme}><span className="ui-text">Start</span></a>
<a href="#" data-theme="trontastic" onClick={this.changeTheme}><span className="ui-text">Trontastic</span></a>
<a href="#" data-theme="voclain" onClick={this.changeTheme}><span className="ui-text">Voclain</span></a>
</div>
</span>

Expand Down
3 changes: 0 additions & 3 deletions src/showcase/setup/SetupPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { Component } from 'react';
import {Link} from 'react-router';
import {CodeHighlight} from '../../components/codehighlight/CodeHighlight';

export class SetupPage extends Component {
Expand Down Expand Up @@ -90,8 +89,6 @@ import 'font-awesome/css/font-awesome.css';

<h3>Quickstart</h3>
<p>An example application based on create-react-app is available at <a href="https://github.com/primefaces/primereact-quickstart">github</a>.</p>


</div>
</div>
);
Expand Down

0 comments on commit 904d8fa

Please sign in to comment.