mirror of https://github.com/nextcloud/server
add new button component
Signed-off-by: Vanessa Pertsch <vanessa.pertsch@nextcloud.com> Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
This commit is contained in:
parent
b40481e8e5
commit
779e38e6a6
|
@ -1,78 +0,0 @@
|
|||
<!--
|
||||
- @copyright 2021, Christopher Ng <chrng8@gmail.com>
|
||||
-
|
||||
- @author Christopher Ng <chrng8@gmail.com>
|
||||
-
|
||||
- @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>
|
||||
<button :disabled="disabled"
|
||||
v-on="$listeners">
|
||||
<span class="icon icon-add" />
|
||||
{{ t('settings', 'Add') }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AddButton',
|
||||
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
button {
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
.icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
opacity: 0.4 !important;
|
||||
|
||||
.icon {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: rgba(127, 127, 127, .15);
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: rgba(127, 127, 127, .25);
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -35,25 +35,32 @@
|
|||
</template>
|
||||
|
||||
<template v-if="isEditable && isMultiValueSupported">
|
||||
<AddButton class="add-button"
|
||||
<Button type="tertiary"
|
||||
:disabled="!isValidSection"
|
||||
@click.stop.prevent="onAddAdditional" />
|
||||
:aria-label="t('settings', 'Add additional email')"
|
||||
@click.stop.prevent="onAddAdditional">
|
||||
<template #icon>
|
||||
<Plus :size="20" />
|
||||
</template>
|
||||
{{ t('settings', 'Add') }}
|
||||
</Button>
|
||||
</template>
|
||||
</h3>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddButton from './AddButton'
|
||||
import FederationControl from './FederationControl'
|
||||
|
||||
import Button from '@nextcloud/vue/dist/Components/Button'
|
||||
import Plus from 'vue-material-design-icons/Plus'
|
||||
import { ACCOUNT_PROPERTY_READABLE_ENUM, ACCOUNT_SETTING_PROPERTY_READABLE_ENUM, PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
|
||||
|
||||
export default {
|
||||
name: 'HeaderBar',
|
||||
|
||||
components: {
|
||||
AddButton,
|
||||
FederationControl,
|
||||
Button,
|
||||
Plus,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
@ -137,7 +144,7 @@ export default {
|
|||
margin: -12px 0 0 8px;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
margin: -12px 0 0 auto !important;
|
||||
.button-vue {
|
||||
margin: -6px 0 0 auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue