FoxInCloud
buttons group borders
Gravatar is a globally recognized avatar based on your email address. buttons group borders
  Vincent H.
  All
  May 13, 2020 @ 11:39pm

Hi Thierry,

In a group of buttons, the inner borders are square, only the outer borders being rounded.
If a button becomes invisible when refreshing, the borders that have become external remain square.
Is it possible to remedy it ?

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 13, 2020 @ 11:57pm

Hi Vincent, any screenshot to illustrate?

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 14, 2020 @ 12:06am

Yes, of course.

2 active buttons:

1 remaining:

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 14, 2020 @ 05:32am

Hi Vincent,

It's a CSS caveat, Bootstrap can't do nothing about it, even version 4, we need some custom JavaScript and CSS.

Please test this solution (will move to FoxInCloud V 2.31.0-beta.2 if your tests are OK)

in xxx.css

/* 2020-05-14 thn -- {FiC V 2.31.0-beta.2} {en} rounded border on first visible outer button -- move to FoxInCloud.css if OK */
.btn-group>.btn.rbLeft:not(:first-child) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.btn-group>.btn.rbRight:not(:last-child) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.btn-group-vertical>.btn.rbTop:not(:last-child) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.btn-group-vertical>.btn.rbRight:not(:last-child) {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
in xxx.js, add this inside 
jQuery.extend(FoxInCloud, {
…

/* 2020-05-14 thn -- {FiC V 2.31.0-beta.2} {en} rounded border on first visible outer button -- move to FoxInCloud.js if OK */
  AjaxComplete_: function (jqXHR) {
    jQuery.fn.reverse = function() {
      return this.pushStack(this.get().reverse(), arguments);
    }; 
    var $grp, vertical, $bts, reverse, $btn, visible, visible_, btnFn = function(idx){
      $btn = jQuery(this);
      visible = $btn.is(':visible');
      $btn[(idx > 0 && visible && !visible_ ? 'add' : 'remove') + 'Class'](reverse ? (vertical ? 'rbBot': 'rbRight') : (vertical ? 'rbTop': 'rbLeft'));
      visible_ = visible_ || visible;
    };
    jQuery('.btn-group').add('.btn-group-vertical').each(function(){
      $grp = jQuery(this);
      vertical = $grp.is('.btn-group-vertical');
      $bts = $grp.find('.btn');

      visible_ = false;
      reverse = false;
      $bts.each(btnFn);

      visible_ = false;
      reverse = true;
      $bts.reverse().each(btnFn);
    });
  },

…
  junk: null
});

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 14, 2020 @ 06:04am

So class ! (sans jeu de mots ...)

But it's ok on the left side of the button but not on the right side:

left:

right:

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 14, 2020 @ 06:09am
  1. I may have updated the code since your test, please try with the code currently posted
  2. Please make sure to clear the cache before re-testing
  3. If you still have an issue, please post the HTML of the whole button group (with contained buttons) that you copy from within the developer tools (select the button group, F2, copy), and outline the button where the behaviour is different from expected
  4. if possible, please test also on a vertical button group

TIA

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 14, 2020 @ 06:26am
<div class="btn-group awBSgrp-retourdon p001">
<button type="button" id="realise_scx-retourdon" class="realise_scx-retourdon btn-default btn" title="Retour aux données pour modifier le compromis" tabindex="3"><span class="fa fa-undo" aria-hidden="true"></span> Retour aux données</button>
<button type="button" id="realise_scx-raz" class="realise_scx-raz btn-default btn" title="Remise à zéro (sans supp. des données) permettant une nouvelle finalisation" tabindex="2" style="display: none;">RAZ sign.</button>
</div>

The right corners of this button:

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  Vincent H.
  Vincent H.
  May 14, 2020 @ 06:37am

With vertical buttons group:

<div class="form-group awBSgrp-ajout p001">
<div class="btn-group-vertical awBSgrp-ajout p001">
<button type="button" id="partiesdoss_scx-ajout" class="partiesdoss_scx-ajout doo-ajouter btn-default btn" title="Ajouter une ligne" tabindex="2" accesskey="A" style="cursor: pointer;"><span class="fa fa-plus-circle" aria-hidden="true"></span> Ajouter</button>
<button type="button" id="partiesdoss_scx-modifier" class="partiesdoss_scx-modifier doo-modifier btn-default btn" tabindex="3" accesskey="M" style="cursor: pointer;"><span class="fa fa-edit text-primary" aria-hidden="true"></span> Modifier</button>
<button type="button" id="partiesdoss_scx-retirer" class="partiesdoss_scx-retirer doo-retirer btn-default btn" title="Retirer l'option sélectionnée" tabindex="4" accesskey="R" style="cursor: pointer;"><span class="fa fa-minus-circle text-danger" aria-hidden="true"></span> Retirer</button>
<button type="button" id="partiesdoss_scx-effacer" class="partiesdoss_scx-effacer doo-effacer btn-default btn" title="Effacer les informations de la page courante" tabindex="5" style="cursor: pointer;"><span class="fa fa-eraser" aria-hidden="true"></span> Effacer</button>
<button type="button" id="partiesdoss_scx-voir1" class="partiesdoss_scx-voir1 doo-visualiser btn btn-default" tabindex="7" accesskey="V" style="display: none;"><span class="fa fa-eye" aria-hidden="true"></span> Visualiser</button>
</div>
</div>

Problem with the last one ("Visualiser" is not visible):

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 14, 2020 @ 07:43am

OK thanks for the feedback; please try this code in xxx.js:

/* 2020-05-14 thn -- {FiC V 2.31.0-beta.2} {en} rounded border on first visible outer button -- move to FoxInCloud.js if OK */
  AjaxComplete_: function (jqXHR) {
    jQuery.fn.reverse = function() {
      return this.pushStack(this.get().reverse(), arguments);
    }; 
    var $grp, vertical, $bts, reverse, $btn, visible, visible_, btnFn = function(idx){
      $btn = jQuery(this);
      visible = $btn.css('display') !== 'none';
      $btn[(idx > 0 && visible && !visible_ ? 'add' : 'remove') + 'Class'](reverse ? (vertical ? 'rbBot': 'rbRight') : (vertical ? 'rbTop': 'rbLeft'));
      visible_ = visible_ || visible;
    };
    jQuery('.btn-group').add('.btn-group-vertical').each(function(){
      $grp = jQuery(this);
      vertical = $grp.is('.btn-group-vertical');
      $bts = $grp.find('.btn');

      visible_ = false;
      reverse = false;
      $bts.each(btnFn);

      visible_ = false;
      reverse = true;
      $bts.reverse().each(btnFn);
    });
  },

and in xxx.css

/* 2020-05-14 thn -- {FiC V 2.31.0-beta.2} {en} rounded border on first visible outer button -- move to FoxInCloud.css if OK */
.btn-group>.btn.rbLeft:not(:first-child) {
  border-top-left-radius: 4px!important;
  border-bottom-left-radius: 4px!important;
}
.btn-group>.btn.rbRight:not(:last-child) {
  border-top-right-radius: 4px!important;
  border-bottom-right-radius: 4px!important;
}
.btn-group-vertical>.btn.rbTop:not(:first-child) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.btn-group-vertical>.btn.rbBot:not(:last-child) {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

TIA

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 14, 2020 @ 08:50am

Same results. With the same screens:

Vertical buttons (last one):
<div class="col col-ajout col-xs-12 col-sm-3 text-right">
<div class="form-group awBSgrp-ajout p001">
<div class="btn-group-vertical awBSgrp-ajout p001">
<button type="button" id="partiesdoss_scx-ajout" class="partiesdoss_scx-ajout doo-ajouter btn-default btn" title="Ajouter une ligne" tabindex="2" accesskey="A" style="cursor: pointer;"><span class="fa fa-plus-circle" aria-hidden="true"></span> Ajouter</button>
<button type="button" id="partiesdoss_scx-modifier" class="partiesdoss_scx-modifier doo-modifier btn-default btn" tabindex="3" accesskey="M" style="cursor: pointer;"><span class="fa fa-edit text-primary" aria-hidden="true"></span> Modifier</button>
<button type="button" id="partiesdoss_scx-retirer" class="partiesdoss_scx-retirer doo-retirer btn-default btn" title="Retirer l'option sélectionnée" tabindex="4" accesskey="R" style="cursor: pointer;"><span class="fa fa-minus-circle text-danger" aria-hidden="true"></span> Retirer</button>
<button type="button" id="partiesdoss_scx-effacer" class="partiesdoss_scx-effacer doo-effacer btn-default btn" title="Effacer les informations de la page courante" tabindex="5" style="cursor: pointer;"><span class="fa fa-eraser" aria-hidden="true"></span> Effacer</button>
<button type="button" id="partiesdoss_scx-voir1" class="partiesdoss_scx-voir1 doo-visualiser btn btn-default" tabindex="7" accesskey="V" style="display: none;"><span class="fa fa-eye" aria-hidden="true"></span> Visualiser</button>
</div>
</div>
</div>
and horizontal (right corners):
<div class="btn-group awBSgrp-retourdon p001">
<button type="button" id="realise_scx-retourdon" class="realise_scx-retourdon btn-default btn" title="Retour aux données pour modifier le compromis" tabindex="3"><span class="fa fa-undo" aria-hidden="true"></span> Retour aux données</button>
<button type="button" id="realise_scx-raz" class="realise_scx-raz btn-default btn" title="Remise à zéro (sans supp. des données) permettant une nouvelle finalisation" tabindex="2" style="display: none;">RAZ sign.</button>
</div>
Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 14, 2020 @ 09:24am

I doubt… sure you have this code in xxx.js seen in the dev tools?

visible = $btn.css('display') !== 'none';

Also sure you've updated the CSS and hit ctrl+F5 or emptied the cache?

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 14, 2020 @ 09:45am

yes and yes, I even tried with Chrome

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 14, 2020 @ 09:51am

OK Thanks will make a repro case tomorrow

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 14, 2020 @ 10:12am

Thanks in advance

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 14, 2020 @ 12:56pm

UPDATE: FoxInCloud.js needs an update; will be in the next release… sorry for the delay.

This enhancement does not support .wlEffect*=.T.; please set at design time or in xxxCmd.Init(): xxxCmd.wlEffectHide = .F., xxxCmd.wlEffectShow = .F..

This CSS should work:

/* 2020-05-14 thn -- {FiC V 2.31.0-beta.2} {en} rounded border on first visible outer button */
.btn-group>.btn.rbLeft:not(:first-child):not(.dropdown-toggle) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.btn-group>.btn.rbRight:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.btn-group-vertical>.btn.rbTop:not(:first-child):not(.dropdown-toggle) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.btn-group-vertical>.btn.rbBot:not(:last-child):not(.dropdown-toggle) {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 15, 2020 @ 04:38am

Sorry, I hadn't seen your answer.
If the next beta is near, I can wait.

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 15, 2020 @ 11:19pm

I tried again, without success for the right borders and for the last vertical button.

I didn't find a .wlEffect* property but I guess you meant .wuEffect* (disabled by default in my subclass) ?

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 16, 2020 @ 01:19am

I tried again, without success

Will work with the next FoxInCloud release… then think of removing all the JS & CSS code added for testing

.wuEffect*

right

Gravatar is a globally recognized avatar based on your email address. re: buttons group borders
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 16, 2020 @ 01:24am

OK. I wait ... impatiently 😃

© 1996-2020