diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index d23737440e28ff2eb51599c354c834e75cfade61..37da8e767eaaccf8e7814f1adf1dc3a1009b8810 100644 --- a/.gitlab-ci.yml +++ b/.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 diff --git a/package-lock.json b/package-lock.json index 237fc45f63fd1224085a5c2da0b63ca0452c3725..66fb833f683761adcaab243346f5692f31d123e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@coscine/component-library", - "version": "1.1.0", + "version": "1.1.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/components/Buttons/Delete.vue b/src/components/Buttons/Delete.vue index 848aa7c91333811d96767fb9bbd360ecce0b81a3..3155353db482faa5d8c07313c12426fdfbdcdc21 100644 --- a/src/components/Buttons/Delete.vue +++ b/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; diff --git a/src/components/InputFields/Textarea.vue b/src/components/InputFields/Textarea.vue new file mode 100644 index 0000000000000000000000000000000000000000..305419301d6256e282fd5c1306c1c755f1d11ea2 --- /dev/null +++ b/src/components/InputFields/Textarea.vue @@ -0,0 +1,79 @@ +<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> diff --git a/src/components/Page/Footer.vue b/src/components/Page/Footer.vue new file mode 100644 index 0000000000000000000000000000000000000000..04a087dce3a9dc1f65eb15241066045b3f6eee89 --- /dev/null +++ b/src/components/Page/Footer.vue @@ -0,0 +1,65 @@ +<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> diff --git a/src/components/Page/Header.vue b/src/components/Page/Header.vue new file mode 100644 index 0000000000000000000000000000000000000000..4ee034cfd9ee6cf7f8c76dc5d489da702ea3ecb0 --- /dev/null +++ b/src/components/Page/Header.vue @@ -0,0 +1,113 @@ +<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> diff --git a/src/index.ts b/src/index.ts index fda92bd84695e51659691ee0d2d8acc5b434258e..35cc3642a0471805b816829fd07b3b7035a8ebc3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,9 @@ -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'; diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts index d4ef003a9ff66239e120ac231268a19a7c061900..b65d836fbe0052a84eaa8b5b789e3aa46f05ff55 100644 --- a/src/shims-vue.d.ts +++ b/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