Create a layout with a titled border in Vaadin - vaadin

I want to create a layout with a titled border just like in the Java application screenshot below:
Is it possible?

Does it have to be 100% like the image above? If not, you can try the Panel class with default (valo) theme, there's a sample with code at http://demo.vaadin.com/sampler/#ui/structure/panel

There is no layout which displays the same layout as you shown in image. However vaadin gives flexibility to play around its components look and feel. As #Jorge mentioned, you can have panel and then play around CSS to get the layout like you shown.
There is no ready to use layout like that in vaadin and even don't see the reason to have it one in core vaadin. if someone builds the add-on is different story.

Related

Add / use custom SVG as material-icon

I'm using the material design package for my application layout menu.
I have 2 menus items where I can't find an icon that fits, so I got 2 SVG files that I added to the project.
I want to use this as the material-list-item icon instead of a material-icon.
Is there a way to do this by either adding a custom icon to the material-icon library or replacing the icon in the list.
If yes, please I need a complete example as I am new to DartAngular, still trying to figure out some stuff.
There is a mixin for material-icon which will get allow you to change a material-icon into using an SVG. https://github.com/dart-lang/angular_components/blob/c6cb3d783e72ff1ed7974f18b7f169778c73d39b/angular_components/lib/material_icon/_mixins.scss#L49
There is indeed a mixin for this as pointed out in Ted Sander's answer, but for the moment it does not seem to work. I've asked this on Gitter but did not get an answer, and I also opened a ticket on Github for this seemingly broken feature.
It's a telltale sign that even the official Angular Components Gallery has a broken SVG icon example.
I'd suggest to implement this by using separate list item rendering for those that have an official material-icon representation and those that need a custom SVG image, and conditionally render them with the ngIf directive.

ElectronJs: How to show chromium toolbar

I need to show chromium tool bar as shown in the screen shot below:
Is there a way to achieve this in ElectronJs?
There is no built-in address/tool bar in Electron, if you want one you have to create it yourself (using HTML, CSS, and JS). Here's an example of a custom address bar, and you may want to have a look at this issue in the Electron repository too.

Firefox extension : how to use the entire screen space for display?

I am relatively new to Firefox extensions development.
I want to implement an add-on on the lines of "clearly". (https://addons.mozilla.org/en-US/firefox/addon/clearly/)
How does one get the addon to have an overlay on top of the displayed webpage? i.e. on button click, the addon should display some custom text on a layer above the currently open web-page.
Also, Is it possible to set the display of this overlay with HTML?
What are the available options to achieve this?
Help greatly appreciated.
create a panel and insert to chrom document.
then open it with this code:
https://developer.mozilla.org/en-US/docs/XUL/Method/openPopup
set anchor to gBrowser.selectedTab.linkedBrowser
set panel width and height to same as the linked browser so:
panel.height = gBrowser.selectedTab.linkedBrowser.getBoundingClientRect().height
do same for width
https://developer.mozilla.org/en-US/docs/XUL/panel
if u need more help let me know ill write the code, its real simple
Technically you wouldn't even need to make it a Firefox extension, see https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

Delphi XE2 modern looking MainMenu

I am trying to modernize the look of our older Delphi 7 application now that we are using Delphi XE-2. I experimented with the TRibbon, and although I like it, it probably is not the correct solution since we currently use a TMainMenu and make many runtime changes to it - our users can modify the main menu. But the default Mainmenu looks old, especially compared to the image shown.
What I am trying to do is something very close to the attached image, especially with the background color, but I don't quite understand how this was done. Can anyone tell me if this example (the File/View/Insert section) uses a TMainMenu, or is it Buttons on a Toolbar ? If we require a customizable main menu, do you think the example shown is an option ?
This example image comes from DevExpress Print Sample library.
Edit : I am new here so I can't include the image. Here is the link :
http://www.devexpress.com/Products/VCL/ExPrintingSystem/gallery.xml
The second image, the green one that says "Print Preview".
You could use the TActionMainMenuBar but the simpler solution for you is to Use Vcl styles, pick a theme, modify the graphical properties of a MainMenu component and then use StyleHooks to force the style just for the MainMenu component without using it for the whole application.

Custom master page for dialogs

I am using a custom master page for branding, but the way I have designed it makes popup dialogs (like new item for lists) look terrible. I know I could probably change the design to make it work, but that would break the actual page (which for the moment looks perfect just the way it is).
My question therefore is this:
Is it possible to change the masterpage only for dialogs and popups?
The standard v4.master page looks just fine for dialogs when using my custom theme so branding is not such a big deal here.
I ended up messing with the design instead. This gave a satisfactory result.

Resources