New: Created component for header/footer (coscine/issues#1061)

.gitlab-ci.yml

@@ -14,6 +14,7 @@ test:
     - npm test
   except:
     refs:
+      - master
       - tags
     variables:
       - $GITLAB_USER_ID == $GIT_BOT_USER_ID
@@ -22,6 +23,7 @@ publish:
   stage: publish
   script:
     - npm run build
+    - npm test
     - npx semantic-release
   only:
     - master

package-lock.json

 {
   "name": "@coscine/component-library",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/components/Buttons/Delete.vue

@@ -24,7 +24,6 @@ export default Vue.extend({
 </script>
 <style scoped>
 .coscine_delete:hover {
-  /*background-color: #9b0517; */
   background-color: #cc071e;
   border-color: #8e0515;
   color: #ffffff;

src/components/InputFields/Textarea.vue

+<template>
+  <div>
+    <b-form-textarea
+      :id="id"
+      v-model="content"
+      :aria-describedby="ariaDescribedby"
+      :state="state"
+      :placeholder="placeholder"
+      :maxlength="limit"
+      :required="required"
+      @input="handleInput"
+    />
+    <span id="characterCounter">{{
+      (this.content != null ? this.content.toString().length : 0) + '/' + this.limit + ' ' + this.character
+    }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import BootstrapVue from 'bootstrap-vue';
+Vue.use(BootstrapVue);
+
+export default Vue.extend({
+  data() {
+    return {
+      content: this.value,
+    };
+  },
+  watch: {
+    value: function(newVal, oldVal) {
+      this.content = newVal;
+    },
+  },
+  props: {
+    character: {
+      default: null,
+      type: String,
+    },
+    limit: {
+      default: 5000,
+      type: Number,
+    },
+    id: {
+      default: null,
+      type: String,
+    },
+    value: {
+      default: null,
+      type: String,
+    },
+    ariaDescribedby: {
+      default: null,
+      type: String,
+    },
+    placeholder: {
+      default: null,
+      type: String,
+    },
+    required: {
+      default: null,
+      type: Boolean,
+    },
+    state: {},
+  },
+  methods: {
+    handleInput(e: any) {
+      this.$emit('input', this.content);
+    },
+  },
+});
+</script>
+<style scoped>
+#characterCounter {
+  position: absolute;
+  bottom: 0px;
+  right: 15px;
+}
+</style>

src/components/Page/Footer.vue

+<template>
+  <footer id="footer">
+    <div class="row container">
+      <div id="servicecol" class="col-xs-12 col-sm-6">
+        <div class="list-group">
+          <h2>Service</h2>
+          <a
+            href="https://help.itc.rwth-aachen.de/service/7ab6210773b04ef28a1a8cb33628be67"
+            class="list-group-item list-group-item-action"
+            >{{ help }}</a
+          >
+          <a
+            href="https://git.rwth-aachen.de/coscine/terms/-/blob/master/PrivacyPolicy.md"
+            class="list-group-item list-group-item-action"
+            >{{ disclaimer }}</a
+          >
+          <a
+            href="http://www.itc.rwth-aachen.de/cms/IT-Center/Footer/Service/~epvv/Impressum/"
+            class="list-group-item list-group-item-action"
+            >{{ imprint }}</a
+          >
+        </div>
+      </div>
+      <div id="contactcol" class="col-xs-12 col-sm-6">
+        <div id="contact-list" class="list-group">
+          <h2 id="footerContact">{{ contact }}</h2>
+          <a id="mail" href="mailto:servicedesk@itc.rwth-aachen.de" class="list-group-item list-group-item-action">
+            servicedesk@itc.rwth-aachen.de
+          </a>
+          <span id="phone" class="list-group-item">
+            +49 241 / 80-24680
+          </span>
+          <span id="fax" class="list-group-item">
+            +49 241 / 80-22981
+          </span>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    help: {
+      default: 'help',
+      type: String,
+    },
+    disclaimer: {
+      default: 'disclaimer',
+      type: String,
+    },
+    imprint: {
+      default: 'imprint',
+      type: String,
+    },
+    contact: {
+      default: 'contact',
+      type: String,
+    },
+  },
+};
+</script>
+
+<style scoped></style>

src/components/Page/Header.vue

+<template>    
+  <header id="header">
+    <nav id="nav-global" class="navbar rwth-black navbar-dark navbar-expand-md">
+      <div class="app-header-container">
+        <div id="DeltaSiteLogo">
+          <a id="ctl00_onetidProjectPropertyTitleGraphic" title="Team Site" class="ms-siteicon-a" href="/">
+            <img id="ctl00_onetidHeadbnnr2" class="ms-siteicon-img" name="onetidHeadbnnr0" :src="rwthImage" alt="RWTH Aachen University" data-themekey="#">
+          </a>
+        </div>      
+      </div>                        
+      <div id="DeltaCoScInESiteLogo">
+        <a id="ctl00_SPSimpleSiteLink1" title="Team Site" class="ms-siteicon-a coscineSiteIcon" href="/">
+          <img id="ctl00_SiteLogoImage1" class="ms-siteicon-img" name="onetidHeadbnnr0" :src="coscineImageBlack" alt="Coscine" data-themekey="#">
+        </a>
+        <span class="coscineSiteIconLabel">CoScInE</span>        
+      </div>
+      <ul id="nav-langsearch" class="navbar-nav ml-auto">
+        <li id="langToggle" class="next-lang" tabindex="0" aria-label="toggle language">
+          <a class="nav-link lang" href="#" id="Lang" v-on:click="changeLocale()">
+            <span id="langBox" class="language-box">{{ this.locale === 'en' ? 'de' : 'en' }}</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </header>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+  name: 'CoscineHeader',
+  props: {
+      rwthImage: String,
+      coscineImageBlack: String,
+      locale: {
+        default: 'en',
+        type: String,
+      },
+  },
+  methods: {
+    changeLocale() {
+      if (this.locale === 'en') {
+        this.$set(this, 'locale', 'de');
+      } else {
+        this.$set(this, 'locale', 'en');
+      }
+      this.$emit('changeLocale');
+    },
+  },
+});
+</script>
+
+<style scoped>
+
+</style>
+
+<style>
+#header {
+  width: 100%;
+}
+#header .navbar {
+  max-width: 100%;
+}
+
+.navbar .lang {
+  padding-top: .5rem!important;
+}
+
+.siteIcon {
+  height: 0px;
+  width: 0px;
+  overflow: visible;
+  margin-left: 150px;
+  line-height: 0px;
+  margin-top: -20px;
+}
+
+.coscineSiteIcon {
+  height: 0px;
+  width: 0px;
+  overflow: visible;
+  line-height: 0px;        
+}
+
+.coscineSiteIcon img {
+  margin-left: 8px;
+  height: 36px;
+  width: 36px;
+}
+
+.coscineSiteIcon img {
+  margin-left: 8px;
+  height: 36px;
+  width: 36px;
+}
+
+.coscineSiteIconLabel {
+  margin-left: 8px;
+  vertical-align: middle;
+  color: white;
+  font-size: 22px;
+}
+
+.navbar .app-header-container a img.ms-siteicon-img {
+  border: 0px;
+}
+
+.headline {
+  text-align: left;
+  padding-left: 0.4em;
+  margin-bottom: 1em;
+}
+</style>

src/index.ts

-export { default as CoscineLoadingSpinner } from './components/Loader/LoadingSpinner.vue';
-export { default as CoscineFormGroup } from './components/FormGroup/FormGroup.vue';
 export { default as CoscineCard } from './components/Container/Card.vue';
+export { default as CoscineButtonDelete } from './components/Buttons/Delete.vue';
+export { default as CoscineFormGroup } from './components/FormGroup/FormGroup.vue';
+export { default as CoscineFormTextarea } from './components/InputFields/Textarea.vue';
 export { default as CoscineHeadline } from './components/Headline/Headline.vue';
-export { default as CoscineDelete } from './components/Buttons/Delete.vue';
 export { default as CoscineLoadingBar } from './components/Loader/LoadingBar.vue';
+export { default as CoscineLoadingSpinner } from './components/Loader/LoadingSpinner.vue';
+export { default as CoscinePageFooter } from './components/Page/Footer.vue';
+export { default as CoscinePageHeader } from './components/Page/Header.vue';

src/shims-vue.d.ts

@@ -5,3 +5,9 @@ declare module '*.vue' {
 
 declare module '@coscine/api-connection';
 declare module 'vue-loading-overlay';
+
+declare module '*.svg' {
+  import Vue, {VueConstructor} from 'vue';
+  const content: VueConstructor<Vue>;
+  export default content;
+}
\ No newline at end of file