Alamantus/Lexiconga
1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-11-04 10:17:01 +01:00
Code Issues Releases Activity

Bulma styling changes

Browse source
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/ php/google/
node_modules/ node_modules/
public/ 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. // Always give the Button a 'clickable' class and then add any others.
processClasses() { processClasses() {
var classes = 'button is-small'; var classes = 'button';
if (this.props.classes) { if (this.props.classes) {
classes += ' ' + this.props.classes; classes += ' ' + this.props.classes;

2
src/components/Checkbox.jsx
View file

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

35
src/components/Dropdown.jsx
View file

@ -40,20 +40,31 @@ export class Dropdown extends Input {
render() { render() {
return ( return (
<label className='control'> <div className='control'>
<div className='level'>
<span className='label level-item'> <div className='level is-marginless'>
{this.props.name}
</span> <div className='level-item'>
<span className='level-item'> <label className='label' for={this.generatedId}>
{this.props.name}
</label>
</div>
<div className='level-item'>
{this.showHelperLink()} {this.showHelperLink()}
</span> </div>
</div> </div>
<select value={this.state.value} onChange={this.handleOnChange} disabled={(this.state.isDisabled) ? 'disabled' : null}>
<option value=" "></option> <p className='control'>
{this.parseOptions(this.props.optionsList)} <span className='select'>
</select> <select value=' ' onChange={this.handleOnChange} disabled={(this.state.isDisabled) ? 'disabled' : null}>
</label> <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> <h2>Edit Dictionary</h2>
<div className='settings-column'> <div className='columns'>
<Input name='Dictionary Name' <div className='column'>
value={this.props.details.name}
ref={(inputComponent) => this.nameField = inputComponent} />
<TextArea name='Dictionary Details' <Input name='Dictionary Name'
value={this.props.details.description} value={this.props.details.name}
ref={(inputComponent) => this.descriptionField = inputComponent} /> ref={(inputComponent) => this.nameField = inputComponent} />
<Input name='Parts of Speech' <TextArea name='Dictionary Details'
value={this.props.settings.partsOfSpeech} value={this.props.details.description}
ref={(inputComponent) => this.partsOfSpeechField = inputComponent} /> ref={(inputComponent) => this.descriptionField = inputComponent} />
<Input name='Classification' <Input name='Parts of Speech'
value={this.props.details.listTypeName} value={this.props.settings.partsOfSpeech}
helperLink={{ ref={(inputComponent) => this.partsOfSpeechField = inputComponent} />
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='Allow Duplicates' <Input name='Classification'
value={this.props.settings.allowDuplicates} value={this.props.details.listTypeName}
ref={(inputComponent) => this.allowDuplicatesField = inputComponent} /> 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' <Checkbox name='Allow Duplicates'
value={this.props.settings.caseSensitive} value={this.props.settings.allowDuplicates}
ref={(inputComponent) => this.caseSensitiveField = inputComponent} /> ref={(inputComponent) => this.allowDuplicatesField = inputComponent} />
<Checkbox name='Sort by Definition' <Checkbox name='Case-Sensitive'
value={this.props.settings.sortByEquivalent} value={this.props.settings.caseSensitive}
ref={(inputComponent) => this.sortByEquivalentField = inputComponent} /> ref={(inputComponent) => this.caseSensitiveField = inputComponent} />
<Checkbox name='Dictionary Is Complete' <Checkbox name='Sort by Definition'
value={this.props.settings.isComplete} value={this.props.settings.sortByEquivalent}
ref={(inputComponent) => this.isCompleteField = inputComponent} /> ref={(inputComponent) => this.sortByEquivalentField = inputComponent} />
<Checkbox name='Dictionary Is Public' <Checkbox name='Dictionary Is Complete'
value={this.props.settings.isPublic} value={this.props.settings.isComplete}
ref={(inputComponent) => this.isPublicField = inputComponent} /> ref={(inputComponent) => this.isCompleteField = inputComponent} />
<Checkbox name='Dictionary Is Public'
value={this.props.settings.isPublic}
ref={(inputComponent) => this.isPublicField = inputComponent} />
</div>
</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='modal-background' onClick={this.hide}></div>
<div className={contentClass}> <div className={contentClass}>
<div className='box'>
<Button classes='modal-close' <Button classes='modal-close'
action={this.hide} action={this.hide}
label='Close' /> label='Close' />
{this.props.children} {this.props.children}
</div>
</div> </div>
</div> </div>

8
src/components/Input.jsx
View file

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

28
src/components/TextArea.jsx
View file

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

10
src/components/WordForm.jsx
View file

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

2
src/index.html
View file

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

18
src/index.jsx
View file

@ -23,11 +23,14 @@ import {IDManager} from './js/IDManager';
// Declare the values of the default empty dictionary. // Declare the values of the default empty dictionary.
const defaultDictionaryName = 'New' const defaultDictionaryName = 'New'
, defaultListTypeName = 'Dictionary' , defaultListTypeName = 'Dictionary'
, defaultDictionaryDescription = 'A new dictionary.' , defaultDictionaryDescription = 'A new dictionary.'
, defaultDictionaryCreatedBy = 'Someone' , defaultDictionaryCreatedBy = 'Someone'
, defaultDictionaryPartsOfSpeech = 'Noun,Adjective,Verb,Adverb,Preposition,Pronoun,Conjunction' , 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. // Create the Lexiconga component just for rendering the whole site.
// class Lexiconga extends React.Component { // class Lexiconga extends React.Component {
@ -38,8 +41,6 @@ class Lexiconga extends Component {
// This could probably be a global constant instead. // This could probably be a global constant instead.
this.showConsoleMessages = this.props.showConsoleMessages || false; 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. // Put the dictionary details, settings, and words into the state so modifications will affect display.
this.state = { this.state = {
scroll: { scroll: {
@ -117,7 +118,7 @@ class Lexiconga extends Component {
, simpleDefinition: wordObject.simpleDefinition || '' , simpleDefinition: wordObject.simpleDefinition || ''
, longDefinition: wordObject.longDefinition || '' , longDefinition: wordObject.longDefinition || ''
, wordId: this.state.details.nextWordId , wordId: this.state.details.nextWordId
} };
let updatedWords = this.state.words.concat([newWord]); let updatedWords = this.state.words.concat([newWord]);
updatedWords = this.sortWords(updatedWords); updatedWords = this.sortWords(updatedWords);
@ -260,7 +261,6 @@ class Lexiconga extends Component {
<div className='box'> <div className='box'>
<WordForm <WordForm
idManager={this.idManager}
partsOfSpeech={this.state.settings.partsOfSpeech} partsOfSpeech={this.state.settings.partsOfSpeech}
addWord={(wordObject) => this.addWord(wordObject)} addWord={(wordObject) => this.addWord(wordObject)}
submitLabel='Add Word' /> 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', entry: APP_DIR + '/index.jsx',
output: { output: {
path: BUILD_DIR, path: BUILD_DIR,
filename: 'dictionaryBuilder.js' filename: 'lexiconga.js'
}, },
module: { module: {
loaders: [ loaders: [
@ -40,18 +40,18 @@ const APP_DIR = path.resolve(__dirname, 'src');
resolve: { resolve: {
extensions: ['', '.js', '.jsx'], extensions: ['', '.js', '.jsx'],
}, },
// plugins: [ /*plugins: [
// When you're ready to publish, check this article out. // When you're ready to publish, check this article out.
// http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/ // http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/
// new webpack.optimize.UglifyJsPlugin({ new webpack.optimize.UglifyJsPlugin({
// compress: { compress: {
// warnings: false warnings: false
// }, },
// output: { output: {
// comments: false comments: false
// } }
// }) })
// ], ],*/
sassLoader: { sassLoader: {
file: './src/sass/styles.scss', file: './src/sass/styles.scss',
// includePaths: ['./node_modules/bootstrap-sass/assets/'], // includePaths: ['./node_modules/bootstrap-sass/assets/'],