more form changes

pencilblue · Feb 21, 2017 · f8b707e · f8b707e
1 parent 8a79791
commit f8b707e
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 12 deletions.
diff --git a/plugins/admin/public/css/admin.css b/plugins/admin/public/css/admin.css
@@ -5036,18 +5036,41 @@ a:hover {
       .modal .modal-content .modal-footer .btn-secondary {
         margin-left: 0.25rem; }
 
-form .form-group {
+.form-group {
   margin-bottom: 0.5rem; }
-  form .form-group label {
+  .form-group label {
     margin-bottom: 0.25rem; }
-  form .form-group .form-control {
-    border-radius: 0.125rem !important;
+  .form-group .form-control {
+    border-radius: 0.125rem;
     border: none;
-    padding: 0.375rem 0.75rem;
+    padding: 0.375rem 0.5rem;
     color: #55595C; }
-
-form .btn-secondary {
-  margin-left: 0.25rem; }
+  .form-group select.form-control {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none; }
+  .form-group select.form-control:not([size]):not([multiple]) {
+    height: auto; }
+  .form-group .input-group .input-group-addon {
+    padding: 0 0.5rem;
+    border: none; }
+  .form-group .input-group .input-group-addon:first-child {
+    border-bottom-left-radius: 0.125rem;
+    border-top-left-radius: 0.125rem; }
+  .form-group .input-group .input-group-addon:last-child {
+    border-bottom-right-radius: 0.125rem;
+    border-top-right-radius: 0.125rem; }
+  .form-group .input-group .input-group-btn > .btn {
+    padding: 0.375rem 0.5rem;
+    border-left: 1px solid #026981; }
+  .form-group .input-group .form-control:not(:first-child) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0; }
+  .form-group .input-group .form-control:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0; }
+  .form-group .btn-group .btn {
+    padding: 0.375rem 0.75rem; }
 
 .table-container {
   background: white;

diff --git a/plugins/admin/public/jsx/components/content/article_form.jsx b/plugins/admin/public/jsx/components/content/article_form.jsx
@@ -29,6 +29,7 @@ class ArticleForm extends React.Component {
 
     this.handleValueChange = this.handleValueChange.bind(this);
     this.setDraft = this.setDraft.bind(this);
+    this.setAllowComments = this.setAllowComments.bind(this);
     this.saveArticle = this.saveArticle.bind(this);
   }
 
@@ -83,6 +84,13 @@ class ArticleForm extends React.Component {
     this.setState(newState);
   }
 
+  setAllowComments(event) {
+    let newState = JSON.parse(JSON.stringify(this.state));
+    newState.article.allow_comments = event.target.value === 'true' ? true : false;
+
+    this.setState(newState);
+  }
+
   /**
    * Adds or updates the article with the API.
    *
@@ -130,8 +138,10 @@ class ArticleForm extends React.Component {
 
     let self = this;
     let articleName = itemId ? loc.generic.EDIT + ' ' + this.state.article.originalName : loc.articles.NEW_ARTICLE;
-    let draftClasses = 'btn btn-sm btn-secondary ' + (this.state.article.draft ? 'active' : '');
-    let publishClasses = 'btn btn-sm btn-secondary ' + (!this.state.article.draft ? 'active' : '');
+    let draftClasses = 'btn btn-secondary ' + (this.state.article.draft ? 'active' : '');
+    let publishClasses = 'btn btn-secondary ' + (!this.state.article.draft ? 'active' : '');
+    let allowCommentsClasses = 'btn btn-secondary ' + (this.state.article.allow_comments ? 'active' : '');
+    let noCommentsClasses = 'btn btn-secondary ' + (!this.state.article.allow_comments ? 'active' : '');
 
     return (
       <div>
@@ -141,6 +151,37 @@ class ArticleForm extends React.Component {
             <label htmlFor="headline">{loc.articles.HEADLINE}</label>
             <input type="text" className="form-control" id="headline" value={this.state.article.headline} onChange={this.handleValueChange} required></input>
           </div>
+          <div className="form-group">
+            <label htmlFor="subheading">{loc.articles.SUBHEADING}</label>
+            <input type="text" className="form-control" id="subheading" value={this.state.article.subheading} onChange={this.handleValueChange} required></input>
+          </div>
+          <div className="form-group">
+            <label htmlFor="url">{loc.articles.ARTICLE_URL}</label>
+            <div className="input-group">
+              <span className="input-group-addon">/article/</span>
+              <input type="url" className="form-control" id="url" value={this.state.article.url} onChange={this.handleValueChange} required></input>
+              <span className="input-group-btn">
+                <button className="btn btn-secondary" type="button">{loc.users.GENERATE}</button>
+              </span>
+              <span className="input-group-btn">
+                <button className="btn btn-secondary" type="button">{loc.generic.CHECK}</button>
+              </span>
+            </div>
+          </div>
+          <div className="form-group">
+            <label htmlFor="template">{loc.articles.STANDALONE_TEMPLATE}</label>
+            <select className="form-control" id="template" onChange={this.handleValueChange} required>
+              <option value="1">This is an option</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label htmlFor="allow_comments">{loc.articles.ALLOW_COMMENTS}</label>
+            <br/>
+            <div className="btn-group">
+              <button type="button" className={allowCommentsClasses} value="true" onClick={self.setAllowComments}>{loc.generic.YES}</button>
+              <button type="button" className={noCommentsClasses} value="false" onClick={self.setAllowComments}>{loc.generic.NO}</button>
+            </div>
+          </div>
           <div className="form-group">
             <label htmlFor="draft">{loc.articles.DRAFT}</label>
             <br/>

diff --git a/plugins/admin/sass/forms.scss b/plugins/admin/sass/forms.scss
@@ -6,9 +6,57 @@
   }
 
   .form-control {
-    border-radius: 0.125rem !important;
+    border-radius: 0.125rem;
     border: none;
-    padding: 0.375rem 0.75rem;
+    padding: 0.375rem 0.5rem;
     color: $dark-gray;
   }
+
+  select.form-control {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+
+  select.form-control:not([size]):not([multiple]) {
+    height: auto;
+  }
+
+  .input-group {
+    .input-group-addon {
+      padding: 0 0.5rem;
+      border: none;
+    }
+
+    .input-group-addon:first-child {
+      border-bottom-left-radius: 0.125rem;
+      border-top-left-radius: 0.125rem;
+    }
+
+    .input-group-addon:last-child {
+      border-bottom-right-radius: 0.125rem;
+      border-top-right-radius: 0.125rem;
+    }
+
+    .input-group-btn > .btn {
+      padding: 0.375rem 0.5rem;
+      border-left: 1px solid $bg-blue;
+    }
+
+    .form-control:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    .form-control:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
+  .btn-group {
+    .btn {
+      padding: 0.375rem 0.75rem;
+    }
+  }
 }