aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/color_input/color_input.scss32
-rw-r--r--src/components/color_input/color_input.vue50
-rw-r--r--src/components/conversation/conversation.js7
-rw-r--r--src/components/conversation/conversation.vue21
-rw-r--r--src/components/popover/popover.vue2
-rw-r--r--src/components/rich_content/rich_content.scss5
-rw-r--r--src/components/shout_panel/shout_panel.vue8
-rw-r--r--src/components/tab_switcher/tab_switcher.scss1
-rw-r--r--src/components/user_card/user_card.scss5
-rw-r--r--src/components/user_profile/user_profile.vue2
10 files changed, 100 insertions, 33 deletions
diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index d446951c..b0fc879f 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -9,6 +9,7 @@
padding: 0.2em 8px;
input {
+ color: var(--text);
background: none;
border: none;
padding: 0;
@@ -19,21 +20,38 @@
min-width: 3em;
padding: 0;
}
+ }
+
+ .nativeColor {
+ cursor: pointer;
+ flex: 0 0 auto;
- &.nativeColor {
- flex: 0 0 2em;
- min-width: 2em;
- align-self: stretch;
- min-height: 100%;
+ input {
+ appearance: none;
+ max-width: 0;
+ min-width: 0;
+ max-height: 0;
+ /* stylelint-disable-next-line declaration-no-important */
+ opacity: 0 !important;
}
}
.computedIndicator,
+ .validIndicator,
+ .invalidIndicator,
.transparentIndicator {
flex: 0 0 2em;
+ margin: 0 0.5em;
min-width: 2em;
align-self: stretch;
- min-height: 100%;
+ min-height: 1.5em;
+ border-radius: var(--roundness);
+ }
+
+ .invalidIndicator {
+ background: transparent;
+ box-sizing: border-box;
+ border: 2px solid var(--cRed);
}
.transparentIndicator {
@@ -54,11 +72,13 @@
&::after {
top: 0;
left: 0;
+ border-top-left-radius: var(--roundness);
}
&::before {
bottom: 0;
right: 0;
+ border-bottom-right-radius: var(--roundness);
}
}
}
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index dfc084f9..66ee9d53 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -25,30 +25,51 @@
:disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)"
>
- <input
+ <div
v-if="validColor"
- :id="name"
- class="nativeColor unstyled"
- type="color"
- :value="modelValue || fallback"
- :disabled="!present || disabled"
- @input="$emit('update:modelValue', $event.target.value)"
- >
+ class="validIndicator"
+ :style="{backgroundColor: modelValue || fallback}"
+ />
<div
- v-if="transparentColor"
+ v-else-if="transparentColor"
class="transparentIndicator"
/>
<div
- v-if="computedColor"
+ v-else-if="computedColor"
class="computedIndicator"
:style="{backgroundColor: fallback}"
/>
+ <div
+ v-else
+ class="invalidIndicator"
+ />
+ <label class="nativeColor">
+ <FAIcon icon="eye-dropper" />
+ <input
+ :id="name"
+ class="unstyled"
+ type="color"
+ :value="modelValue || fallback"
+ :disabled="!present || disabled"
+ @input="$emit('update:modelValue', $event.target.value)"
+ >
+ </label>
</div>
</div>
</template>
<script>
import Checkbox from '../checkbox/checkbox.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faEyeDropper
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faEyeDropper
+)
+
export default {
components: {
Checkbox
@@ -108,12 +129,3 @@ export default {
}
</script>
<style lang="scss" src="./color_input.scss"></style>
-
-<style lang="scss">
-.color-control {
- input.text-input {
- max-width: 7em;
- flex: 1;
- }
-}
-</style>
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 85e6d8ad..a94d2130 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -56,7 +56,8 @@ const conversation = {
expanded: false,
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
statusContentPropertiesObject: {},
- inlineDivePosition: null
+ inlineDivePosition: null,
+ loadStatusError: null
}
},
props: [
@@ -392,11 +393,15 @@ const conversation = {
this.setHighlight(this.originalStatusId)
})
} else {
+ this.loadStatusError = null
this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
.then((status) => {
this.$store.dispatch('addNewStatuses', { statuses: [status] })
this.fetchConversation()
})
+ .catch((error) => {
+ this.loadStatusError = error
+ })
}
},
getReplies (id) {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index ae7ae359..526de5c3 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -29,6 +29,23 @@
/>
</div>
<div
+ v-if="isPage && !status"
+ class="conversation-body"
+ :class="{ 'panel-body': isExpanded }"
+ >
+ <p v-if="!loadStatusError">
+ <FAIcon
+ spin
+ icon="circle-notch"
+ />
+ {{ $t('status.loading') }}
+ </p>
+ <p v-else>
+ {{ $t('status.load_error', { error: loadStatusError }) }}
+ </p>
+ </div>
+ <div
+ v-else
class="conversation-body"
:class="{ 'panel-body': isExpanded }"
>
@@ -81,7 +98,7 @@
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
- class="conversation-status status-fadein"
+ class="conversation-status status-fadein panel-body"
:simple-tree="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay"
@@ -186,7 +203,7 @@
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
- class="conversation-status status-fadein"
+ class="conversation-status status-fadein panel-body"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 0cc0949c..0c5b372e 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -71,6 +71,7 @@
border-color: var(--border);
border-style: solid;
border-width: 1px;
+ background-color: var(--background);
}
.dropdown-menu {
@@ -82,6 +83,7 @@
max-width: 100vw;
z-index: var(--ZI_popover_override, var(--ZI_popovers));
white-space: nowrap;
+ background-color: var(--background);
.dropdown-divider {
height: 0;
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 962fd5bb..118b6acf 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -83,3 +83,8 @@
color: var(--funtextCyantext);
}
}
+
+a .RichContent {
+ /* stylelint-disable-next-line declaration-no-important */
+ color: var(--link) !important;
+}
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index 62cc9568..9113211e 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -5,7 +5,7 @@
>
<div class="panel panel-default">
<div
- class="panel-heading timeline-heading"
+ class="panel-heading"
:class="{ 'shout-heading': floating }"
@click.stop.prevent="togglePanel"
>
@@ -18,7 +18,7 @@
/>
</div>
</div>
- <div class="shout-window">
+ <div class="panel-body shout-window">
<div
v-for="message in messages"
:key="message.id"
@@ -41,10 +41,10 @@
</div>
</div>
</div>
- <div class="shout-input">
+ <div class="panel-body shout-input">
<textarea
v-model="currentMessage"
- class="shout-input-textarea"
+ class="shout-input-textarea input"
rows="1"
@keyup.enter="submit(currentMessage)"
/>
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 1efe1b04..4e242b91 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -174,6 +174,7 @@
font-size: 1em;
font-family: var(--font);
border-radius: var(--roundness);
+ background-color: var(--background);
position: relative;
white-space: nowrap;
padding: 6px 1em;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 90daaf7d..70a76d54 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -204,6 +204,11 @@
--emoji-size: 1.7em;
+ .RichContent {
+ /* stylelint-disable-next-line declaration-no-important */
+ --link: var(--text) !important;
+ }
+
.top-line,
.bottom-line {
display: flex;
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 921c87ea..1ec12d0c 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -127,7 +127,7 @@
:title="$t('user_card.favorites')"
timeline-name="favorites"
:timeline="favorites"
- :user-id="userId"
+ :user-id="isUs ? undefined : userId"
:in-profile="true"
:footer-slipgate="footerRef"
/>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 11:48:06 +0000