Merge branch 'fix/convert-more-hyperlinks-to-buttons' into 'develop'

convert more hyperlink buttons to real buttons

See merge request pleroma/pleroma-fe!1333
This commit is contained in:
Shpuld Shpludson 2021-01-22 13:21:16 +00:00
commit 28ebb8b0ae
6 changed files with 36 additions and 52 deletions

View File

@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased]
### Fixed
- Button to remove uploaded media in post status form is now properly placed and sized.
## [2.2.3] - 2021-01-18

View File

@ -178,6 +178,13 @@ a {
&.-fullwidth {
width: 100%;
}
&.-hover-highlight {
&:hover svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
}
input, textarea, .select, .input {

View File

@ -21,20 +21,17 @@
@keydown.enter.stop.prevent="nextOption(index)"
>
</div>
<div
<button
v-if="options.length > 2"
class="icon-container"
class="delete-option button-unstyled -hover-highlight"
@click="deleteOption(index)"
>
<FAIcon
icon="times"
class="delete"
@click="deleteOption(index)"
/>
</div>
<FAIcon icon="times" />
</button>
</div>
<a
<button
v-if="options.length < maxOptions"
class="add-option faint"
class="add-option faint button-unstyled -hover-highlight"
@click="addOption"
>
<FAIcon
@ -43,7 +40,7 @@
/>
{{ $t("polls.add_option") }}
</a>
</button>
<div class="poll-type-expiry">
<div
class="poll-type"
@ -116,7 +113,6 @@
align-self: flex-start;
padding-top: 0.25em;
padding-left: 0.1em;
cursor: pointer;
}
.poll-option {
@ -135,19 +131,11 @@
}
}
.icon-container {
.delete-option {
// Hack: Move the icon over the input box
width: 1.5em;
margin-left: -1.5em;
z-index: 1;
.delete {
cursor: pointer;
&:hover {
color: inherit;
}
}
}
.poll-type-expiry {

View File

@ -302,11 +302,12 @@
:key="file.url"
class="media-upload-wrapper"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
<button
class="button-unstyled hider"
@click="removeMediaFile(file)"
/>
>
<FAIcon icon="times" />
</button>
<attachment
:attachment="file"
:set-media="() => $store.dispatch('setMedia', newStatus.files)"
@ -516,26 +517,11 @@
}
.attachments .media-upload-wrapper {
padding: 0 0.5em;
position: relative;
.attachment {
margin: 0;
padding: 0;
position: relative;
}
.fa-scale-110 fa-old-padding {
position: absolute;
margin: 10px;
margin: .75em;
padding: .5em;
background: rgba(230,230,230,0.6);
z-index: 2;
color: black;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
font-weight: bold;
cursor: pointer;
}
}

View File

@ -111,16 +111,17 @@
.profile-fields {
display: flex;
&>.emoji-input {
& > .emoji-input {
flex: 1 1 auto;
margin: 0 .2em .5em;
margin: 0 0.2em 0.5em;
min-width: 0;
}
&>.icon-container {
.delete-field {
width: 20px;
align-self: center;
margin: 0 .2em .5em;
margin: 0 0.2em 0.5em;
padding: 0 0.5em;
}
}
}

View File

@ -124,24 +124,24 @@
:placeholder="$t('settings.profile_fields.value')"
>
</EmojiInput>
<div
class="icon-container"
<button
class="delete-field button-unstyled -hover-highlight"
@click="deleteField(i)"
>
<FAIcon
v-show="newFields.length > 1"
icon="times"
@click="deleteField(i)"
/>
</div>
</button>
</div>
<a
<button
v-if="newFields.length < maxFields"
class="add-field faint"
class="add-field faint button-unstyled -hover-highlight"
@click="addField"
>
<FAIcon icon="plus" />
{{ $t("settings.profile_fields.add_field") }}
</a>
</button>
</div>
<p>
<Checkbox v-model="bot">