stable

Clone or download

Read-only

Customization of SVG logo

Default logo is now the SVG version. This is a generic logo and might not be suitable for everyone. For example we want to differenciate platforms like tuleap.net, tuleap-campus.org, … Furthermore existing instances might want to convert their existing custom logo to a SVG one to benefit from SVG advantages over PNG version (less ugly on pages without sidebar, and possibility to adjust the color of the logo to the current theme color). In order to provide a custom SVG logo, the site administrator must provide two files: * `organization_logo.svg` * `organization_logo_small.svg` Both files must be uploaded to `/var/lib/tuleap/images/` directory and caches must be invalidated with `tuleap -c` command. The former is the standard version. Size ≃ 110×30 pixels. The latter is used when the sidebar is collapsed. Size ≃ 30×30. Note: Dimensions are here for reference, the logo must not be too big to respect whitespaces and sidebar width. Else it may breaks the feng shui of Tuleap. There is two main usages of the logo: * In the sidebar (currently white on theme-color background) * When there is no sidebar (theme-color on light grey background) In the sidebar the default logo is displayed white on theme-color background. If no sidebar the default logo will be displayed theme-color (the tulip's petal) and blackish (the text "Tuleap") on a light grey or white background. We recommend to have the same behavior so that your logo can be displayed nicely both on light background and on the sidebar. Furthermore the usage of current theme color might appear as a small detail but will helps to render smoothly the overall page in the eyes of the user. In order to do that your SVG file must contain the following class names on elements of the composition: * logo-svg-fill-theme-color * logo-svg-fill-default-text-color This will be rendered with the following color according to context +------------+---------------------------+----------------------------------+ | Context | logo-svg-fill-theme-color | logo-svg-fill-default-text-color | +------------+---------------------------+----------------------------------+ | No sidebar | theme color | blackish | | | | | | Sidebar | white | white | +------------+---------------------------+----------------------------------+ Without those class names, the color of the element will stay the same on each pages of Tuleap. Note: If parts of the logo cannot be dynamically changed according to the current context (for example corporate logo is vibrant red, Design department does not allow to transform it blue for good reasons), then we strongly encourage platform administrator and desigers to check if the logo is rendered nicely and that they avoid harmful combinaisons of colors like vibrant red on green sidebar for example. Logo must be checked in the following context: * No sidebar at the top (light grey background) * No sidebar with scroll at the end of the page (white background) * Project expanded sidebar (theme color) * Project collapsed sidebar (small variant on theme color) --- In order to help the functional review, here is a handcrafted logo to play with: `organization_logo_small.svg` ```svg <svg xmlns="http://www.w3.org/2000/svg" width="38.796" height="29.986" viewBox="0 0 10.265 7.934"> <path d="M1.374 0a.432.432 0 00-.312.136.995.995 0 00-.17.262v.003L.89.404c-.346.83-.704 1.459-.834 2.612v.007C.03 3.823-.01 4.62 0 5.443c0 .28.152.596.363.856s.484.467.77.467h9.13V5.692l-.053-.013v-.632l.054.01v-.436l-.066-.02C8.35 4.01 6.801 2.822 5.941.707V.707C5.779.295 5.447.029 5.02 0h-.003zm-.022.726h3.51s.006 0 .023.015.04.043.064.082c.048.078.098.196.147.329.098.265.189.59.274.818.018.049.022.13.008.186a.168.168 0 01-.023.058l-.001.003H.786c.003.003-.002 0-.004 0h.004v-.001a.126.126 0 01-.021-.046.428.428 0 01.003-.193c.114-.229.23-.55.342-.815.057-.135.113-.256.162-.337a.474.474 0 01.064-.087l.015-.012h-.006.007zm4.991 2.04c.19.2.387.42.581.56v1.326l-.513-.235a18.575 18.575 0 01-.068-1.652zM7.51 3.828c.175.135.299.208.469.329l.008.978-.476-.2c-.01-.48-.002-.69 0-1.107zm-6.33.344h.017a.322.322 0 01.325.323.323.323 0 01-.325.324.323.323 0 01-.324-.324.323.323 0 01.308-.323zm3.453 0h.016a.322.322 0 01.324.323.323.323 0 01-.324.324.323.323 0 01-.324-.324.323.323 0 01.308-.323zm3.877.283l.462.188v.79A1.632 1.632 0 018.51 5.3zm.92.376l.328.085v.695a1.459 1.459 0 01-.329-.057zM4.187 6.886v.431H2.27v-.43H.964v.435H.096l-.002.612h6.11c.86-.387 2.361-.875 3.967-.943v-.105z" class="logo-svg-fill-theme-color"/> </svg> ``` `organization_logo.svg` ```svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.84 7.938" height="30" width="109"> <path class="logo-svg-fill-theme-color" d="M1.378-.004a.432.432 0 00-.312.136.995.995 0 00-.17.263v.002L.895.4C.549 1.23.19 1.859.06 3.012v.008c-.026.8-.066 1.596-.056 2.42 0 .278.152.595.363.855s.484.467.77.467h9.13V5.688l-.053-.013v-.632l.054.01v-.436l-.066-.02C8.354 4.006 6.805 2.82 5.945.703 5.784.29 5.45.024 5.025-.005h-.003zm-.022.726h3.511c-.001 0 .005 0 .022.015.017.015.04.043.064.082.048.078.099.196.147.329.098.265.19.59.274.818.018.049.022.13.009.187a.168.168 0 01-.024.058l-.001.002H.79c.003.003-.002 0-.004 0H.79a.126.126 0 01-.021-.046.428.428 0 01.004-.194c.114-.229.23-.549.341-.815.057-.135.113-.256.162-.337A.474.474 0 011.34.734l.016-.012h-.007.007zm4.992 2.04c.19.2.387.42.58.56V4.65l-.512-.235a18.575 18.575 0 01-.068-1.653zm1.166 1.063c.175.135.298.208.468.329l.009.978-.477-.2c-.01-.48-.002-.69 0-1.107zm-6.33.344h.017a.322.322 0 01.324.323.323.323 0 01-.324.324.323.323 0 01-.324-.324.323.323 0 01.307-.323zm3.452 0h.016a.322.322 0 01.324.323.323.323 0 01-.324.324.323.323 0 01-.324-.324.323.323 0 01.308-.323zm3.877.283l.462.189v.79a1.632 1.632 0 01-.462-.135zm.92.376l.328.085v.696a1.459 1.459 0 01-.328-.058zM4.192 6.882v.431H2.276v-.43H.968v.435H.1l-.002.612h6.11c.86-.387 2.361-.875 3.967-.942v-.106z"/> <g style="line-height:1.25" aria-label="Locomotive Manipulation" font-weight="400" font-size="12" font-family="sans-serif" letter-spacing="0" word-spacing="0"> <path d="M10.47.405h.313v2.051h1.127v.264h-1.44zm2.372.779q-.23 0-.363.18-.134.178-.134.49 0 .31.132.49.134.179.365.179.227 0 .36-.18.134-.18.134-.49 0-.308-.133-.488-.134-.181-.361-.181zm0-.242q.372 0 .584.242.212.241.212.67 0 .426-.212.669-.212.242-.584.242-.374 0-.586-.242-.211-.243-.211-.67 0-.428.21-.67.213-.241.587-.241zm2.518.108v.267q-.122-.067-.244-.1-.121-.033-.245-.033-.278 0-.431.176-.154.175-.154.493t.154.495q.153.175.43.175.125 0 .246-.033.122-.034.243-.1v.263q-.12.056-.248.084-.127.028-.271.028-.392 0-.623-.247-.231-.246-.231-.665 0-.424.232-.668.234-.243.64-.243.132 0 .258.028.125.026.243.08zm1.171.134q-.23 0-.363.18-.133.178-.133.49 0 .31.132.49.133.179.364.179.228 0 .361-.18.134-.18.134-.49 0-.308-.134-.488-.133-.181-.36-.181zm0-.242q.372 0 .585.242.212.241.212.67 0 .426-.212.669-.213.242-.585.242-.373 0-.586-.242-.21-.243-.21-.67 0-.428.21-.67.213-.241.586-.241zm2.62.375q.107-.192.256-.284.149-.091.35-.091.272 0 .419.19.147.19.147.54V2.72h-.287V1.681q0-.25-.088-.37-.088-.121-.27-.121-.221 0-.35.147-.129.147-.129.402v.98h-.287V1.681q0-.25-.088-.37-.088-.121-.273-.121-.218 0-.347.149-.129.147-.129.4v.98h-.286V.984h.286v.27q.098-.16.234-.236.137-.076.324-.076.19 0 .321.096.134.096.197.279zm2.416-.133q-.23 0-.363.18-.134.178-.134.49 0 .31.132.49.134.179.365.179.227 0 .36-.18.134-.18.134-.49 0-.308-.133-.488-.134-.181-.361-.181zm0-.242q.372 0 .584.242.212.241.212.67 0 .426-.212.669-.212.242-.584.242-.374 0-.586-.242-.211-.243-.211-.67 0-.428.21-.67.213-.241.587-.241zm1.55-.451v.493h.587v.221h-.587v.943q0 .212.057.273.06.06.237.06h.293v.239h-.293q-.33 0-.455-.123-.126-.124-.126-.45v-.942h-.21V.984h.21V.491zm.964.493h.285V2.72h-.285zm0-.676h.285v.36h-.285zm.676.676h.302l.543 1.457.543-1.457h.302l-.651 1.736h-.388zm3.569.796v.14h-1.312q.019.295.177.45.16.153.443.153.165 0 .318-.04.155-.04.307-.121v.27q-.153.065-.315.099-.16.034-.327.034-.415 0-.659-.242-.241-.242-.241-.654 0-.427.23-.676.23-.251.62-.251.351 0 .554.226.205.225.205.612zm-.285-.083q-.004-.234-.132-.374-.127-.14-.338-.14-.239 0-.383.135-.143.135-.164.38z" class="logo-svg-fill-default-text-color"/> <path d="M10.47 4.815h.466l.59 1.575.595-1.575h.466V7.13h-.305V5.097l-.597 1.588h-.315l-.597-1.588V7.13h-.303zm3.321 1.442q-.345 0-.479.079-.133.079-.133.27 0 .152.1.241t.272.089q.237 0 .38-.168.144-.169.144-.448v-.063zm.57-.118v.99h-.286v-.263q-.098.158-.243.234-.146.075-.357.075-.267 0-.425-.15-.156-.15-.156-.4 0-.294.195-.443.197-.148.586-.148h.4v-.028q0-.197-.13-.304-.129-.109-.363-.109-.149 0-.29.036-.14.036-.271.107v-.264q.156-.06.304-.09.147-.03.287-.03.376 0 .562.195.186.195.186.592zm1.836-.057V7.13h-.285V6.09q0-.246-.096-.368-.096-.123-.289-.123-.23 0-.364.148-.133.147-.133.401v.982h-.287V5.393h.287v.27q.102-.157.24-.234.14-.078.32-.078.3 0 .454.186.153.185.153.545zm.376-.689h.286V7.13h-.286zm0-.676h.286v.362h-.286zm.961 2.152v.921h-.287V5.393h.287v.264q.09-.155.226-.23.138-.076.329-.076.316 0 .513.252.199.25.199.66 0 .41-.199.66-.197.252-.513.252-.19 0-.329-.075-.136-.076-.226-.23zm.97-.606q0-.315-.13-.493-.128-.18-.355-.18-.226 0-.356.18-.129.178-.129.493t.129.495q.13.178.356.178.227 0 .355-.178.13-.18.13-.495zm.544.181v-1.05h.285v1.04q0 .246.097.37.096.123.288.123.23 0 .364-.148.135-.147.135-.401v-.985h.285V7.13h-.285v-.267q-.104.158-.242.236-.136.076-.318.076-.299 0-.454-.186-.155-.186-.155-.545zm.718-1.093zm1.131-.633h.285V7.13h-.285zm1.474 1.539q-.346 0-.479.079t-.133.27q0 .152.099.241.1.089.273.089.237 0 .38-.168.144-.169.144-.448v-.063zm.569-.118v.99h-.285v-.263q-.098.158-.244.234-.145.075-.356.075-.267 0-.425-.15-.157-.15-.157-.4 0-.294.196-.443.197-.148.586-.148h.4v-.028q0-.197-.13-.304-.13-.109-.363-.109-.149 0-.29.036t-.271.107v-.264q.156-.06.303-.09.148-.03.287-.03.377 0 .563.195.186.195.186.592zm.676-1.239v.493h.587v.222h-.587v.943q0 .212.057.272.059.06.237.06h.293v.24h-.293q-.33 0-.456-.123-.125-.124-.125-.45v-.942h-.21v-.222h.21V4.9zm.768.493h.285V7.13h-.285zm0-.676h.285v.362h-.285zm1.358.876q-.23 0-.363.18-.133.178-.133.49t.131.491q.134.179.365.179.228 0 .36-.18.134-.18.134-.49 0-.308-.133-.488-.133-.182-.361-.182zm0-.242q.372 0 .584.242.212.242.212.67 0 .426-.212.67-.212.242-.584.242-.374 0-.586-.242-.211-.244-.211-.67 0-.428.21-.67.213-.242.587-.242zm2.515.731V7.13h-.285V6.09q0-.246-.096-.368-.096-.123-.288-.123-.231 0-.365.148-.133.147-.133.401v.982h-.287V5.393h.287v.27q.102-.157.24-.234.14-.078.321-.078.3 0 .453.186.153.185.153.545z" letter-spacing="-.74" class="logo-svg-fill-default-text-color"/> </g> </svg> ``` Part of story #16210 Remove navigation bar Change-Id: I2803fba735a5b07397bedf1ad4bd8a77208ae547

Modified Files

Name
M src/common/Glyph/GlyphFinder.php +9 −1 Go to diff View file
M src/common/layout/Logo/CachedCustomizedLogoDetector.php +13 −0 Go to diff View file
M src/common/layout/Logo/CustomizedLogoDetector.php +7 −1 Go to diff View file
M src/common/layout/Logo/IDetectIfLogoIsCustomized.php +2 −0 Go to diff View file
M src/common/mail/LogoRetriever.class.php +58 −13 Go to diff View file
M src/common/mail/MailPresenterFactory.class.php +4 −4 Go to diff View file
M src/common/mail/TuleapRegisterMail.class.php +1 −1 Go to diff View file
M src/templates/common/logo.mustache +35 −25 Go to diff View file
M src/themes/BurningParrot/css/includes/_logo.scss +4 −4 Go to diff View file
M src/themes/BurningParrot/include/HeaderPresenter.php +8 −1 Go to diff View file
M src/themes/BurningParrot/include/HeaderPresenterBuilder.php +3 −0 Go to diff View file
M src/themes/BurningParrot/include/Navbar/Presenter.php +8 −1 Go to diff View file
M src/themes/BurningParrot/include/Navbar/PresenterBuilder.php +4 −2 Go to diff View file
M src/themes/FlamingParrot/css/utils/_logo.scss +4 −4 Go to diff View file
M src/themes/FlamingParrot/include/ContainerPresenter.class.php +8 −1 Go to diff View file
M src/themes/FlamingParrot/include/NavBarPresenter.class.php +8 −1 Go to diff View file
M src/www/account/register.php +2 −2 Go to diff View file
M src/www/themes/FlamingParrot/FlamingParrot_Theme.class.php +6 −2 Go to diff View file
M tests/unit/common/Glyph/GlyphFinderTest.php +19 −0 Go to diff View file
M tests/unit/common/layout/Logo/CachedCustomizedLogoDetectorTest.php +30 −0 Go to diff View file
M tests/unit/common/layout/Logo/CustomizedLogoDetectorTest.php +26 −0 Go to diff View file
M tests/unit/common/mail/LogoRetrieverTest.php +2 −2 Go to diff View file