.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.json

 {
   "name": "@coscine/component-library",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "main": "./dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -22,7 +22,7 @@
     "dist/*"
   ],
   "dependencies": {
-    "@types/jquery": "^3.5.2",
+    "@types/jquery": "^3.5.3",
     "bootstrap-vue": "^2.17.3",
     "jquery": "^3.5.1",
     "vue": "^2.6.12",
@@ -47,10 +47,10 @@
     "@vue/test-utils": "1.1.0",
     "bili": "^5.0.5",
     "chai": "^4.2.0",
-    "rollup": "^2.29.0",
+    "rollup": "^2.30.0",
     "rollup-plugin-typescript2": "^0.27.3",
     "rollup-plugin-vue": "^5.1.9",
-    "semantic-release": "^17.1.2",
+    "semantic-release": "^17.2.1",
     "typescript": "^4.0.3",
     "vue-template-compiler": "^2.6.12"
   },

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/Loader/LoadingBar.vue

+<template>
+  <div class="loading-indicator"></div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'CoscineLoadingBar',
+  methods: {
+  },
+});
+</script>
+<style>
+.loading-indicator, .loading-indicator:before {
+  height: 3px;
+  width: 100%;
+  margin: 0;
+}
+.loading-indicator {
+  position: relative;
+  height: 3px;
+  display: block;
+  width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 2px;
+  overflow: hidden;
+  background-color: #e9ecef;
+}
+.loading-indicator:before {
+  width: 40%;
+  content:          '';
+  position:         absolute;
+  background-color: #00549f;
+  top:              0;
+  left:             0;
+  bottom:           0;
+  will-change:      left, right;
+  animation:        running-progress 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+.loading-indicator::after {
+  width: 40%;
+  content:          '';
+  position:         absolute;
+  background-color: #00549f;
+  top:              0;
+  left:             0;
+  bottom:           0;
+  will-change:      left, right;
+  animation:        running-progress-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  animation-delay: 1.15s;
+}
+@keyframes running-progress {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@keyframes running-progress-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+</style>
\ No newline at end of file

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