Change WAB 2.7 widget icon size Launchpad theme

[CCWeedcontrol]

How does one change the widget icons sizes on WAB 2.7?

I am using launchpad theme.

[RobertScheitlin__GISP]

CC,

   This the numbers used below are for doubling the icons size:

   In the [install dir]\server\apps\[app#]\themes\LaunchpadTheme\widgets\AnchorBarController\Widget.js

  var MIN_MARGIN = 16, ICON_SIZE = 80, ICON_IMG_SIZE = 40, BUTTON_SIZE = 60,
      NORMAL_MODE = 1, MOBILE_MODE = 2;‍‍

In the [install dir]\server\apps\[app#]\themes\LaunchpadTheme\styles\default\css\launchpad.css

Go to the bottom of the file and add these two new rules:

.jimu-anchorbar-iconitem .icon-item.dockable {
  margin-top: -45px;
}

.claro .jimu-anchorbar-iconitem .icon-item .icon {
  margin-top: 20px;
}‍‍‍‍‍‍‍

[CCWeedcontrol]

Thank you Robert but i meant the toggle buttons on the top right of the launchpad theme.

my apologies for forgetting that detail. Although this was useful i also wanted to make the bottom icon buttons bigger.

[RobertScheitlin__GISP · Accepted solution]

CC,

   Well in that case, here is what you need:

In the [install dir]\server\apps\[app#]\themes\LaunchpadTheme\styles\default\css\launchpad.css

Go to the bottom of the file and add these two new rules:

.jimu-widget-onscreen-icon {
  width: 60px !important;
  height: 60px ! important;
}

.jimu-widget-onscreen-icon img {
  width: 32px;
  height: 32px;
  margin: 14px;
}‍‍‍‍‍‍‍‍‍‍

In the apps main config.json you will have to adjust the position paramaters for the onscreen widgets to add your desired spacing: (i.e. top and right)

        "position": {
          "right": 130,
          "top": 20,
          "relativeTo": "map"
        },‍‍‍‍‍

[CCWeedcontrol]

sweet, thank you!

[Anonymous User]

Robert Scheitlin, GISPthat worked nicely, in terms of anchor icon size!  Double size was a wee bit much though!  

On a related note, is increasing the # of widgets in AnchorBarController as simple a matter? I'm on 2.8. It seems to be a proportion of the viewport width although I didn't see where that was coming from in its widget.js.

[RobertScheitlin__GISP]

Kevin,

   It comes from several places in the widget.js. Lines like this:

domStyle.set(this.iconGroupNode, 'width',
              this.allConfigs.length * 2 * ICON_SIZE + 'px');‍‍

[Anonymous User]

Hi Robert, I had figured..  I saw those and it seemed a bit involved. 

So I discovered a simpler setting.

I changed ....

373    widgetWidth = Math.floor(mapBox.w / 2);

to divide by 1

373    widgetWidth = Math.floor(mapBox.w / 1);

..et voila.  Icons across the screen.  I actually notched it down to 1.5 and it worked nicely, took up most but not all of the bottom screen.

Hope this helps all.