Skip to content

Commit

Permalink
Fixes #24225: Fix UI issues caused by bootstrap update in branding pl…
Browse files Browse the repository at this point in the history 
…ugin
  • Loading branch information
@RaphaelGauthier
RaphaelGauthier committed Feb 20, 2024
1 parent eddda85 commit 58611b2
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 58 deletions.
21 changes: 10 additions & 11 deletions branding/src/main/elm/sources/View.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,18 +44,18 @@ view model =
[ div [ class "panel-col col-md-6" ]
[ div [ class "form-group" ]
[ div [ class "input-group" ]
[ label [ for "enable-wide-logo", class "input-group-addon" ]
[ label [ for "enable-wide-logo", class "input-group-text" ]
[ input [ type_ "checkbox", checked wideLogo.enable, id "enable-wide-logo", onClick (ToggleLogo "wide")] [] ]
, label [ class "form-control", onClick (UploadFile "wide") ] [ text "Upload main custom logo", i[][ text wideLogoTxtInfo] ]
, span [ class ("input-group-addon " ++ wideClassBtn), onClick wideActionBtn ] [ i[class "fa fa-upload"][], i[class "fa fa-times"][]]
, span [ class ("input-group-text " ++ wideClassBtn), onClick wideActionBtn ] [ i[class "fa fa-upload"][], i[class "fa fa-times"][]]
]
]
, div [ class "form-group" ]
[ div [ class "input-group" ]
[ label [ for "enable-small-logo", class "input-group-addon" ]
[ label [ for "enable-small-logo", class "input-group-text" ]
[ input [ type_ "checkbox", checked smallLogo.enable, id "enable-small-logo", onClick (ToggleLogo "small")] [] ]
, label [ class "form-control", onClick (UploadFile "small") ] [ text "Upload reponsive custom logo", i[][ text smallLogoTxtInfo] ]
, span [ class ("input-group-addon " ++ smallClassBtn), onClick smallActionBtn ] [ i[class "fa fa-upload"][], i[class "fa fa-times"][]]
, span [ class ("input-group-text " ++ smallClassBtn), onClick smallActionBtn ] [ i[class "fa fa-upload"][], i[class "fa fa-times"][]]
]
]
]
Expand Down Expand Up @@ -86,15 +86,15 @@ view model =
, div [ class "form-group" ]
[ label [] [ text "Background color" ]
, div [ class "input-group" ]
[ label [ for "color-bar", class "input-group-addon" ]
[ label [ for "color-bar", class "input-group-text" ]
[ span [ class "fa fa-hashtag" ] [] ]
, Html.map BgColorPicker (ColorPicker.view model.settings.bgColorValue model.bgColorPicker)
]
]
, div [ class "form-group" ]
[ label [] [ text "Label color" ]
, div [ class "input-group" ]
[ label [ for "color-txt", class "input-group-addon" ]
[ label [ for "color-txt", class "input-group-text" ]
[ span [ class "fa fa-hashtag" ] [] ]
, Html.map TxtColorPicker (ColorPicker.view model.settings.labelColorValue model.labelColorPicker)
]
Expand Down Expand Up @@ -131,7 +131,7 @@ checkbox : Bool -> msg -> String -> String -> Html msg
checkbox chckd actionMsg inputId txt =
div [ class "form-group" ]
[ div [ class "input-group" ]
[ label [ for inputId, class "input-group-addon" ]
[ label [ for inputId, class "input-group-text" ]
[ input [ type_ "checkbox", checked chckd, id inputId, onClick actionMsg ] [] ]
, label [ for inputId, class "form-control" ] [ text txt ]
]
Expand All @@ -147,7 +147,7 @@ textField actionCheckboxMsg actionInputMsg chckd inputVal inputId txt =
div [ class "form-group" ]
[ label [ for fieldId ] [ text txt ]
, div [ class "input-group" ]
[ label [ for inputId, class "input-group-addon" ]
[ label [ for inputId, class "input-group-text" ]
[ input [ type_ "checkbox", id inputId, onClick actionCheckboxMsg, checked chckd ] [] ]
, input [ id fieldId, class "form-control", onInput actionInputMsg, value inputVal ] []
]
Expand All @@ -163,11 +163,10 @@ fileField msg inputId txt =
div [ class "form-group" ]
[ label [] [ text txt ]
, div [ class "input-group" ]
[ label [ for inputId, class "input-group-addon" ]
[ label [ for inputId, class "input-group-text" ]
[ input [ type_ "checkbox", id inputId ] [] ]
, label [ for fieldId, class "form-control" ] [ text "No file chosen." ]
, label [ class "input-group-btn" ]
[ button [ class "btn btn-primary", type_ "button", id fieldId ] [ text "Choose file..." ] ]
, button [ class "btn btn-primary", type_ "button", id fieldId ] [ text "Choose file..." ]
]
]

Expand Down
64 changes: 17 additions & 47 deletions branding/src/main/style/media.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ label.form-control{
border-left: none;
padding: 8px 12px !important;
}
label.form-control,label.input-group-addon{
label.form-control,label.input-group-text{
cursor: pointer;
}
label.form-control > i {
Expand Down Expand Up @@ -90,7 +90,7 @@ form{
.panel-body > .panel-col:last-child{
padding: 15px;
border-left: 1px solid #D6DEEF;
background-color: #f0f0f0;
background-color: #F8F9FC;
display: flex;
}

Expand All @@ -117,10 +117,6 @@ form{
border-bottom: 20px solid transparent;
border-left: 20px solid #D6DEEF;
}
.panel-body > .panel-col:last-child{
border-left: 1px solid #D6DEEF;
background-color: #f0f0f0;
}
}
/* -- --------------- -- */
.preview-window{
Expand Down Expand Up @@ -309,16 +305,16 @@ form{
ui-dropdown-panel{
z-index:9999 !important;
}
.input-group > .input-group-addon + ui-picker{
border-color: #D6DEEFccc;
.input-group > .input-group-text + ui-picker{
border-color: #D6DEEF;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group > .input-group-addon + ui-picker > ui-picker-input{
.input-group > .input-group-text + ui-picker > ui-picker-input{
padding: 0;
height: 100%;
}
.input-group > .input-group-addon + ui-picker > ui-picker-input > ui-color-picker-rect{
.input-group > .input-group-text + ui-picker > ui-picker-input > ui-color-picker-rect{
top: 0;
right: -1px;
width: 34px;
Expand All @@ -332,10 +328,10 @@ ui-dropdown-panel{
border-top: none;
border-bottom: none;
}
.input-group > .input-group-addon + ui-picker ui-color-picker-background{
.input-group > .input-group-text + ui-picker ui-color-picker-background{
border-radius: 2px;
}
.input-group > .input-group-addon + ui-picker ui-color-picker-text{
.input-group > .input-group-text + ui-picker ui-color-picker-text{
padding: 6px 12px;
}

Expand All @@ -348,51 +344,25 @@ ui-dropdown-panel{
margin:0;
padding:0;
}

#branding-main .input-group .input-group-addon {
border: 1px solid #D6DEEF;
}
#branding-main .input-group > .input-group-addon:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-right:none;
background-color: #F8F9FC;
}
#branding-main .input-group > .input-group-addon:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-left:none;
cursor: pointer;
min-width: 40px;
}

#branding-main .input-group > .input-group-addon:last-child > i.fa{
color: #bababa;
#branding-main .input-group > .input-group-text:last-child > .fa{
color: #72829D;
transition-duration: .2s;
}
span.input-group-addon.remove-btn ,
span.input-group-addon.upload-btn {
.remove-btn ,
.upload-btn {
transition-duration: .2s;
}
span.input-group-addon.remove-btn:hover ,
span.input-group-addon.upload-btn:hover {
background-color: #f7f7f7;
#branding-main .input-group > .input-group-text:last-child.remove-btn:hover > i.fa{
color: #DA291C;
}
#branding-main .input-group > .input-group-addon:last-child.remove-btn:hover > i.fa{
color: #dd4b39;
}
#branding-main .input-group > .input-group-addon:last-child.upload-btn:hover > i.fa{
#branding-main .input-group > .input-group-text:last-child.upload-btn:hover > i.fa{
color: #337ab7;
}
#branding-main .input-group > .input-group-addon:last-child.remove-btn > i.fa-upload,
#branding-main .input-group > .input-group-addon:last-child.upload-btn > i.fa-times{
#branding-main .input-group > .input-group-text:last-child.remove-btn > i.fa-upload,
#branding-main .input-group > .input-group-text:last-child.upload-btn > i.fa-times{
display: none;
}

#branding-main .input-group .input-group-addon:first-child input{
position: relative;
top: 2px;
}
#branding-main .toolbar {
background-color: #fff;
border-top: 1px solid #D6DEEF;
Expand Down

0 comments on commit 58611b2

Please sign in to comment.