Ui styling WIP

src/renderer/mixins/ColumnTooltip.vue

@@ -7,38 +7,38 @@ export default {
     externalLink,
     'tooltipColumnName': {
       components: {externalLink},
-      template: `<div id="tooltip-column-name">The
-      <externalLink text="Name" url="http://frictionlessdata.io/specs/table-schema/#name"/> Usually the value of the first row in the column.</div>`
+      template: `<div id="tooltip-column-name">
+      <externalLink text="Name" url="http://frictionlessdata.io/specs/table-schema/#name"/> is usually the value of the first row in the column</div>`
     },
     'tooltipColumnTitle': {
       components: {externalLink},
       template: `<div id="tooltip-column-title">A human readable
-      <externalLink text="Title" url="http://frictionlessdata.io/specs/table-schema/#title"/> for the column.</div>`
+      <externalLink text="Title" url="http://frictionlessdata.io/specs/table-schema/#title"/> for the column</div>`
     },
     'tooltipColumnDescription': {
       components: {externalLink},
       template: `<div id="tooltip-column-description">A
-      <externalLink text="Description" url="http://frictionlessdata.io/specs/table-schema/#description"/> of the column.</div>`
+      <externalLink text="Description" url="http://frictionlessdata.io/specs/table-schema/#description"/> of the column</div>`
     },
     'tooltipColumnType': {
       components: {externalLink},
       template: `<div id="tooltip-column-type">Choose a
-      <externalLink text="Type" url="http://frictionlessdata.io/specs/table-schema/#types-and-formats"/> for the data in the column.</div>`
+      <externalLink text="Type" url="http://frictionlessdata.io/specs/table-schema/#types-and-formats"/> for the data in the column</div>`
     },
     'tooltipColumnFormat': {
       components: {externalLink},
       template: `<div id="tooltip-column-format">Choose the
-      <externalLink text="Format" url="http://frictionlessdata.io/specs/table-schema/#types-and-formats"/> for the Type of data.</div>`
+      <externalLink text="Format" url="http://frictionlessdata.io/specs/table-schema/#types-and-formats"/> for the Type of data</div>`
     },
     'tooltipColumnConstraints': {
       components: {externalLink},
       template: `<div id="tooltip-column-constraints">Set a
-      <externalLink text="Constraint" url="http://frictionlessdata.io/specs/table-schema/#constraints"/> to limit valid values.</div>`
+      <externalLink text="Constraint" url="http://frictionlessdata.io/specs/table-schema/#constraints"/> to limit valid values</div>`
     },
     'tooltipColumnRdfType': {
       components: {externalLink},
       template: `<div id="tooltip-column-rdfType">Set a
-      <externalLink text="RDF Type" url="http://frictionlessdata.io/specs/table-schema/#rich-types"/> to provide extra meaning to the Type.</div>`
+      <externalLink text="RDF Type" url="http://frictionlessdata.io/specs/table-schema/#rich-types"/> to provide extra meaning to the data</div>`
     }
   }
 }

src/renderer/mixins/PackageTooltip.vue

@@ -8,37 +8,31 @@ export default {
     'tooltipPackageName': {
       components: {externalLink},
       template: `<div id="tooltip-package-name">The
-      <externalLink text="Name" url="http://frictionlessdata.io/specs/data-package/#name/> of the Package. Lower case, numbers, ".", "_", "-" characters only.</div>`
+      <externalLink text="Name" url="http://frictionlessdata.io/specs/data-package/#name"/> of this data package. Lower case, numbers, ".", "_", "-" characters only</div>`
     },
     'tooltipPackageId': {
       components: {externalLink},
-      template: `<div id="tooltip-package-id">A globally unique identifier (
-      <externalLink text="Id" url="http://frictionlessdata.io/specs/data-package/#id"/>)</div>`
+      template: `<div id="tooltip-package-id">A globally unique (<externalLink text="identifier" url="http://frictionlessdata.io/specs/data-package/#id"/>) for this data package</div>`
     },
     'tooltipPackageTitle': {
       components: {externalLink},
-      template: `<div id="tooltip-package-title">The
-      <externalLink text="Title" url="http://frictionlessdata.io/specs/data-package/#title"/> or one sentence description for this Package.</div>`
+      template: `<div id="tooltip-package-title">The <externalLink text="Title" url="http://frictionlessdata.io/specs/data-package/#title"/> a one sentence description for this  data package</div>`
     },
     'tooltipPackageDescription': {
       components: {externalLink},
-      template: `<div id="tooltip-package-description">A
-      <externalLink text="Description" url="http://frictionlessdata.io/specs/data-package/#description"/> for the Package.</div>`
+      template: `<div id="tooltip-package-description">A <externalLink text="Description" url="http://frictionlessdata.io/specs/data-package/#description"/> for this data package</div>`
     },
     'tooltipPackageVersion': {
       components: {externalLink},
-      template: `<div id="tooltip-package-version">A
-      <externalLink text="Data Package Version" url="http://frictionlessdata.io/specs/patterns/#data-package-version> follows the Semantic Versioning specification format.</div>`
+      template: `<div id="tooltip-package-version">A <externalLink text="Version" url="http://frictionlessdata.io/specs/patterns/#data-package-version"/> number e.g. 1.0.0</div>`
     },
     'tooltipPackageSources': {
       components: {externalLink},
-      template: `<div id="tooltip-package-sources">Each
-      <externalLink text="Source" url="http://frictionlessdata.io/specs/data-package/#sources"/> MUST have a title and MAY have path and/or email address.</div>`
+      template: `<div id="tooltip-package-sources">Each <externalLink text="Source" url="http://frictionlessdata.io/specs/data-package/#sources"/> must have a title and may have path and/or email</div>`
     },
-    'tooltipPackageLicences': {
+    'tooltipPackageLicenses': {
       components: {externalLink},
-      template: `<div id="tooltip-package-licences">The Open
-      <externalLink text="License" url="http://frictionlessdata.io/specs/data-package/#licenses"/> under which the Package is provided.</div>`
+      template: `<div id="tooltip-package-licenses">The <externalLink text="Open License" url="http://frictionlessdata.io/specs/data-package/#licenses"/> under which this data package is provided</div>`
     }
   }
 }

src/renderer/mixins/ProvenanceTooltip.vue

@@ -8,7 +8,7 @@ export default {
     'tooltipProvenanceDescription': {
       components: {externalLink},
       template: `<div id="tooltip-provenance-description">Use text or markdown to provide provenance information in a
-      <externalLink text="Readme" url="http://frictionlessdata.io/guides/publish/faq/#readme"/> file in the Data Package.</div>`
+      <externalLink text="Readme" url="https://frictionlessdata.io/guides/publish-faq/#readme"/> file in the data package</div>`
     }
   }
 }

src/renderer/mixins/TableTooltip.vue

@@ -8,37 +8,42 @@ export default {
     'tooltipTableName': {
       components: {externalLink},
       template: `<div id="tooltip-table-name">The
-      <externalLink text="Name" url="http://frictionlessdata.io/specs/data-resource/#name"/> of the Table. Lower case, numbers, ".", "_", "-" characters only.</div>`
+      <externalLink text="Name" url="http://frictionlessdata.io/specs/data-resource/#name"/> of the table. Lower case, numbers, ".", "_", "-" characters only</div>`
     },
     'tooltipTableTitle': {
       components: {externalLink},
       template: `<div id="tooltip-table-title">The
-      <externalLink text="Title" url="http://frictionlessdata.io/specs/data-resource/#optional-properties"/> or one sentence description for this Table.</div>`
+      <externalLink text="Title" url="http://frictionlessdata.io/specs/data-resource/#optional-properties"/> or one sentence description for this table</div>`
     },
     'tooltipTableDescription': {
       components: {externalLink},
       template: `<div id="tooltip-table-description">A
-      <externalLink text="Description" url="http://frictionlessdata.io/specs/data-resource/#optional-properties"/> for the Table.</div>`
+      <externalLink text="Description" url="http://frictionlessdata.io/specs/data-resource/#optional-properties"/> for the table</div>`
     },
     'tooltipTableSources': {
       components: {externalLink},
-      template: `<div id="tooltip-table-sources">Each 
-      <externalLink text="Source" url="http://frictionlessdata.io/specs/data-resource/#optional-properties"/> MUST have a title and MAY have path and/or email address.</div>`
+      template: `<div id="tooltip-table-sources">Each
+      <externalLink text="Source" url="http://frictionlessdata.io/specs/data-resource/#optional-properties"/> MUST have a title and MAY have path and/or email address</div>`
     },
     'tooltipTableLicences': {
       components: {externalLink},
-      template: `<div id="tooltip-table-licences">The Open
-      <externalLink text="License" url="http://frictionlessdata.io/specs/data-resource/#optional-properties"/> under which the Table is provided.</div>`
+      template: `<div id="tooltip-table-licences">The
+      <externalLink text="Open License" url="http://frictionlessdata.io/specs/data-resource/#optional-properties"/> under which the data in the table is provided</div>`
     },
     'tooltipTablePrimaryKeys': {
       components: {externalLink},
       template: `<div id="tooltip-table-primary-keys">The
-      <externalLink text="Primary Key" url="http://frictionlessdata.io/specs/table-schema/#primary-key"/> is the field(s) that uniquely identifies each row in the table. Separate values with a comma.</div>`
+      <externalLink text="Primary Key" url="http://frictionlessdata.io/specs/table-schema/#primary-key"/> is the field(s) that uniquely identifies each row in the table.</div>`
+    },
+    'tooltipTableForeignKeys': {
+      components: {externalLink},
+      template: `<div id="tooltip-table-foreign-keys">A
+      <externalLink text="Foreign Key" url="http://frictionlessdata.io/specs/table-schema/#foreign-keys"/> must exist in the referenced table and column(s)</div>`
     },
     'tooltipTableMissingValues': {
       components: {externalLink},
       template: `<div id="tooltip-table-missing-values">Value(s) that indicate a
-      <externalLink text="Missing Value" url="http://frictionlessdata.io/specs/table-schema/#missing-values"/>. Separate values with a comma.</div>`
+      <externalLink text="Missing Value" url="http://frictionlessdata.io/specs/table-schema/#missing-values"/>. Separate values with a comma</div>`
     }
   }
 }

src/renderer/partials/ColumnProperties.vue

@@ -3,22 +3,22 @@
     <div class="form-group-sm row container-fluid">
       <div class="propertyrow" v-for="(formprop, index) in formprops" :key="index">
         <label v-tooltip.left="tooltip(formprop.tooltipId)" class="control-label col-sm-3" :for="formprop.label">
-          {{formprop.label}}{{formprop.isMandatory ? '*' : ''}}:
+          {{formprop.label}}{{formprop.isMandatory ? '*' : ''}}
         </label>
         <component :is="formprop.tooltipView"/>
         <template v-if="typeof formprop.type && formprop.type === 'dropdown'">
-          <select v-if="formprop.label==='type'" :value="getTypeProperty" v-model="typeProperty" @input="setTypeProperty($event.target.value)" :id="formprop.label" class="form-control input-sm col-sm-9">
+          <select v-if="formprop.key==='type'" :value="getTypeProperty" v-model="typeProperty" @input="setTypeProperty($event.target.value)" :id="formprop.key" class="form-control input-sm col-sm-9">
             <option v-for="option1 in typeValues" :key="option1" v-bind:value="option1">
               {{ option1}}
             </option>
           </select>
-          <select v-if="formprop.label==='format'" v-model="selectFormat" id="format" :disabled="isDropdownFormatDisabled" class="form-control input-sm col-sm-9">
+          <select v-if="formprop.key==='format'" v-model="selectFormat" id="format" :disabled="isDropdownFormatDisabled" class="form-control input-sm col-sm-9">
             <option v-for="option2 in formatValues" :key="option2" v-bind:value="option2">
               {{ option2}}
             </option>
           </select>
         </template>
-        <div v-else-if="formprop.label === 'constraints'" id="constraints" class="col-sm-9">
+        <div v-else-if="formprop.key === 'constraints'" id="constraints" class="col-sm-9">
           <div class="input-group row" v-for="option in constraintValues" :key="option">
             <input type="checkbox" :id="option" :checked="getConstraintCheck(option)" @click="setConstraintCheck(option, $event.target)"></input>
             <label :for="option" class="form-control-static">{{option}}</label>
@@ -30,8 +30,8 @@
             </div>
           </div>
         </div>
-        <input v-else-if="formprop.label === 'name'" :disabled="formprop.isDisabled" :value="getNameProperty" @input="setProperty(formprop.label, $event.target.value)" type="text" class="form-control label-sm col-sm-9" :id="formprop.label" />
-        <input v-else :disabled="formprop.isDisabled" :value="getProperty(formprop.label)" @input="setProperty(formprop.label, $event.target.value)" type="text" class="form-control label-sm col-sm-9" :id="formprop.label" />
+        <input v-else-if="formprop.key === 'name'" :disabled="formprop.isDisabled" :value="getNameProperty" @input="setProperty(formprop.label, $event.target.value)" type="text" class="form-control label-sm col-sm-9" :id="formprop.key" />
+        <input v-else :disabled="formprop.isDisabled" :value="getProperty(formprop.key)" @input="setProperty(formprop.key, $event.target.value)" type="text" class="form-control label-sm col-sm-9" :id="formprop.key" />
       </div>
     </div>
   </div>
@@ -72,48 +72,55 @@ export default {
       typeProperty: '',
       constraintInputKeyValues: {},
       allTablesAllColumnsNames: {},
-      // TODO: setup args so clear for constaints only
+      // TODO: setup args so clear for constraints only
       debounceSetConstraints: _.debounce(this.pushColumnProperty, 300, {
         'leading': true,
         'trailing': false
       }),
       formprops: [{
-        label: 'name',
+        label: 'Name',
+        key: 'name',
         tooltipId: 'tooltip-column-name',
         tooltipView: 'tooltipColumnName',
         isDisabled: true,
         isMandatory: true
       },
       {
-        label: 'title',
+        label: 'Title',
+        key: 'title',
         tooltipId: 'tooltip-column-title',
         tooltipView: 'tooltipColumnTitle'
       },
       {
-        label: 'description',
+        label: 'Description',
+        key: 'description',
         tooltipId: 'tooltip-column-description',
         tooltipView: 'tooltipColumnDescription'
       },
       {
-        label: 'type',
+        label: 'Type',
+        key: 'type',
         tooltipId: 'tooltip-column-type',
         tooltipView: 'tooltipColumnType',
         type: 'dropdown'
       },
       {
-        label: 'format',
+        label: 'Format',
+        key: 'format',
         tooltipId: 'tooltip-column-format',
         tooltipView: 'tooltipColumnFormat',
         type: 'dropdown'
       },
       {
-        label: 'constraints',
+        label: 'Constraints',
+        key: 'constraints',
         tooltipId: 'tooltip-column-constraints',
         tooltipView: 'tooltipColumnConstraints',
         type: 'checkbox'
       },
       {
-        label: 'rdfType',
+        label: 'RDF Type',
+        key: 'rdfType',
         tooltipId: 'tooltip-column-rdfType',
         tooltipView: 'tooltipColumnRdfType',
         type: 'url'

src/renderer/partials/ForeignKeys.vue

@@ -12,7 +12,7 @@
   </div>
   <div class="button-container">
     <button type="button" class="add-foreign btn btn-primary btn-sm" @click="addForeignKey()">
-      <span class="glyphicon glyphicon-plus"/>Add Foreign Key
+      <span class="glyphicon glyphicon-plus"/>Add Column
     </button>
   </div>
 </div>

src/renderer/partials/PackageProperties.vue

@@ -2,12 +2,13 @@
 <form class="navbar-form form-horizontal" id="packageProperties">
   <div class="form-group-sm row container-fluid">
     <div class="propertyrow" v-for="(formprop, index) in formprops" :key="index">
-      <label class="control-label col-sm-3" :for="formprop.label">{{formprop.label}}{{formprop.isMandatory ? '*' : ''}}:</label>
-      <component v-if="isSharedComponent(formprop.label)" :getProperty="getProperty" :getPropertyGivenHotId="getPropertyGivenHotId" :setProperty="setProperty" :waitForHotIdFromTabId="waitForHotIdFromTabId" :is="formprop.label"/>
-      <!-- <input v-else type="text" class="form-control input-sm col-sm-9" :id="formprop.label" :value="getProperty(formprop.label)" @input="setProperty(formprop.label, $event.target.value)"/> -->
-      <input v-else type="text" class="{ 'form-control input-sm col-sm-9': true, 'validate-danger': errors.has(formprop.label) }" :id="formprop.label" :value="getProperty(formprop.label)" @input="setProperty(formprop.label, $event.target.value)" v-validate="validationRules(formprop.label)" :name="formprop.label"/>
-      <div v-show="errors.has(formprop.label) && removeProperty(formprop.label)" class="row help validate-danger">
-        {{ errors.first(formprop.label)}}
+      <label v-tooltip.left="tooltip(formprop.tooltipId)" class="control-label col-sm-3" :for="formprop.label">{{formprop.label}}{{formprop.isMandatory ? '*' : ''}}</label>
+      <component :is="formprop.tooltipView"/>
+      <component v-if="isSharedComponent(formprop.key)" :propertyName="formprop.key" :getProperty="getProperty" :getPropertyGivenHotId="getPropertyGivenHotId" :setProperty="setProperty" :waitForHotIdFromTabId="waitForHotIdFromTabId" :currentHotId="currentHotId" :is="formprop.key"/>
+      <!-- <input v-else type="text" class="form-control input-sm col-sm-9" :id="formprop.key" :value="getProperty(formprop.key)" @input="setProperty(formprop.key, $event.target.value)"/> -->
+      <input v-else type="text" class="{ 'form-control input-sm col-sm-9': true, 'validate-danger': errors.has(formprop.key) }" :id="formprop.key" :value="getProperty(formprop.key)" @input="setProperty(formprop.key, $event.target.value)" v-validate="validationRules(formprop.key)" :name="formprop.key"/>
+      <div v-show="errors.has(formprop.key) && removeProperty(formprop.key)" class="row help validate-danger">
+        {{ errors.first(formprop.key)}}
       </div>
     </div>
   </div>
@@ -35,45 +36,52 @@ export default {
   data() {
     return {
       formprops: [{
-        label: 'name',
+        label: 'Name',
+        key: 'name',
         type: 'input',
         isMandatory: true,
         tooltipId: 'tooltip-package-name',
         tooltipView: 'tooltipPackageName'
       },
       {
-        label: 'id',
+        label: 'Id',
+        key: 'id',
         type: 'input',
         tooltipId: 'tooltip-package-id',
         tooltipView: 'tooltipPackageId'
       },
       {
-        label: 'title',
+        label: 'Title',
+        key: 'title',
         type: 'input',
         tooltipId: 'tooltip-package-title',
         tooltipView: 'tooltipPackageTitle'
       },
       {
-        label: 'description',
+        label: 'Description',
+        key: 'description',
         type: 'markdown',
         tooltipId: 'tooltip-package-description',
         tooltipView: 'tooltipPackageDescription'
       },
         // lead user through with http://frictionlessdata.io/specs/patterns/#data-package-version
       {
-        label: 'version',
+        label: 'Version',
+        key: 'version',
         type: 'input',
         tooltipId: 'tooltip-package-version',
         tooltipView: 'tooltipPackageVersion'
       },
       {
-        label: 'sources',
+        label: 'Source(s)',
+        key: 'sources',
         type: 'dropdown',
         tooltipId: 'tooltip-package-sources',
         tooltipView: 'tooltipPackageSources'
       },
       {
-        label: 'licenses',
+        label: 'License(s)',
+        key: 'licenses',
         tooltipId: 'tooltip-package-licenses',
         tooltipView: 'tooltipPackageLicenses'
       }