Suggestion for displaying link url bar.

[Domvel]

Hold on, do not close it as duplicate. I know there are some tickets of this topic. But this is a kind different. It's a appearance solution for the hyperlink url bar at the bottom.

That's the current appearance and a really annoying problem. Because you cannot see if someone is wrting and it's just overlay the ui.

That's my suggestion. Just pad the bottom for exact 25px. That's the height of the url bar at the bottom.

I think this is a very quick solution and will fix the issue as desired. I know, in another issue the sidebar links (a-tags) are replaced to buttons. But this isn't the topic of this ticket. It's descripes all links. Also user posted links. It's really annoying, because the mouse will always hover a link accidentally.

Desktop Version: 3.7.1 (latest at this moment) (Btw. when is a update planned? With the a-tag in button fix?)

[jasonblais]

Thoughts @yuya-oc? Seems like a simple fix but I'm not sure if this is feasible in the Electron framework.

// cc @amyblais

[Domvel]

Just CSS padding-bottom: 25px for the top html element wrapper?! And background to theme color (blue). It's pure css (and if required html).

It's a kind of status bar for this application with html, css. If padding is not possible, it may work with a new div-element at the bottom representating the status bar.

[yuya-oc]

I never thought until now. Probably we need to consider about appearance though, the idea looks not bad.

[jasonblais]

I've touched base with our designers to hear their thoughts.

[Domvel]

Ok, great. This is a preview of the whole window. Maybe not the prettiest solution. But effective. Btw. this "padding" should only affect for the desktop app (electron). And maybe, this can be a option in an appearance section in the settings of the app. If people are not completely convinced. Whatever ... Just a suggestion.

// Btw. The padding in this demo is 26px at the bottom. (+1px as suggested before) To add a border line. (zoom this image 😄 )

Hack the DOM. With the developer-tools (Menu-Strip > View > Toggle Developer Tools) I added following to the DOM. I know this is not the source solution. But I have no idea how to change the sources and cannot access the shadow-root objects. At this moment I have no idea where and how to change this in the mattermost project. It's just for demonstration. A hack with fixed values. So please do not flame! :D

// Folling attributes are added or modified to the existing attributes. (relative)

.mattermostView {
  bottom: 26px;
  box-shadow: 0 1px 0 0 #23648f;
}

body {
  background-color: #2071a7;
}

Or make the background black or let it white. Or some other styles.

Btw. another idea: Add a property in the settings of the application to let the user inject css styles (like above). But stored and loaded after app restart. Maybe this is also possible in mattermost themes.

[jasonblais]

@Domvel This issue should be resolved for Mattermost Servers v4.4 and later, where none of the internal links show the URL on hover.

[Domvel]

@jasonblais This is not exactly the reason of this issue. This is a suggestion how to display the url-bar. Regardless of the show-internal-link issue. And btw. the internal-link-issue is not fixed 100% server side. For example: Hover the timestamp of a message. But anyway. As long as the url bar is displayed, this ticket suggest the way how to display. (also for user posted links). ... I'll accept a rejection. But I want to make sure that you understood my request. :)

[jasonblais]

Thanks @Domvel! And yeah, understood the request - the concern at the moment for me is the appearance/style.

And thanks for the heads up on having a URL when hovering the timestamp! This is a bug, and have filed a ticket here: https://mattermost.atlassian.net/browse/MM-9922