Mirrors
/
nextcloud-spreed
mirror of https://github.com/nextcloud/spreed
3
0
Fork 0
Code Releases Activity
Browse Source

Create AdvancedInput component 

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
pull/2185/head
Marco Ambrosini 6 years ago
parent
07994a7dbc
commit
ee0e380528
17 changed files with 199 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      css/icons.scss
  2. 1
      css/merged-files.scss
  3. 1
      css/merged-share-auth.scss
  4. 1
      css/merged.scss
  5. 9
      img/bell-outline.svg
  6. 9
      img/clip-add-file.svg
  7. 9
      img/emoji-smile.svg
  8. 5
      package-lock.json
  9. 1
      package.json
  10. 10
      src/App.vue
  11. 81
      src/components/AdvancedInput/AdvancedInput.vue
  12. 10
      src/components/Message/Message.vue
  13. 48
      src/components/MessageList/MessageList.vue
  14. 33
      src/components/NewMessageForm/NewMessageForm.vue
  15. 26
      src/components/NewRoomForm/NewRoomForm.vue
  16. 2
      src/main.js
  17. 1
      templates/index.php

10
css/icons.scss
View File

@ -1 +1,9 @@
@include icon-black-white('reply', 'spreed', 1);
@include icon-black-white('reply', 'spreed', 1);
@include icon-black-white('clip-add-file', 'spreed', 1);
@include icon-black-white('menu-people', 'spreed', 1);
@include icon-black-white('no-password', 'spreed', 1);
@include icon-black-white('share-window', 'spreed', 1);
@include icon-black-white('clip-add-file', 'spreed', 1);
@include icon-black-white('bell-outline', 'spreed', 1);
@include icon-black-white('emoji-smile', 'spreed', 1);

1
css/merged-files.scss
View File

@ -2,3 +2,4 @@
@import 'chatview.scss';
@import 'autocomplete.scss';
@import 'video.scss';
@import 'icons.scss';

1
css/merged-share-auth.scss
View File

@ -3,3 +3,4 @@
@import 'chatview.scss';
@import 'autocomplete.scss';
@import 'video.scss';
@import 'icons.scss';

1
css/merged.scss
View File

@ -2,3 +2,4 @@
@import 'chatview.scss';
@import 'autocomplete.scss';
@import 'video.scss';
@import 'icons.scss';

9
img/bell-outline.svg
View File

@ -0,0 +1,9 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.154 10.508L13.05 9.325V7.566C13.05 5.367 11.783 3.448 9.854 2.653C9.751 1.725 8.959 1 8 1C7.042 1 6.25 1.724 6.146 2.652C4.217 3.447 2.95 5.367 2.95 7.566V9.324L1.846 10.508C1.385 11.002 1.385 11.805 1.846 12.294C2.078 12.545 2.391 12.683 2.726 12.683H5.613C5.613 12.6871 5.61193 12.6907 5.6109 12.6942C5.60994 12.6975 5.609 12.7006 5.609 12.704C5.608 13.97 6.691 15 8.022 15C9.312 15 10.37 14.032 10.434 12.819C10.437 12.781 10.439 12.743 10.439 12.704C10.439 12.6999 10.4379 12.6963 10.4369 12.6928C10.4359 12.6895 10.435 12.6864 10.435 12.683H13.276C13.315 12.683 13.354 12.679 13.392 12.672C13.544 12.641 13.924 12.542 14.153 12.297C14.615 11.805 14.616 11.002 14.154 10.508ZM8.022 13.802C7.343 13.802 6.791 13.31 6.791 12.704H9.255C9.255 13.31 8.703 13.802 8.022 13.802ZM2.704 11.471L13.207 11.485C13.26 11.47 13.314 11.45 13.336 11.437C13.3341 11.4367 13.3327 11.4294 13.3306 11.4184C13.3261 11.3951 13.3184 11.3555 13.296 11.331L12.03 9.976C11.927 9.865 11.869 9.717 11.869 9.565V7.566C11.869 5.738 10.747 4.163 9.079 3.644C8.792 3.555 8.616 3.261 8.671 2.962C8.67174 2.95784 8.67248 2.95369 8.67323 2.94953C8.67861 2.91967 8.684 2.88972 8.684 2.859C8.684 2.494 8.377 2.198 8 2.198C7.623 2.198 7.317 2.494 7.317 2.859C7.317 2.89152 7.32271 2.92159 7.32824 2.95069C7.32883 2.9538 7.32942 2.95691 7.33 2.96C7.385 3.259 7.209 3.553 6.923 3.643C5.254 4.161 4.133 5.738 4.133 7.566V9.564C4.133 9.716 4.075 9.864 3.971 9.975L2.705 11.331C2.672 11.367 2.671 11.437 2.704 11.471Z" fill="#7F7F7F"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.154 10.508L13.05 9.325V7.566C13.05 5.367 11.783 3.448 9.854 2.653C9.751 1.725 8.959 1 8 1C7.042 1 6.25 1.724 6.146 2.652C4.217 3.447 2.95 5.367 2.95 7.566V9.324L1.846 10.508C1.385 11.002 1.385 11.805 1.846 12.294C2.078 12.545 2.391 12.683 2.726 12.683H5.613C5.613 12.6871 5.61193 12.6907 5.6109 12.6942C5.60994 12.6975 5.609 12.7006 5.609 12.704C5.608 13.97 6.691 15 8.022 15C9.312 15 10.37 14.032 10.434 12.819C10.437 12.781 10.439 12.743 10.439 12.704C10.439 12.6999 10.4379 12.6963 10.4369 12.6928C10.4359 12.6895 10.435 12.6864 10.435 12.683H13.276C13.315 12.683 13.354 12.679 13.392 12.672C13.544 12.641 13.924 12.542 14.153 12.297C14.615 11.805 14.616 11.002 14.154 10.508ZM8.022 13.802C7.343 13.802 6.791 13.31 6.791 12.704H9.255C9.255 13.31 8.703 13.802 8.022 13.802ZM2.704 11.471L13.207 11.485C13.26 11.47 13.314 11.45 13.336 11.437C13.3341 11.4367 13.3327 11.4294 13.3306 11.4184C13.3261 11.3951 13.3184 11.3555 13.296 11.331L12.03 9.976C11.927 9.865 11.869 9.717 11.869 9.565V7.566C11.869 5.738 10.747 4.163 9.079 3.644C8.792 3.555 8.616 3.261 8.671 2.962C8.67174 2.95784 8.67248 2.95369 8.67323 2.94953C8.67861 2.91967 8.684 2.88972 8.684 2.859C8.684 2.494 8.377 2.198 8 2.198C7.623 2.198 7.317 2.494 7.317 2.859C7.317 2.89152 7.32271 2.92159 7.32824 2.95069C7.32883 2.9538 7.32942 2.95691 7.33 2.96C7.385 3.259 7.209 3.553 6.923 3.643C5.254 4.161 4.133 5.738 4.133 7.566V9.564C4.133 9.716 4.075 9.864 3.971 9.975L2.705 11.331C2.672 11.367 2.671 11.437 2.704 11.471Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
<rect width="16" height="16" fill="#7F7F7F"/>
</g>
</svg>

9
img/clip-add-file.svg
View File

@ -0,0 +1,9 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9626 8.45815L14.0572 7.5876C14.0068 7.54001 13.9257 7.54001 13.8762 7.5876L8.14315 13.0997C6.86221 14.3313 4.77823 14.3313 3.49643 13.0997C2.21549 11.8682 2.21549 9.86449 3.49643 8.63291L9.83286 2.54069C10.6154 1.78829 11.887 1.78829 12.6687 2.54069C13.4512 3.29227 13.4512 4.51482 12.6687 5.26722L6.52085 11.1773C6.23838 11.4497 5.7784 11.4497 5.49507 11.1773C5.2126 10.9057 5.21346 10.4643 5.49593 10.1919L11.0404 4.86189C11.0908 4.8143 11.0899 4.73553 11.0396 4.68712L10.135 3.81739C10.0838 3.76898 10.0035 3.76898 9.95405 3.81739L4.40956 9.14737C3.52801 9.99495 3.52801 11.375 4.40956 12.2226C5.29111 13.0702 6.72652 13.0702 7.60807 12.2226L13.7559 6.31254C15.1358 4.98496 15.1358 2.82376 13.7559 1.49701C12.3743 0.167799 10.1273 0.167799 8.7465 1.49619L2.41006 7.5876C0.530041 9.39598 0.530894 12.3375 2.41006 14.1442C4.29009 15.9518 7.35035 15.9518 9.22952 14.145L14.9626 8.63291C15.013 8.58451 15.013 8.50656 14.9626 8.45815Z" fill="white"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="15" height="16">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9626 8.45815L14.0572 7.5876C14.0068 7.54001 13.9257 7.54001 13.8762 7.5876L8.14315 13.0997C6.86221 14.3313 4.77823 14.3313 3.49643 13.0997C2.21549 11.8682 2.21549 9.86449 3.49643 8.63291L9.83286 2.54069C10.6154 1.78829 11.887 1.78829 12.6687 2.54069C13.4512 3.29227 13.4512 4.51482 12.6687 5.26722L6.52085 11.1773C6.23838 11.4497 5.7784 11.4497 5.49507 11.1773C5.2126 10.9057 5.21346 10.4643 5.49593 10.1919L11.0404 4.86189C11.0908 4.8143 11.0899 4.73553 11.0396 4.68712L10.135 3.81739C10.0838 3.76898 10.0035 3.76898 9.95405 3.81739L4.40956 9.14737C3.52801 9.99495 3.52801 11.375 4.40956 12.2226C5.29111 13.0702 6.72652 13.0702 7.60807 12.2226L13.7559 6.31254C15.1358 4.98496 15.1358 2.82376 13.7559 1.49701C12.3743 0.167799 10.1273 0.167799 8.7465 1.49619L2.41006 7.5876C0.530041 9.39598 0.530894 12.3375 2.41006 14.1442C4.29009 15.9518 7.35035 15.9518 9.22952 14.145L14.9626 8.63291C15.013 8.58451 15.013 8.50656 14.9626 8.45815Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
<rect opacity="0.5" width="16" height="16" fill="black"/>
</g>
</svg>

9
img/emoji-smile.svg
View File

@ -0,0 +1,9 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99999 0.800003C4.02999 0.800003 0.799988 4.03 0.799988 8C0.799988 11.97 4.02999 15.2 7.99999 15.2C11.97 15.2 15.2 11.971 15.2 8C15.2 4.029 11.97 0.800003 7.99999 0.800003ZM7.99999 14C4.68599 14 1.99999 11.314 1.99999 8C1.99999 4.686 4.68599 2 7.99999 2C11.313 2 14 4.686 14 8C14 11.314 11.313 14 7.99999 14ZM6.99999 5.8C6.99999 6.35229 6.55227 6.8 5.99999 6.8C5.4477 6.8 4.99999 6.35229 4.99999 5.8C4.99999 5.24772 5.4477 4.8 5.99999 4.8C6.55227 4.8 6.99999 5.24772 6.99999 5.8ZM11.001 5.8C11.001 6.35229 10.5533 6.8 10.001 6.8C9.4487 6.8 9.00099 6.35229 9.00099 5.8C9.00099 5.24772 9.4487 4.8 10.001 4.8C10.5533 4.8 11.001 5.24772 11.001 5.8ZM11.75 7.6C11.391 7.6 11.1 7.891 11.1 8.25C11.1 9.821 9.70899 11.1 7.99999 11.1C6.29099 11.1 4.89999 9.822 4.89999 8.25C4.89999 7.891 4.60899 7.6 4.24999 7.6C3.89099 7.6 3.59999 7.891 3.59999 8.25C3.59999 10.538 5.57399 12.4 7.99999 12.4C10.426 12.4 12.401 10.538 12.401 8.25C12.4 7.891 12.109 7.6 11.75 7.6Z" fill="white"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99999 0.800003C4.02999 0.800003 0.799988 4.03 0.799988 8C0.799988 11.97 4.02999 15.2 7.99999 15.2C11.97 15.2 15.2 11.971 15.2 8C15.2 4.029 11.97 0.800003 7.99999 0.800003ZM7.99999 14C4.68599 14 1.99999 11.314 1.99999 8C1.99999 4.686 4.68599 2 7.99999 2C11.313 2 14 4.686 14 8C14 11.314 11.313 14 7.99999 14ZM6.99999 5.8C6.99999 6.35229 6.55227 6.8 5.99999 6.8C5.4477 6.8 4.99999 6.35229 4.99999 5.8C4.99999 5.24772 5.4477 4.8 5.99999 4.8C6.55227 4.8 6.99999 5.24772 6.99999 5.8ZM11.001 5.8C11.001 6.35229 10.5533 6.8 10.001 6.8C9.4487 6.8 9.00099 6.35229 9.00099 5.8C9.00099 5.24772 9.4487 4.8 10.001 4.8C10.5533 4.8 11.001 5.24772 11.001 5.8ZM11.75 7.6C11.391 7.6 11.1 7.891 11.1 8.25C11.1 9.821 9.70899 11.1 7.99999 11.1C6.29099 11.1 4.89999 9.822 4.89999 8.25C4.89999 7.891 4.60899 7.6 4.24999 7.6C3.89099 7.6 3.59999 7.891 3.59999 8.25C3.59999 10.538 5.57399 12.4 7.99999 12.4C10.426 12.4 12.401 10.538 12.401 8.25C12.4 7.891 12.109 7.6 11.75 7.6Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
<rect opacity="0.5" width="16" height="16" fill="black"/>
</g>
</svg>

5
package-lock.json
View File

@ -10283,6 +10283,11 @@
"resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.0.7.tgz",
"integrity": "sha1-zdKxYF48SUR4TheU6uShKg9wC9Y="
},
"vue-contenteditable-directive": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/vue-contenteditable-directive/-/vue-contenteditable-directive-1.2.0.tgz",
"integrity": "sha512-9RuW1cboQBOUhURXiQpBD8XldyK2BYWhkWTnRw4Qmv8ZeQy+tGnnPs4XfemoPNf4KQW31Mx6UqEszlZYgoPeYw=="
},
"vue-eslint-parser": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",

1
package.json
View File

@ -35,6 +35,7 @@
"dependencies": {
"nextcloud-vue": "^0.12.3",
"vue": "^2.6.10",
"vue-contenteditable-directive": "^1.2.0",
"vue-virtual-scroller": "^1.0.0-rc.2"
},
"browserslist": [

10
src/App.vue
View File

@ -62,10 +62,8 @@
<!--<button @click="show = !show">
Toggle sidebar
</button>-->
<div :windowHeight="windowHeight" class="messages-wrapper" :style="{ height: windowHeight+'px' }">
<MessageList />
<NewMessageForm />
</div>
<MessageList />
<NewMessageForm />
</AppContent>
<AppSidebar v-show="show" title="christmas-image-2018-12-25-00:01:12.jpg" subtitle="4,3 MB, last edited 41 days ago"
:actions="menu" :starred.sync="starred"
@ -231,8 +229,4 @@ export default {
</script>
<style lang="scss" scoped>
.messages-wrapper {
display: flex;
flex-direction: column;
}
</style>

81
src/components/AdvancedInput/AdvancedInput.vue
View File

@ -0,0 +1,81 @@
<!--
- @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
-
- @author Marco Ambrosini <marcoambrosini@pm.me>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<div v-contenteditable:text="active"
class="new-message-form__input"
@input="onInput" />
</template>
<script>
export default {
name: 'AdvancedInput',
props: {
placeholderText: {
type: String,
default: 'Type something'
},
activeInput: {
type: Boolean,
default: true
},
value: {
type: String,
required: true
}
},
watch: {
value: {
immediate: true,
handler: (newValue) => {
this.text = newValue
}
}
},
data: function() {
return {
active: true,
text: ''
}
},
methods: {
onInput(event) {
this.updateValue()
},
onBlur() {
return 0
},
updateValue() {
this.$emit('input', this.text)
}
}
}
</script>
<style lang="scss" scoped>
//Support for the placehoder text in the div contenteditable
[contenteditable]:empty:before{
content: attr(placeholder);
display: block;
color: gray;
}
</style>

10
src/components/Message/Message.vue
View File

@ -22,6 +22,7 @@
<template>
<div
class="wrapper"
:class="{ 'hover': hover }"
@mouseover="hover=true"
@mouseleave="hover=false">
<div class="message">
@ -32,7 +33,10 @@
<div class="message-right">
<h6>{{ messageTime }}</h6>
<Actions v-if="hover" class="actions">
<ActionButton icon="icon-folder" @click="alert('Edit')">
<ActionButton icon="icon-reply" @click="alert('Edit')">
Reply
</ActionButton>
<ActionButton icon="icon-reply" @click="alert('Edit')">
Reply
</ActionButton>
</Actions>
@ -112,4 +116,8 @@ export default {
}
}
.hover {
background-color: rgba(0, 131, 201, 0.05);
}
</style>

48
src/components/MessageList/MessageList.vue
View File

@ -56,30 +56,6 @@ export default {
Message,
MessageBody
},
computed: {
messagesArray() {
return new Array(200).fill(0).map((x, id) => {
return {
messageText: 'Whatever',
messageTime: '14:30',
id,
userName: 'Skjnldsv',
isFirstMessage: true
}
})
},
messages() {
const messages = {}
this.messagesArray.forEach(message => {
messages[message.id] = message
})
return messages
},
messagesOldArray() {
return Object.values(this.messagesOld)
}
},
data: function() {
return {
messagesOld: {
@ -179,6 +155,30 @@ export default {
}
}
}
},
computed: {
messagesArray() {
return new Array(200).fill(0).map((x, id) => {
return {
messageText: 'Whatever',
messageTime: '14:30',
id,
userName: 'Skjnldsv',
isFirstMessage: true
}
})
},
messages() {
const messages = {}
this.messagesArray.forEach(message => {
messages[message.id] = message
})
return messages
},
messagesOldArray() {
return Object.values(this.messagesOld)
}
}
}
</script>

33
src/components/NewMessageForm/NewMessageForm.vue
View File

@ -22,42 +22,53 @@
<template>
<div class="new-message">
<form class="new-message-form">
<button class="new-message-form-button-attachfile" />
<button class="new-message-form-button-attachfile" />
<input v-model="message">
<button class="new-message-form-button-attachfile" />
<button type="submit" class="new-message-form-button-attachfile" />
<button class="new-message-form__button icon-clip-add-file" />
<button class="new-message-form__button icon-emoji-smile" />
<AdvancedInput v-model="text" />
<button class="new-message-form__button icon-bell-outline" />
<button type="submit" class="new-message-form__button--submit icon-folder" />
</form>
</div>
</template>
<script>
import AdvancedInput from '../AdvancedInput/AdvancedInput'
export default {
name: 'NewMessageForm',
components: {
AdvancedInput
},
data: function() {
return {
message: ''
text: ''
}
}
}
</script>
<style lang="scss" scoped>
.new-message {
height: 60px;
border-top: 1px solid lightgray;
position: sticky;
position: -webkit-sticky;
width: 100%;
bottom: 0;
padding: 5px;
background-color: white;
&-form {
display: flex;
align-items: center;
& input {
&__input {
flex-grow: 1;
border:none;
}
}
&__button {
width: 44px;
height: 44px;
margin: auto;
background-color: transparent;
border: none;
}
}
}
</style>

26
src/components/NewRoomForm/NewRoomForm.vue
View File

@ -20,25 +20,25 @@
-->
<template>
<div class="NewRoomForm">
<Multiselect />
<AppNavigationNew />
</div>
<div class="NewRoomForm">
<Multiselect />
<AppNavigationNew />
</div>
</template>
<script>
import AppNavigationNew from 'nextcloud-vue/dist/Components/AppNavigationNew'
import Multiselect from 'nextcloud-vue/dist/Components/Multiselect'
export default {
name: 'NewMessageForm',
components: {
AppNavigationNew,
Multiselect
}
}
export default {
name: 'NewRoomForm',
components: {
AppNavigationNew,
Multiselect
}
}
</script>
<style lang="scss" scoped>
</style>
</style>

2
src/main.js
View File

@ -21,11 +21,13 @@
*/
import Vue from 'vue'
import App from './App'
import contenteditableDirective from 'vue-contenteditable-directive'
Vue.prototype.t = t
Vue.prototype.n = n
Vue.prototype.OC = OC
Vue.prototype.OCA = OCA
Vue.use(contenteditableDirective)
export default new Vue({
el: '#content',

1
templates/index.php
View File

@ -4,5 +4,6 @@
script('spreed', 'talk');
style('spreed', 'merged');
\OC::$server->getEventDispatcher()->dispatch('\OCP\Collaboration\Resources::loadAdditionalScripts');
?>
Write Preview
Loading…
Cancel
Save