commit: 28ebb8b0ae3bca71a82532297715948a959fbe67
parent 0358284ebf2accf6e0a20ec04e0448437827fadc
Author: Shpuld Shpludson <shp@cock.li>
Date: Fri, 22 Jan 2021 13:21:16 +0000
Merge branch 'fix/convert-more-hyperlinks-to-buttons' into 'develop'
convert more hyperlink buttons to real buttons
See merge request pleroma/pleroma-fe!1333
Diffstat:
6 files changed, 36 insertions(+), 52 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -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
diff --git a/src/App.scss b/src/App.scss
@@ -178,6 +178,13 @@ a {
&.-fullwidth {
width: 100%;
}
+
+ &.-hover-highlight {
+ &:hover svg {
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
+ }
+ }
}
input, textarea, .select, .input {
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
@@ -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 {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -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;
}
}
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
@@ -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;
}
}
}
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
@@ -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">
