diff --git a/src/components/Dictionary.jsx b/src/components/Dictionary.jsx
index ce841b4..0408465 100644
--- a/src/components/Dictionary.jsx
+++ b/src/components/Dictionary.jsx
@@ -9,37 +9,28 @@ export class Dictionary extends React.Component {
}
showWords() {
- let words = this.props.words.map((word) => {
- return <Word key={'d:' + this.props.details.name + this.props.details.externalID.toString() + 'w:' + word.wordId.toString()} isEditing={true}
- name={word.name}
- pronunciation={word.pronunciation}
- partOfSpeech={word.partOfSpeech}
- simpleDefinition={word.simpleDefinition}
- longDefinition={word.longDefinition}
- wordId={word.wordId}
- updateWord={(wordId, wordObject) => this.props.updateWord(wordId, wordObject)} />;
- });
+ if (this.props.words.length > 0) {
+ let words = this.props.words.map((word) => {
+ return <Word key={'d:' + this.props.details.name + this.props.details.externalID.toString() + 'w:' + word.wordId.toString()} isEditing={true}
+ name={word.name}
+ pronunciation={word.pronunciation}
+ partOfSpeech={word.partOfSpeech}
+ simpleDefinition={word.simpleDefinition}
+ longDefinition={word.longDefinition}
+ wordId={word.wordId}
+ updateWord={(wordId, wordObject) => this.props.updateWord(wordId, wordObject)} />;
+ });
- return <div>{words}</div>;
+ return <div>{words}</div>;
+ } else {
+ return <h3>No words yet!</h3>;
+ }
}
render() {
return (
- <div>
- <h1 id="dictionaryName">
- {this.props.details.name}
- </h1>
-
- <h4 id="dictionaryBy">
- {this.props.details.createdBy}
- </h4>
- <div id="incompleteNotice">
- Dictionary is complete: {this.props.settings.isComplete.toString()}
- </div>
-
- <div id="theDictionary">
- {this.showWords()}
- </div>
+ <div id="theDictionary">
+ {this.showWords()}
</div>
);
}
diff --git a/src/components/InfoDisplay.jsx b/src/components/InfoDisplay.jsx
new file mode 100644
index 0000000..8f3ea87
--- /dev/null
+++ b/src/components/InfoDisplay.jsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import marked from 'marked';
+
+import {WordForm} from './WordForm';
+import {Button} from './Button';
+
+const saveIcon = <i>💾</i>;
+const editIcon = <i>🖉</i>;
+
+export class InfoDisplay extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ isDisplayed: props.startDisplayed || false,
+ tabDisplay: 0
+ };
+ }
+
+ showTabbedInterface() {
+ if (this.state.isDisplayed) {
+ return (
+ <div className='dictionary-info'>
+
+ <Button classes={'inline-button' + ((this.state.tabDisplay === 0) ? ' selected-tab' : '')}
+ action={() => this.changeTab(0)}
+ label='Description' />
+
+ <Button classes={'inline-button' + ((this.state.tabDisplay === 1) ? ' selected-tab' : '')}
+ action={() => this.changeTab(1)}
+ label='Details' />
+
+ <div className='tabbed-interface'>
+ {this.displaySelectedTab()}
+ </div>
+
+ </div>
+ );
+ }
+ }
+
+ toggleDisplay() {
+ this.setState({
+ isDisplayed: !this.state.isDisplayed
+ });
+ }
+
+ displaySelectedTab() {
+ switch(this.state.tabDisplay) {
+ case 1: {
+ return (
+ <div>
+ {this.showDetails()}
+ </div>
+ );
+ break;
+ }
+ default: {
+ return (
+ <div>
+ {this.showDescription()}
+ </div>
+ );
+ break;
+ }
+ }
+ }
+
+ showDescription() {
+ return (
+ <div dangerouslySetInnerHTML={{__html: marked(this.props.details.description)}} />
+ );
+ }
+
+ showDetails() {
+ return (
+ <div>
+
+ <h4 className='created-by'>
+ Created By {this.props.details.createdBy}
+ </h4>
+
+ <h5 className='total-words'>
+ {this.props.numberOfWords} Total Word{(this.props.numberOfWords !== 1) ? 's' : ''}
+ </h5>
+
+ <h5 className='incopmlete-notice'>
+ {(!this.props.isComplete) ? 'Note: This dictionary is not yet complete and is likely to change.' : ''}
+ </h5>
+
+ </div>
+ );
+ }
+
+ changeTab(tabNumber) {
+ this.setState({
+ tabDisplay: tabNumber
+ });
+ }
+
+ render() {
+ return (
+ <div>
+ <Button
+ action={() => this.toggleDisplay()}
+ label={((this.state.isDisplayed) ? 'Hide' : 'Show') + ' Info'} />
+
+ {this.showTabbedInterface()}
+
+ </div>
+ );
+ }
+}
+
+InfoDisplay.defaultProps = {
+ isEditing: false
+}
\ No newline at end of file
diff --git a/src/index.jsx b/src/index.jsx
index d4bf6e1..6464927 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -8,6 +8,7 @@ import {Header} from './components/Header';
import {Footer} from './components/Footer';
import {WordForm} from './components/WordForm';
import {Button} from './components/Button';
+import {InfoDisplay} from './components/InfoDisplay';
import {EditDictionaryForm} from './components/EditDictionaryForm';
import {Dictionary} from './components/Dictionary';
@@ -229,10 +230,6 @@ class Lexiconga extends React.Component {
</div>
<div className='center-column'>
- <div id="incompleteNotice">
- Dictionary is complete: {this.state.settings.isComplete.toString()}
- </div>
-
<Button
action={() => this.saveLocalDictionary()}
label='Save Dictionary' />
@@ -246,6 +243,15 @@ class Lexiconga extends React.Component {
settings={this.state.settings}
saveChanges={(changesObject) => this.saveChanges(changesObject)} />
+ <h1 className="dictionary-name">
+ {this.state.details.name}
+ </h1>
+
+ <InfoDisplay
+ details={this.state.details}
+ numberOfWords={this.state.words.length}
+ isComplete={this.state.settings.isComplete} />
+
<Dictionary
details={this.state.details}
words={this.state.words}
diff --git a/src/sass/_lexiconga.scss b/src/sass/_lexiconga.scss
index 82348ae..970647a 100644
--- a/src/sass/_lexiconga.scss
+++ b/src/sass/_lexiconga.scss
@@ -122,7 +122,7 @@ input, textarea, select, option {
border: none;
}
-#dictionaryName {
+.dictionary-name {
text-shadow: 2px 2px 2px #915337;
}
@@ -130,13 +130,24 @@ input, textarea, select, option {
text-shadow: none;
}
-#dictionaryDescription {
- width: 90%;
- background: #f2d5b2;
+.tabbed-interface {
+ z-index: 10;
+ background: $dictionary-info-color;
+ -webkit-box-shadow: $box-shadow;
+ -moz-box-shadow: $box-shadow;
+ box-shadow: $box-shadow;
+}
+
+.selected-tab {
+ z-index: 5;
+ background: $dictionary-info-color !important;
+ -webkit-box-shadow: $box-shadow;
+ -moz-box-shadow: $box-shadow;
+ box-shadow: $box-shadow;
}
#loginLink, #logoutLink, #descriptionToggle, #searchFilterToggle, #settingsButton, .deleteCancelButton, .deleteConfirmButton, #settingsScreenCloseButton, #infoScreenCloseButton, .clickable, button {
- background: #dcb078;
+ background: $button-color;
}
.word {
diff --git a/src/sass/_styles.scss b/src/sass/_styles.scss
index 3ce2118..efa0526 100644
--- a/src/sass/_styles.scss
+++ b/src/sass/_styles.scss
@@ -216,7 +216,7 @@ input[type=checkbox] {
min-width:200px;
}
-#dictionaryName {
+.dictionary-name {
margin: 0 0 5px;
}
@@ -226,13 +226,22 @@ input[type=checkbox] {
text-decoration: none;
}
-#dictionaryDescription {
- width: 100%;
+.dictionary-info {
+ width: 90%;
max-height: 400px;
overflow-y: auto;
- padding: 15px;
+ padding: 10px;
border: none;
- margin: 10px;
+ margin: 0;
+
+ .selected-tab, .tabbed-interface {
+ position: relative;
+ }
+
+ .tabbed-interface {
+ margin: 0;
+ padding: 5px 10px;
+ }
}
.clickable, button {
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 9a14933..b6c220d 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -4,4 +4,6 @@ $box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.75);
$column-margin: 15px;
$min-column-width: 260px;
$max-column-width: 800px;
+$button-color: #dcb078;
+$dictionary-info-color: #f2d5b2;
$footer-height: 32px;