Create a custom Session Bar App

Ignition Early Access
1

Hi
The ignition session bar app has very nice animation and effective way to display more info in very compact way.
I’d like to benefit of that design concept in my project. Is it possible to create it with currently available component and tools in perspective?
If no, it’s nice to have a new component for it.

2

While there is no drop-in Component to place your own “App Bar” (that’s what we refer to it as), you could make something very similar with the existing components.

In essence, you would want the following pieces (Easy and Sustainable method):
A Docked View which is always Visible.
This Docked View would have a Component which has a click event (Button is common, but you could use a simple Icon).
The Click Event would open a Popup X pixels from the bottom, where X is the height of the Popup View plus the height of the Docked View.
The Popup should not show the close button, should not be draggable, should not be resizable, and SHOULD be a modal, and SHOULD be background dismissible.

Now, that solution locks you into having a Docked View visible at all times, which may not be desirable. You can get the same functionality from placing a button/icon with the prescribed click event in every View, but it would need to be placed in every View you use. IF you go this route, I recommend placing the Button in a very small View, and placing an Embedded View into each View, so that you only need to customize the Button in one place for any changes to take effect.

1 Like
3

Thanks. By the way do you have any plan to add such component in future? Or able to customize the current one by dding additional information?

4

Not to my knowledge. As far as I know, outside of logging in and out the App Bar is primarily there for diagnostic use and support reference; so it’s already doing everything it needs to do.

5

Is it possible to achieve an effect similar to the app bar, to have e.g. an icon that is always in the same position and on the top of the view context. Which is most noticeable when it comes to the slider page. I was trying to achieve it with position: sticky but without results. One more question, is it possible to achieve transparent background ?

Thanks!

6

background-color: transparent Done. Note, however, that you can do this to components and containers, but it will not be applied to Docked View containers or Popup containers.

As for the rest of your question, I’m not really sure what it is you’re asking.

There is only one way right now ways to overlay components in Perspective:

  1. Coordinate Container layout, and you manage the z-indexing of the components. You control the positioning and z-index, so overlay is easy.
7

Transparent background, I was thinking of Popup containers.
Rest of the question, as an app bar icon (handler), it’s always on top (when we’re scrolling the view, the context of the page is behind the app bar). Ok, I can see from your answer that it can’t be achieved.

Thank you very much!

8

you can achieve it by viewcanvas or css3 left, top, command with x,y set to auto in xy coordinate

9

What’s the timeline on Perspective supporting transparent popup backgrounds?
:see_no_evil::hear_no_evil::speak_no_evil:

2 Likes
10

Yes please!

2 Likes
11

You can do this currently with adjustments to the theme file, and in conjunction with the View being used in the popup.

You need to do two things:

  1. The root of the View should have props.styles.backgroundColor set to a value of transparent.
  2. locate the themes directory of your Perspective module and locate themes/light/app/popup.css. You’ll want to modify an entry in this file (or overwrite in your own custom theme).

You want to change this entry:

.ia_popup {
    background-color: var(--container);
    box-shadow: var(--boxShadow5);
    border: var(--containerBorder);
}

To this:

.ia_popup {
    background-color: transparent;
    box-shadow: var(--boxShadow5);
    border: var(--containerBorder);
}

With these settings in place, I was able to render the following popup:
Screen Shot 2021-02-15 at 2.10.24PM

4 Likes
12

Could you please guide me how to change the color of title bar of a popup?
Specially I need following manipulation of title bar:
Font size, color and type
Height size
Background

13

Applying these settings allowed for me to modify the appearance of my Popup header, but you’ll need to be careful; my use of hard-coded pixel values can result in situations where the popup looks bad, because the desktop appearance could be fine, but maybe a mobile user finds the header too big.

.ia_popup__header {
    background-color: var(--div-10);
    color: var(--neutral-90);
    border-bottom: var(--containerBorder);
    font-size: 0.875rem;
}

.ia_popup_header .close-icon .material-icons{
	width: 20px;
	height: 20px;
}

.popup-header {
	height: 60px;
	font-family: monospace;
	font-weight: "bold";
}

The Popup header is one spot where the early iterations of Perspective did not expect users to change the appearance, and so it looks like we have some hard-coded positional settings in place. The close icon, for example, is always set to be 0.5rem from the top and right of the popup header. To implement any sort of relative positioning you’ll need to include a rule to override the close icon settings and apply your own (not these values, but something similar):

.close-icon {
    top: 1%;
    right: 1%;
}
1 Like
14

In popup \light\app\popup.css I only find .ia_popup__header and .ia_popup classes, so how should I know anything about .close-icon .material-icons or .popup-header?

It is nice if you document all these hidden classes in a separate help file in the theme directory or create a theme section in the online help resource.

15

This is something you would only know about by inspecting the popup in a browser session. Documentation wouldn’t be the worst idea, but could also be very dangerous. anyone modifying ONLY a class like .material-icons could potentially mess up their entire project because that class is used many places outside of popups. The lack of documentation is “intended” to force users to study advanced CSS rules and techniques before wading into this slightly dangerous area of modifying their project.

16

So it is better to have separated class for different part of popup and make access to them in desinger style property of Popup.
From Aesthetics point of view it is really important for desinger to have control over then.

17

I agree 100%, but this is code which was in place from the Beta of 8.0. Way back then we were working to make components and pieces usable. We're now in the process of making them more customizable (like with the 8.0.13 introduction of organized themes). It's going to be a process, and we can only do so much at a time without breaking existing projects.

1 Like
18

Is there a way to remove the blue outline around the popup when it is selected? When spawning a popup it always has that blue outline until somewhere else is clicked.

19

I added this to my popup.css and it removed the blue outline

.ia_popup:focus {
	outline: 0;
}