Alamantus
/
Lexiconga
mirror of https://github.com/Alamantus/Lexiconga.git
1
0
Fork 0
Code Issues Releases Activity

Bulma styling changes

This commit is contained in:
Robbie Antenesse 2017-04-01 14:56:34 -06:00
parent 91d4d5b5da
commit 7392c32c83
12 changed files with 117 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
php/google/
node_modules/
public/
.idea/

2
src/components/Button.jsx
View File

@ -11,7 +11,7 @@ export class Button extends Component {
// Always give the Button a 'clickable' class and then add any others.
processClasses() {
var classes = 'button is-small';
var classes = 'button';
if (this.props.classes) {
classes += ' ' + this.props.classes;

2
src/components/Checkbox.jsx
View File

@ -21,7 +21,7 @@ export class Checkbox extends Input {
render() {
return (
<label>
<label className='checkbox'>
<span>
{this.props.name}
{this.showHelperLink()}

35
src/components/Dropdown.jsx
View File

@ -40,20 +40,31 @@ export class Dropdown extends Input {
render() {
return (
<label className='control'>
<div className='level'>
<span className='label level-item'>
{this.props.name}
</span>
<span className='level-item'>
<div className='control'>
<div className='level is-marginless'>
<div className='level-item'>
<label className='label' for={this.generatedId}>
{this.props.name}
</label>
</div>
<div className='level-item'>
{this.showHelperLink()}
</span>
</div>
</div>
<select value={this.state.value} onChange={this.handleOnChange} disabled={(this.state.isDisabled) ? 'disabled' : null}>
<option value=" "></option>
{this.parseOptions(this.props.optionsList)}
</select>
</label>
<p className='control'>
<span className='select'>
<select value=' ' onChange={this.handleOnChange} disabled={(this.state.isDisabled) ? 'disabled' : null}>
<option value=' '></option>
{this.parseOptions(this.props.optionsList)}
</select>
</span>
</p>
</div>
);
}
}

66
src/components/EditDictionaryForm.jsx
View File

@ -47,46 +47,50 @@ export class EditDictionaryForm extends Component {
<h2>Edit Dictionary</h2>
<div className='settings-column'>
<div className='columns'>
<Input name='Dictionary Name'
value={this.props.details.name}
ref={(inputComponent) => this.nameField = inputComponent} />
<div className='column'>
<TextArea name='Dictionary Details'
value={this.props.details.description}
ref={(inputComponent) => this.descriptionField = inputComponent} />
<Input name='Dictionary Name'
value={this.props.details.name}
ref={(inputComponent) => this.nameField = inputComponent} />
<Input name='Parts of Speech'
value={this.props.settings.partsOfSpeech}
ref={(inputComponent) => this.partsOfSpeechField = inputComponent} />
<TextArea name='Dictionary Details'
value={this.props.details.description}
ref={(inputComponent) => this.descriptionField = inputComponent} />
<Input name='Classification'
value={this.props.details.listTypeName}
helperLink={{
action: () => alert('The word used to describe the list of words represented by this dictionary. By default, it is "Dictionary", but it could be "Lexicon" or some other classification.')
}}
ref={(inputComponent) => this.listTypeNameField = inputComponent} />
<Input name='Parts of Speech'
value={this.props.settings.partsOfSpeech}
ref={(inputComponent) => this.partsOfSpeechField = inputComponent} />
<Checkbox name='Allow Duplicates'
value={this.props.settings.allowDuplicates}
ref={(inputComponent) => this.allowDuplicatesField = inputComponent} />
<Input name='Classification'
value={this.props.details.listTypeName}
helperLink={{
action: () => alert('The word used to describe the list of words represented by this dictionary. By default, it is "Dictionary", but it could be "Lexicon" or some other classification.')
}}
ref={(inputComponent) => this.listTypeNameField = inputComponent} />
<Checkbox name='Case-Sensitive'
value={this.props.settings.caseSensitive}
ref={(inputComponent) => this.caseSensitiveField = inputComponent} />
<Checkbox name='Allow Duplicates'
value={this.props.settings.allowDuplicates}
ref={(inputComponent) => this.allowDuplicatesField = inputComponent} />
<Checkbox name='Sort by Definition'
value={this.props.settings.sortByEquivalent}
ref={(inputComponent) => this.sortByEquivalentField = inputComponent} />
<Checkbox name='Case-Sensitive'
value={this.props.settings.caseSensitive}
ref={(inputComponent) => this.caseSensitiveField = inputComponent} />
<Checkbox name='Dictionary Is Complete'
value={this.props.settings.isComplete}
ref={(inputComponent) => this.isCompleteField = inputComponent} />
<Checkbox name='Sort by Definition'
value={this.props.settings.sortByEquivalent}
ref={(inputComponent) => this.sortByEquivalentField = inputComponent} />
<Checkbox name='Dictionary Is Public'
value={this.props.settings.isPublic}
ref={(inputComponent) => this.isPublicField = inputComponent} />
<Checkbox name='Dictionary Is Complete'
value={this.props.settings.isComplete}
ref={(inputComponent) => this.isCompleteField = inputComponent} />
<Checkbox name='Dictionary Is Public'
value={this.props.settings.isPublic}
ref={(inputComponent) => this.isPublicField = inputComponent} />
</div>
</div>

10
src/components/FixedPage.jsx
View File

@ -33,13 +33,15 @@ export class FixedPage extends Component {
<div className='modal-background' onClick={this.hide}></div>
<div className={contentClass}>
<div className='box'>
<Button classes='modal-close'
action={this.hide}
label='Close' />
<Button classes='modal-close'
action={this.hide}
label='Close' />
{this.props.children}
{this.props.children}
</div>
</div>
</div>

8
src/components/Input.jsx
View File

@ -23,7 +23,7 @@ export class Input extends Component {
// doValidate: props.doValidate || true
// };
this.generatedId = 'input' + props.idManager.nextStr;
this.generatedId = 'input' + window.idManager.nextStr;
this.state = {
value: props.value || '',
@ -53,13 +53,13 @@ export class Input extends Component {
if (this.props.helperLink) {
if (this.props.helperLink.url) {
return (
<a className='button is-small inline-button' href={this.props.helperLink.url} target='_blank' title={this.props.helperLink.hover}>
<a className='button is-small' href={this.props.helperLink.url} target='_blank' title={this.props.helperLink.hover}>
{this.props.helperLink.label}
</a>
);
} else {
return (
<Button classes='inline-button'
<Button classes='is-small'
action={this.props.helperLink.action}
label={this.props.helperLink.label || '?'} />
);
@ -79,7 +79,7 @@ export class Input extends Component {
render() {
return (
<div>
<div className='control'>
<div className='level is-marginless'>

28
src/components/TextArea.jsx
View File

@ -26,7 +26,7 @@ export class TextArea extends Input {
render() {
return (
<div className='control'>
<div className='level'>
<div className='level is-marginless'>
<div className='level-item'>
<label className='label' for={this.generatedId}>
{this.props.name}
@ -34,14 +34,26 @@ export class TextArea extends Input {
</div>
<div className='level-item'>
<FixedPage id={this.generatedId + '_textbox'} contentClass='no-scroll' buttonClasses='maximize-button' buttonText='Maximize'>
<label><span>{this.props.name}</span></label>
<FixedPage id={this.generatedId + '_textbox'}
contentClass='no-scroll'
buttonClasses='is-small'
buttonText='Maximize'>
<header className='header'>
<h3 className='title'>
{this.props.name}
</h3>
</header>
<textarea id={this.generatedId} className='fullscreen-textbox'
onChange={linkEvent(this, this.handleMaximizedTextboxClose)}
onKeyDown={linkEvent(this, this.handleOnKeyDown)}
ref={(textarea) => {this.maximizedTextarea = textarea}} />
</FixedPage>
<section className='section'>
<p className='control'>
<textarea id={this.generatedId} className='textarea'
onChange={linkEvent(this, this.handleMaximizedTextboxClose)}
onKeyDown={linkEvent(this, this.handleOnKeyDown)}
ref={(textarea) => {this.maximizedTextarea = textarea}} />
</p>
</section>
</FixedPage>
</div>
</div>

10
src/components/WordForm.jsx
View File

@ -97,12 +97,12 @@ export class WordForm extends Component {
return (
<div className='form'>
<Input name='Word' idManager={this.props.idManager}
<Input name='Word'
value={nameDefaultValue}
onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
ref={(inputComponent) => this.wordField = inputComponent} />
<Input name='Pronunciation' idManager={this.props.idManager}
<Input name='Pronunciation'
helperLink={{
url: "http://r12a.github.io/pickers/ipa/",
label: "IPA Characters",
@ -112,17 +112,17 @@ export class WordForm extends Component {
onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
ref={(inputComponent) => this.pronunciationField = inputComponent} />
<Dropdown name='Part of Speech' idManager={this.props.idManager}
<Dropdown name='Part of Speech'
optionsList={this.props.partsOfSpeech}
value={partOfSpeechDefaultValue}
ref={(inputComponent) => this.partOfSpeechField = inputComponent} />
<Input name={<div style={{display: 'inline'}}>Definition/<wbr /><b className="wbr"></b>Equivalent Word(s)</div>} idManager={this.props.idManager}
<Input name={<div style={{display: 'inline'}}>Definition/<wbr /><b className="wbr"></b>Equivalent Word(s)</div>}
value={simpleDefinitionDefaultValue}
onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
ref={(inputComponent) => this.simpleDefinitionField = inputComponent} />
<TextArea id='newWordForm' idManager={this.props.idManager}
<TextArea id='newWordForm'
name={<div style={{display: 'inline'}}>Explanation/<wbr /><b className="wbr"></b>Long Definition</div>}
value={longDefinitionDefaultValue}
onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}

2
src/index.html
View File

@ -12,6 +12,6 @@
</head>
<body>
<div id="site"></div>
<script src="dictionaryBuilder.js"></script>
<script src="lexiconga.js"></script>
</body>
</html>

18
src/index.jsx
View File

@ -23,11 +23,14 @@ import {IDManager} from './js/IDManager';
// Declare the values of the default empty dictionary.
const defaultDictionaryName = 'New'
, defaultListTypeName = 'Dictionary'
, defaultDictionaryDescription = 'A new dictionary.'
, defaultDictionaryCreatedBy = 'Someone'
, defaultDictionaryPartsOfSpeech = 'Noun,Adjective,Verb,Adverb,Preposition,Pronoun,Conjunction'
;
, defaultListTypeName = 'Dictionary'
, defaultDictionaryDescription = 'A new dictionary.'
, defaultDictionaryCreatedBy = 'Someone'
, defaultDictionaryPartsOfSpeech = 'Noun,Adjective,Verb,Adverb,Preposition,Pronoun,Conjunction'
;
// Create global IDManager.
window.idManager = window.idManager || new IDManager();
// Create the Lexiconga component just for rendering the whole site.
// class Lexiconga extends React.Component {
@ -38,8 +41,6 @@ class Lexiconga extends Component {
// This could probably be a global constant instead.
this.showConsoleMessages = this.props.showConsoleMessages || false;
this.idManager = new IDManager();
// Put the dictionary details, settings, and words into the state so modifications will affect display.
this.state = {
scroll: {
@ -117,7 +118,7 @@ class Lexiconga extends Component {
, simpleDefinition: wordObject.simpleDefinition || ''
, longDefinition: wordObject.longDefinition || ''
, wordId: this.state.details.nextWordId
}
};
let updatedWords = this.state.words.concat([newWord]);
updatedWords = this.sortWords(updatedWords);
@ -260,7 +261,6 @@ class Lexiconga extends Component {
<div className='box'>
<WordForm
idManager={this.idManager}
partsOfSpeech={this.state.settings.partsOfSpeech}
addWord={(wordObject) => this.addWord(wordObject)}
submitLabel='Add Word' />

22
webpack.config.js
View File

@ -8,7 +8,7 @@ const APP_DIR = path.resolve(__dirname, 'src');
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'dictionaryBuilder.js'
filename: 'lexiconga.js'
},
module: {
loaders: [
@ -40,18 +40,18 @@ const APP_DIR = path.resolve(__dirname, 'src');
resolve: {
extensions: ['', '.js', '.jsx'],
},
// plugins: [
/*plugins: [
// When you're ready to publish, check this article out.
// http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// },
// output: {
// comments: false
// }
// })
// ],
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
}
})
],*/
sassLoader: {
file: './src/sass/styles.scss',
// includePaths: ['./node_modules/bootstrap-sass/assets/'],