diff --git a/CHANGELOG.md b/CHANGELOG.md index ec8e8b0..4f1acbe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,18 @@ To get the diff between two versions, go to https://github.com/LIN3S/PatternLibr * 0.2.0 * [BC break] Renderers. Changed configuration yml structure to adapt to new renderer (#12). + To upgrade check renderers documentation. + + * [BC break] Configuration yml changed. Moved title and description into theme, simplified adding custom styles and + allowed adding custom js and css files. + + Check new configuration reference to upgrade. + + * [BC break] partials/stylesheets.html.twig and partials/javascripts.html.twig extension to add custom stylesheets + or scripts removed. + + Use `theme.javascripts` and `theme.stylesheets` configuration values instead. * 0.1.0 * Initial release diff --git a/src/LIN3S/PatternLibraryBuilder/Config/ThemeConfig.php b/src/LIN3S/PatternLibraryBuilder/Config/ThemeConfig.php new file mode 100644 index 0000000..01cc8f7 --- /dev/null +++ b/src/LIN3S/PatternLibraryBuilder/Config/ThemeConfig.php @@ -0,0 +1,51 @@ +title = $title; + $this->description = $description; + $this->stylesheets = $stylesheets; + $this->javascripts = $javascripts; + $this->customStyles = $customStyles; + } + + public function title() + { + return $this->title; + } + + public function description() + { + return $this->description; + } + + public function stylesheets() + { + return $this->stylesheets; + } + + public function javascripts() + { + return $this->javascripts; + } + + public function customStyles() + { + return $this->customStyles; + } +} diff --git a/src/LIN3S/PatternLibraryBuilder/Controller/IndexController.php b/src/LIN3S/PatternLibraryBuilder/Controller/IndexController.php index 15d425c..d2f11f8 100644 --- a/src/LIN3S/PatternLibraryBuilder/Controller/IndexController.php +++ b/src/LIN3S/PatternLibraryBuilder/Controller/IndexController.php @@ -14,6 +14,7 @@ namespace LIN3S\PatternLibraryBuilder\Controller; use LIN3S\PatternLibraryBuilder\Config\ConfigLoader; +use LIN3S\PatternLibraryBuilder\Config\ThemeConfig; use LIN3S\PatternLibraryBuilder\Renderer\RendererRegistry; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; @@ -23,18 +24,21 @@ * @author Gorka Laucirica * @author Beñat Espiña */ -class IndexController +final class IndexController { private $loader; + private $themeConfig; private $rendererRegistry; private $twig; public function __construct( ConfigLoader $loader, + ThemeConfig $themeConfig, RendererRegistry $rendererRegistry, \Twig_Environment $twig ) { $this->loader = $loader; + $this->themeConfig = $themeConfig; $this->rendererRegistry = $rendererRegistry; $this->twig = $twig; } @@ -58,6 +62,11 @@ public function __invoke(Request $request, string $slug = '') : Response } return new Response($this->twig->render('@Lin3sPatternLibraryBuilder/pattern_library.html.twig', [ + 'title' => $this->themeConfig->title(), + 'description' => $this->themeConfig->description(), + 'stylesheets' => $this->themeConfig->stylesheets(), + 'javascripts' => $this->themeConfig->javascripts(), + 'custom_styles' => $this->themeConfig->customStyles(), 'menu' => $config->allInHierarchy(), 'breadcrumbs' => $this->generateBreadcrumbs($slug), 'content' => $content, diff --git a/src/LIN3S/PatternLibraryBuilder/Renderer/Twig.php b/src/LIN3S/PatternLibraryBuilder/Renderer/Twig.php index fc45aba..5e755ea 100644 --- a/src/LIN3S/PatternLibraryBuilder/Renderer/Twig.php +++ b/src/LIN3S/PatternLibraryBuilder/Renderer/Twig.php @@ -2,17 +2,21 @@ namespace LIN3S\PatternLibraryBuilder\Renderer; +use LIN3S\PatternLibraryBuilder\Config\ThemeConfig; use Symfony\Component\HttpFoundation\RequestStack; final class Twig implements Renderer { private $twig; private $request; + private $themeConfig; - public function __construct(\Twig_Environment $twig, RequestStack $requestStack) + public function __construct(\Twig_Environment $twig, RequestStack $requestStack, ThemeConfig $themeConfig) { $this->twig = $twig; $this->request = $requestStack->getMasterRequest(); + $this->requestStack = $requestStack; + $this->themeConfig = $themeConfig; } public function render($item) @@ -41,6 +45,9 @@ private function renderIFrame($media, $item, $paramsId) sprintf('@Lin3sPatternLibraryBuilder/pages/iframe/%s.html.twig', $media), [ 'item' => $item['config']['renderer']['options'], 'params_id' => $paramsId, + 'stylesheets' => $this->themeConfig->stylesheets(), + 'javascripts' => $this->themeConfig->javascripts(), + 'custom_styles' => $this->themeConfig->customStyles(), ] ); } diff --git a/src/LIN3S/PatternLibraryBuilder/Resources/assets/build/patternlibrary.css b/src/LIN3S/PatternLibraryBuilder/Resources/assets/build/patternlibrary.css index ad0d075..71bc94c 100644 --- a/src/LIN3S/PatternLibraryBuilder/Resources/assets/build/patternlibrary.css +++ b/src/LIN3S/PatternLibraryBuilder/Resources/assets/build/patternlibrary.css @@ -1 +1 @@ -code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{background-color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizelegibility}small{font-size:.7em}strong{font-weight:700}em{font-style:italic}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}textarea{resize:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}a{outline:0;text-decoration:none}img{display:inline-block;height:auto;-ms-interpolation-mode:bicubic;max-width:100%;vertical-align:middle}input:-webkit-autofill,input:-webkit-autofill::selection,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background:none;color:#000;-webkit-text-fill-color:#000;transition:background 5000s ease-in-out 0s}.plb-icon-plus{fill:#222;height:14px;width:14px}.plb-icon-plus--opened .plb-icon-plus__line--first{transform:rotate(180deg)}.plb-icon-plus--opened .plb-icon-plus__line--last{transform:rotate(270deg)}.plb-icon-plus__line{transform-origin:center center;transition:transform .2s ease-in-out}.plb-icons{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.plb-icons__icon{background-color:#fff;border:1px solid #eee;cursor:copy;margin-left:-1px;margin-top:-1px;position:relative;transition:background-color .2s ease-in-out;width:20%}.plb-icons__icon>svg{height:64px;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:64px}.plb-icons__icon:before{content:"";display:block;height:0;padding-bottom:100%;width:100%}.plb-icons__icon:hover,.plb-icons__icon:hover .plb-icons__icon-name{background-color:#eee}.plb-icons__icon:active{cursor:context-menu}.plb-icons__icon:active,.plb-icons__icon:active .plb-icons__icon-name{background-color:#d1d1d1}.plb-icons__icon-name{background-color:#fff;bottom:5px;display:block;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;left:50%;position:absolute;text-align:center;transform:translateX(-50%);transition:background-color .2s ease-in-out,color .2s ease-in-out;width:90%}@media (min-width:1024px){.plb-icons__icon{width:10%}}.plb-form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #d1d1d1;box-shadow:none;font-family:Open Sans,sans-serif;font-size:16px;font-weight:400;line-height:22px;padding:10px;transition:border-color .2s ease-in-out}.plb-form-input:active,.plb-form-input:focus{outline:none}.plb-form-input:focus{border:1px solid #09f}.plb-form-input::-webkit-input-placeholder{color:rgba(68,68,68,.8)}.plb-form-input:-ms-input-placeholder{color:rgba(68,68,68,.8)}.plb-form-input::placeholder{color:rgba(68,68,68,.8)}.plb-form-input--transparent{background:none;border:0}.plb-form-input--transparent:active,.plb-form-input--transparent:focus{border:0}.plb-form-label{color:#222;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;line-height:18px}.plb-form-label__required{color:#09f}@keyframes vertical-node-in{0%{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}.plb-accordion-item{color:#222;font-size:16px;font-weight:300;cursor:pointer;font-family:Open Sans,sans-serif;margin-top:-1px;position:relative;transition:background-color .2s ease-in-out}.plb-accordion-item:hover{color:#090909}.plb-accordion-item.plb-accordion-item--opened{background-color:#ececec}.plb-accordion-item .plb-accordion-item__header{border-bottom:1px solid #d1d1d1;border-top:1px solid #d1d1d1;padding:20px 30px}.plb-accordion-item .plb-link{color:#222;display:block;font-size:16px;font-weight:300;line-height:1rem}.plb-accordion-item .plb-link:hover{color:#090909}.plb-accordion-item .plb-accordion-item{color:#545454;font-size:14px;font-weight:300}.plb-accordion-item .plb-accordion-item:hover{color:#3b3b3b}.plb-accordion-item .plb-accordion-item.plb-accordion-item--opened{background-color:#f8fbfb}.plb-accordion-item .plb-accordion-item .plb-accordion-item__header{border-bottom:1px solid #e5e5e5;border-top:1px solid #e5e5e5;padding:20px 30px}.plb-accordion-item .plb-accordion-item .plb-link{color:#545454;display:block;font-size:14px;font-weight:300;line-height:1rem}.plb-accordion-item .plb-accordion-item .plb-link:hover{color:#3b3b3b}.plb-accordion-item .plb-accordion-item--leaf{color:#545454;font-size:15px;font-weight:400}.plb-accordion-item .plb-accordion-item--leaf:hover{color:#3b3b3b}.plb-accordion-item .plb-accordion-item--leaf.plb-accordion-item--opened{background-color:#fff}.plb-accordion-item .plb-accordion-item--leaf .plb-accordion-item__header{border-bottom:1px solid transparent;border-top:1px solid transparent;padding:15px 30px}.plb-accordion-item .plb-accordion-item--leaf .plb-link{color:#545454;display:block;font-size:15px;font-weight:400;line-height:1rem}.plb-accordion-item .plb-accordion-item--leaf .plb-link:hover{color:#3b3b3b}.plb-accordion-item .plb-accordion-item--leaf .plb-accordion-item__header{padding:0}.plb-accordion-item .plb-accordion-item--leaf .plb-link{padding:15px 30px}.plb-accordion-item--opened>.plb-accordion-item__content{animation:vertical-node-in .5s ease-in-out;display:block}.plb-accordion-item--opened>.plb-accordion-item__header .plb-icon-plus__line--first{transform:rotate(180deg)}.plb-accordion-item--opened>.plb-accordion-item__header .plb-icon-plus__line--last{transform:rotate(270deg)}.plb-accordion-item--opened>.plb-accordion-item__header:after{transform:scaleX(1)}.plb-accordion-item__header{position:relative;text-transform:capitalize}.plb-accordion-item__header .plb-icon-plus{height:14px;position:absolute;right:30px;top:20px;width:14px}.plb-accordion-item__header:after{background-color:#222;content:"";height:100%;left:0;position:absolute;top:0;transform:scaleX(0);transform-origin:left center;transition:transform .2s ease-in-out;width:2px}.plb-accordion-item__content{display:none}.plb-form-group .plb-form-label{display:block;margin-bottom:6px}.plb-link{display:inline-block;font-family:Open Sans,sans-serif;font-size:18px;font-weight:400;line-height:24px;transition:color .2s ease-in-out}.plb-preview{overflow-x:auto;overflow-y:hidden;position:relative}.plb-preview--mobile .plb-preview__iframe{height:640px;width:360px}.plb-preview--tablet_portrait .plb-preview__iframe{height:1024px;width:768px}.plb-preview--tablet_landscape .plb-preview__iframe{height:768px;width:1024px}.plb-preview--desktop .plb-preview__iframe{height:800px;width:1280px}.plb-preview__frame{pointer-events:none;position:absolute}.plb-status{display:block;font-family:Open Sans,sans-serif;font-size:8px;font-weight:700;letter-spacing:1px;line-height:8px;margin-bottom:5px;text-transform:uppercase}.plb-status--todo{color:#f14133}.plb-status--doing{color:#fba30a}.plb-status--pending-review{color:#16a5ba}.plb-status--done{color:#598d09}.plb-tabbed{margin-top:60px}.plb-tabbed__nav{margin-bottom:-1px;position:relative;z-index:10}.plb-tabbed__nav-list{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.plb-tabbed__nav-item{background-color:#fff;border-bottom:1px solid #d1d1d1;border-left:1px solid #d1d1d1;border-top:1px solid #d1d1d1;cursor:pointer;padding:12px 15px;position:relative;transition:background-color .2s ease-in-out}.plb-tabbed__nav-item .plb-icon{height:30px;width:30px}.plb-tabbed__nav-item:last-child{border-right:1px solid #d1d1d1}.plb-tabbed__nav-item:after{background-color:#222;content:"";height:2px;left:-1px;position:absolute;top:-1px;transform:scaleY(0);transition:transform .2s ease-in-out;width:calc(100% + 2px);z-index:10}.plb-tabbed__nav-item--active{background-color:#f8fbfb;border-bottom:1px solid #f8fbfb}.plb-tabbed__nav-item--active:after{transform:scaleY(1)}.plb-tabbed__content{background-color:#f8fbfb;border:1px solid #d1d1d1;padding:18px;position:relative;z-index:0}.plb-tabbed__tab{display:none}.plb-tabbed__tab--active{display:block;z-index:10}@media (min-width:1024px){.plb-tabbed__nav-item{padding:18px 40px}}.plb-article__breadcrumbs{color:#b6b6b6;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;margin-bottom:12px;text-transform:capitalize}.plb-article__breadcrumbs-separator{margin:0 3px}.plb-article__title{color:#222;font-family:Open Sans,sans-serif;font-size:36px;font-weight:700;line-height:36px;margin-bottom:20px;margin-top:0;text-transform:capitalize}.plb-article__description{color:#444;font-family:Open Sans,sans-serif;font-size:16px;font-weight:400;line-height:22px}code[class*=language-],pre[class*=language-]{font-size:12px}.plb-aside__header{background-color:#e1e1e1;color:#fff;font-family:Open Sans,sans-serif;font-size:16px;font-weight:700;line-height:22px;padding:30px}.plb-aside__header .plb-logo{height:auto;margin-bottom:10px;max-width:170px;width:100%}.plb-aside__content{overflow:hidden}.plb-aside__content .plb-finder__header{max-width:none;padding:34px 30px 30px;width:100%}@media (min-width:1024px){.plb-aside__content{padding:65px 0}}.plb-finder__header{max-width:400px;padding-bottom:40px;width:100%}.plb-finder__input{font-size:16px;width:100%}.plb-finder__subject{display:block}.plb-finder__subject--hidden{display:none}.plb-finder__tip{font-family:Open Sans,sans-serif;font-size:16px;margin-bottom:30px}.plb-main__aside{background-color:#e1e1e1;padding:0;width:100%}.plb-main__article{padding:60px 30px;width:100%}@media (min-width:1024px){.plb-main{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;min-height:100vh}.plb-main__aside{-ms-flex:1 1 25%;flex:1 1 25%;max-width:25%;padding-left:0;padding-right:0;width:100%}.plb-main__article{-ms-flex:1 1 75%;flex:1 1 75%;max-width:75%;padding-left:0;padding-right:0;width:100%;padding:80px 60px}}.plb-homepage__section{margin-top:30px}.plb-homepage__title{color:#09f;font-family:Open Sans,sans-serif;font-size:26px;font-weight:700}.plb-homepage__description{color:#222;margin-top:15px}.plb-homepage__items{-ms-flex-align:end;align-items:flex-end;display:-ms-grid;display:grid;grid-gap:30px;-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr);-ms-grid-rows:100px;grid-template-rows:100px;margin-top:15px}.plb-homepage__item-render{border-bottom:1px solid #b6b6b6;padding-bottom:10px;padding-top:10px}.plb-homepage__item-link{color:#b6b6b6;font-size:14px} \ No newline at end of file +code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{background-color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizelegibility}small{font-size:.7em}strong{font-weight:700}em{font-style:italic}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}textarea{resize:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}a{outline:0;text-decoration:none}img{display:inline-block;height:auto;-ms-interpolation-mode:bicubic;max-width:100%;vertical-align:middle}input:-webkit-autofill,input:-webkit-autofill::selection,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background:none;color:#000;-webkit-text-fill-color:#000;transition:background 5000s ease-in-out 0s}.plb-icon-plus{fill:var(--pbl-color-primary);height:14px;width:14px}.plb-icon-plus--opened .plb-icon-plus__line--first{transform:rotate(180deg)}.plb-icon-plus--opened .plb-icon-plus__line--last{transform:rotate(270deg)}.plb-icon-plus__line{transform-origin:center center;transition:transform .2s ease-in-out}.plb-icons{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.plb-icons__icon{background-color:#fff;border:1px solid #eee;cursor:copy;margin-left:-1px;margin-top:-1px;position:relative;transition:background-color .2s ease-in-out;width:20%}.plb-icons__icon>svg{height:64px;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:64px}.plb-icons__icon:before{content:"";display:block;height:0;padding-bottom:100%;width:100%}.plb-icons__icon:hover,.plb-icons__icon:hover .plb-icons__icon-name{background-color:#eee}.plb-icons__icon:active{cursor:context-menu}.plb-icons__icon:active,.plb-icons__icon:active .plb-icons__icon-name{background-color:#d1d1d1}.plb-icons__icon-name{background-color:#fff;bottom:5px;display:block;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;left:50%;position:absolute;text-align:center;transform:translateX(-50%);transition:background-color .2s ease-in-out,color .2s ease-in-out;width:90%}@media (min-width:1024px){.plb-icons__icon{width:10%}}.plb-form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #d1d1d1;box-shadow:none;font-family:Open Sans,sans-serif;font-size:16px;font-weight:400;line-height:22px;padding:10px;transition:border-color .2s ease-in-out}.plb-form-input:active,.plb-form-input:focus{outline:none}.plb-form-input:focus{border:1px solid var(--pbl-color-primary)}.plb-form-input::-webkit-input-placeholder{color:rgba(68,68,68,.8)}.plb-form-input:-ms-input-placeholder{color:rgba(68,68,68,.8)}.plb-form-input::placeholder{color:rgba(68,68,68,.8)}.plb-form-input--transparent{background:none;border:0}.plb-form-input--transparent:active,.plb-form-input--transparent:focus{border:0}.plb-form-label{color:#222;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;line-height:18px}.plb-form-label__required{color:var(--pbl-color-primary)}@keyframes vertical-node-in{0%{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}.plb-accordion-item{color:#222;font-size:16px;font-weight:300;cursor:pointer;font-family:Open Sans,sans-serif;margin-top:-1px;position:relative;transition:background-color .2s ease-in-out}.plb-accordion-item:hover{color:#090909}.plb-accordion-item.plb-accordion-item--opened{background-color:#ececec}.plb-accordion-item .plb-accordion-item__header{border-bottom:1px solid #d1d1d1;border-top:1px solid #d1d1d1;padding:20px 30px}.plb-accordion-item .plb-link{color:#222;display:block;font-size:16px;font-weight:300;line-height:1rem}.plb-accordion-item .plb-link:hover{color:#090909}.plb-accordion-item .plb-accordion-item{color:#545454;font-size:14px;font-weight:300}.plb-accordion-item .plb-accordion-item:hover{color:#3b3b3b}.plb-accordion-item .plb-accordion-item.plb-accordion-item--opened{background-color:#f8fbfb}.plb-accordion-item .plb-accordion-item .plb-accordion-item__header{border-bottom:1px solid #e5e5e5;border-top:1px solid #e5e5e5;padding:20px 30px}.plb-accordion-item .plb-accordion-item .plb-link{color:#545454;display:block;font-size:14px;font-weight:300;line-height:1rem}.plb-accordion-item .plb-accordion-item .plb-link:hover{color:#3b3b3b}.plb-accordion-item .plb-accordion-item--leaf{color:#545454;font-size:15px;font-weight:400}.plb-accordion-item .plb-accordion-item--leaf:hover{color:#3b3b3b}.plb-accordion-item .plb-accordion-item--leaf.plb-accordion-item--opened{background-color:#fff}.plb-accordion-item .plb-accordion-item--leaf .plb-accordion-item__header{border-bottom:1px solid transparent;border-top:1px solid transparent;padding:15px 30px}.plb-accordion-item .plb-accordion-item--leaf .plb-link{color:#545454;display:block;font-size:15px;font-weight:400;line-height:1rem}.plb-accordion-item .plb-accordion-item--leaf .plb-link:hover{color:#3b3b3b}.plb-accordion-item .plb-accordion-item--leaf .plb-accordion-item__header{padding:0}.plb-accordion-item .plb-accordion-item--leaf .plb-link{padding:15px 30px}.plb-accordion-item--opened>.plb-accordion-item__content{animation:vertical-node-in .5s ease-in-out;display:block}.plb-accordion-item--opened>.plb-accordion-item__header .plb-icon-plus__line--first{transform:rotate(180deg)}.plb-accordion-item--opened>.plb-accordion-item__header .plb-icon-plus__line--last{transform:rotate(270deg)}.plb-accordion-item--opened>.plb-accordion-item__header:after{transform:scaleX(1)}.plb-accordion-item__header{position:relative;text-transform:capitalize}.plb-accordion-item__header .plb-icon-plus{height:14px;position:absolute;right:30px;top:20px;width:14px}.plb-accordion-item__header:after{background-color:var(--pbl-color-primary);content:"";height:100%;left:0;position:absolute;top:0;transform:scaleX(0);transform-origin:left center;transition:transform .2s ease-in-out;width:2px}.plb-accordion-item__content{display:none}.plb-form-group .plb-form-label{display:block;margin-bottom:6px}.plb-link{display:inline-block;font-family:Open Sans,sans-serif;font-size:18px;font-weight:400;line-height:24px;transition:color .2s ease-in-out}.plb-preview{overflow-x:auto;overflow-y:hidden;position:relative}.plb-preview--mobile .plb-preview__iframe{height:640px;width:360px}.plb-preview--tablet_portrait .plb-preview__iframe{height:1024px;width:768px}.plb-preview--tablet_landscape .plb-preview__iframe{height:768px;width:1024px}.plb-preview--desktop .plb-preview__iframe{height:800px;width:1280px}.plb-preview__frame{pointer-events:none;position:absolute}.plb-status{display:block;font-family:Open Sans,sans-serif;font-size:8px;font-weight:700;letter-spacing:1px;line-height:8px;margin-bottom:5px;text-transform:uppercase}.plb-status--todo{color:#f14133}.plb-status--doing{color:#fba30a}.plb-status--pending-review{color:#16a5ba}.plb-status--done{color:#598d09}.plb-tabbed{margin-top:60px}.plb-tabbed__nav{margin-bottom:-1px;position:relative;z-index:10}.plb-tabbed__nav-list{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.plb-tabbed__nav-item{background-color:#fff;border-bottom:1px solid #d1d1d1;border-left:1px solid #d1d1d1;border-top:1px solid #d1d1d1;cursor:pointer;padding:12px 15px;position:relative;transition:background-color .2s ease-in-out}.plb-tabbed__nav-item .plb-icon{height:30px;width:30px}.plb-tabbed__nav-item:last-child{border-right:1px solid #d1d1d1}.plb-tabbed__nav-item:after{background-color:var(--pbl-color-primary);content:"";height:2px;left:-1px;position:absolute;top:-1px;transform:scaleY(0);transition:transform .2s ease-in-out;width:calc(100% + 2px);z-index:10}.plb-tabbed__nav-item--active{background-color:#f8fbfb;border-bottom:1px solid #f8fbfb}.plb-tabbed__nav-item--active:after{transform:scaleY(1)}.plb-tabbed__content{background-color:#f8fbfb;border:1px solid #d1d1d1;padding:18px;position:relative;z-index:0}.plb-tabbed__tab{display:none}.plb-tabbed__tab--active{display:block;z-index:10}@media (min-width:1024px){.plb-tabbed__nav-item{padding:18px 40px}}.plb-article__breadcrumbs{color:#b6b6b6;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;margin-bottom:12px;text-transform:capitalize}.plb-article__breadcrumbs-separator{margin:0 3px}.plb-article__title{color:var(--pbl-color-primary);font-family:Open Sans,sans-serif;font-size:36px;font-weight:700;line-height:36px;margin-bottom:20px;margin-top:0;text-transform:capitalize}.plb-article__description{color:#444;font-family:Open Sans,sans-serif;font-size:16px;font-weight:400;line-height:22px}code[class*=language-],pre[class*=language-]{font-size:12px}.plb-aside__header{background-color:var(--pbl-color-primary);color:#fff;font-family:Open Sans,sans-serif;font-size:16px;font-weight:700;line-height:22px;padding:30px}.plb-aside__header .plb-logo{height:auto;margin-bottom:10px;max-width:170px;width:100%}.plb-aside__content{overflow:hidden}.plb-aside__content .plb-finder__header{max-width:none;padding:34px 30px 30px;width:100%}@media (min-width:1024px){.plb-aside__content{padding:65px 0}}.plb-finder__header{max-width:400px;padding-bottom:40px;width:100%}.plb-finder__input{font-size:16px;width:100%}.plb-finder__subject{display:block}.plb-finder__subject--hidden{display:none}.plb-finder__tip{font-family:Open Sans,sans-serif;font-size:16px;margin-bottom:30px}.plb-main__aside{background-color:#e1e1e1;padding:0;width:100%}.plb-main__article{padding:60px 30px;width:100%}@media (min-width:1024px){.plb-main{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;min-height:100vh}.plb-main__aside{-ms-flex:1 1 25%;flex:1 1 25%;max-width:25%;padding-left:0;padding-right:0;width:100%}.plb-main__article{-ms-flex:1 1 75%;flex:1 1 75%;max-width:75%;padding-left:0;padding-right:0;width:100%;padding:80px 60px}}.plb-homepage__section{margin-top:30px}.plb-homepage__title{color:var(--pbl-color-primary);font-family:Open Sans,sans-serif;font-size:26px;font-weight:700}.plb-homepage__description{color:#222;margin-top:15px}.plb-homepage__items{-ms-flex-align:end;align-items:flex-end;display:-ms-grid;display:grid;grid-gap:30px;-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr);-ms-grid-rows:100px;grid-template-rows:100px;margin-top:15px}.plb-homepage__item-render{border-bottom:1px solid #b6b6b6;padding-bottom:10px;padding-top:10px}.plb-homepage__item-link{color:#b6b6b6;font-size:14px}:root{--pbl-color-primary:#222} \ No newline at end of file diff --git a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/_variables/_colors.scss b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/_variables/_colors.scss index fc4de8a..a508596 100644 --- a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/_variables/_colors.scss +++ b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/_variables/_colors.scss @@ -20,4 +20,4 @@ $color-emperor: #545454; $color-tundora: #444; $color-mine-shaft: #222; $color-black: #000; -$color-primary: #09f; +$color-primary: var(--pbl-color-primary); diff --git a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/components/_accordion-item.scss b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/components/_accordion-item.scss index 26e0334..4242502 100644 --- a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/components/_accordion-item.scss +++ b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/components/_accordion-item.scss @@ -30,7 +30,7 @@ $accordion-item-font-size: $font-size-16; $accordion-item-font-size-nested: $font-size-14; $accordion-item-font-size-leaf: $font-size-15; $accordion-item-indicator-transition: $transition-transform; -$accordion-item-indicator-background-color: $accordion-item-text-color; +$accordion-item-indicator-background-color: $color-primary; $accordion-item-transition: $transition-background-color; @mixin accordion-item( diff --git a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/components/_tabbed.scss b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/components/_tabbed.scss index 2aff584..dc4dc5a 100644 --- a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/components/_tabbed.scss +++ b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/components/_tabbed.scss @@ -18,7 +18,7 @@ $tab-content-background-color: $color-aqua-haze; $tab-border-color: $color-alto; $tab-transition: $transition-background-color; $tab-indicator-transition: $transition-transform; -$tab-indicator-background-color: $color-mine-shaft; +$tab-indicator-background-color: $color-primary; .plb-tabbed { margin-top: 60px; diff --git a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/index.scss b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/index.scss index 209031e..45b3325 100644 --- a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/index.scss +++ b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/index.scss @@ -9,6 +9,7 @@ // @author Gorka Laucirica // @author Mikel Tuesta + @import './../node_modules/prismjs/themes/prism-okaidia.css'; @import '_base/common'; @@ -33,3 +34,8 @@ @import 'layouts/main'; @import 'renderers/homepage'; + +//Default CSS Vars, can be override using configuration +:root { + --pbl-color-primary: $color-mine-shaft; +} diff --git a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_article.scss b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_article.scss index 1774695..15db6dd 100644 --- a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_article.scss +++ b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_article.scss @@ -21,7 +21,7 @@ $article-title-font-family: $font-family-open-sans; $article-title-font-size: $font-size-36; $article-title-font-weight: $font-weight-bold; $article-title-line-height: $article-title-font-size; -$article-title-text-color: $color-mine-shaft; +$article-title-text-color: $color-primary; $article-description-font-family: $font-family-open-sans; $article-description-font-size: $font-size-16; $article-description-font-weight: $font-weight-regular; diff --git a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_aside.scss b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_aside.scss index aa93d13..31b7cf8 100644 --- a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_aside.scss +++ b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_aside.scss @@ -14,7 +14,7 @@ @import './../_variables/transitions'; @import './../_variables/typography'; -$aside-header-background-color: $color-mercury; +$aside-header-background-color: $color-primary; $aside-header-font-family: $font-family-open-sans; $aside-header-font-size: $font-size-16; $aside-header-font-weight: $font-weight-bold; diff --git a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/svg/_icon-plus.scss b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/svg/_icon-plus.scss index 86e29c1..e399b92 100644 --- a/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/svg/_icon-plus.scss +++ b/src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/svg/_icon-plus.scss @@ -10,7 +10,7 @@ @import './../_variables/colors'; @import './../_variables/transitions'; -$icon-plus-color: $color-mine-shaft; +$icon-plus-color: $color-primary; $icon-plus-transition: $transition-transform; .plb-icon-plus { diff --git a/src/LIN3S/PatternLibraryBuilder/Resources/templates/pages/iframe.html.twig b/src/LIN3S/PatternLibraryBuilder/Resources/templates/pages/iframe.html.twig index 3d94e3a..f81a813 100644 --- a/src/LIN3S/PatternLibraryBuilder/Resources/templates/pages/iframe.html.twig +++ b/src/LIN3S/PatternLibraryBuilder/Resources/templates/pages/iframe.html.twig @@ -2,8 +2,16 @@ - - {% include '@Lin3sPatternLibraryBuilder/partials/stylesheets.html.twig' %} + {% block pattern_library_styles %} + + {% include '@Lin3sPatternLibraryBuilder/partials/custom_styles.html.twig' with custom_styles %} + {% endblock %} + + {% block app_styles %} + {% for stylesheet in stylesheets %} + + {% endfor %} + {% endblock %} diff --git a/src/LIN3S/PatternLibraryBuilder/Resources/templates/pattern_library.html.twig b/src/LIN3S/PatternLibraryBuilder/Resources/templates/pattern_library.html.twig index 35901d0..169f5af 100644 --- a/src/LIN3S/PatternLibraryBuilder/Resources/templates/pattern_library.html.twig +++ b/src/LIN3S/PatternLibraryBuilder/Resources/templates/pattern_library.html.twig @@ -12,11 +12,17 @@ - {% block head_styles %} + {% block pattern_library_styles %} - {% include '@Lin3sPatternLibraryBuilder/partials/stylesheets.html.twig' %} + {% include '@Lin3sPatternLibraryBuilder/partials/custom_styles.html.twig' with custom_styles %} {% endblock %} - + + {% block app_styles %} + {% for stylesheet in stylesheets %} + + {% endfor %} + {% endblock %} + {% endblock %} @@ -51,13 +57,15 @@ {% block footer %}{% endblock %} - {% block body_end_before_js %}{% endblock %} - -{% block foot_script %} - - {% include '@Lin3sPatternLibraryBuilder/partials/javascripts.html.twig' %} -{% endblock %} + {% block pattern_library_scripts %} + + {% endblock %} + {% block app_scripts %} + {% for javascript in javascripts %} + + {% endfor %} + {% endblock %} {% endblock %} diff --git a/src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Compiler/CustomizeThemePass.php b/src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Compiler/CustomizeThemePass.php deleted file mode 100644 index 084653d..0000000 --- a/src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Compiler/CustomizeThemePass.php +++ /dev/null @@ -1,149 +0,0 @@ - - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -declare(strict_types=1); - -namespace LIN3S\PatternLibraryBuilder\Symfony\DependencyInjection\Compiler; - -use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface; -use Symfony\Component\DependencyInjection\ContainerBuilder; - -/** - * @author Beñat Espiña - */ -class CustomizeThemePass implements CompilerPassInterface -{ - public function process(ContainerBuilder $container) - { - if (!$container->hasDefinition('twig')) { - return; - } - - $config = $container->getParameter('lin3s_pattern_library_builder.config'); - - $themeData = $config['theme']; - - $colorPrimary = $themeData['color_primary']; - $fontFamilyPrimary = $themeData['font_family_primary']; - $fontFamilySecondary = $themeData['font_family_secondary']; - $articleBackgroundColor = $themeData['article_background_color']; - $asideBackgroundColor = $themeData['aside_background_color']; - $asideHeaderBackgroundColor = $themeData['aside_header_background_color']; - $asideHeaderTextColor = $themeData['aside_header_text_color']; - $accordionItemLevel1TextColor = $themeData['accordion_item_level1_text_color']; - $accordionItemLevel1TextColorHover = $themeData['accordion_item_level1_text_color_hover']; - $accordionItemLevel1BackgroundColorOpened = $themeData['accordion_item_level1_background_color_opened']; - $accordionItemLevel1HeaderBorderColor = $themeData['accordion_item_level1_header_border_color']; - $accordionItemLevel2TextColor = $themeData['accordion_item_level2_text_color']; - $accordionItemLevel2TextColorHover = $themeData['accordion_item_level2_text_color_hover']; - $accordionItemLevel2BackgroundColorOpened = $themeData['accordion_item_level2_background_color_opened']; - $accordionItemLevel2HeaderBorderColor = $themeData['accordion_item_level2_header_border_color']; - $accordionItemLevel3TextColor = $themeData['accordion_item_level3_text_color']; - $accordionItemLevel3TextColorHover = $themeData['accordion_item_level3_text_color_hover']; - $accordionItemLevel3BackgroundColor = $themeData['accordion_item_level3_background_color']; - $statusTextColorTodo = $themeData['status_text_color_todo']; - $statusTextColorDoing = $themeData['status_text_color_doing']; - $statusTextColorPendingReview = $themeData['status_text_color_pending_review']; - $statusTextColorDone = $themeData['status_text_color_done']; - $tabbedBackgroundColor = $themeData['tabbed_background_color']; - $tabbedBorderColor = $themeData['tabbed_border_color']; - $tabbedContentBackgroundColor = $themeData['tabbed_content_background_color']; - $tabbedContentBorderColor = $themeData['tabbed_content_border_color']; - $breadcrumbsTextColor = $themeData['breadcrumbs_text_color']; - $titleTextColor = $themeData['title_text_color']; - $descriptionTextColor = $themeData['description_text_color']; - $formInputBorderColor = $themeData['form_input_border_color']; - $formInputBorderColorHover = $themeData['form_input_border_color_hover']; - $formLabelTextColor = $themeData['form_label_text_color']; - $iconFillColor = $themeData['icon_fill_color']; - - $theme = sprintf( - self::THEME, - $asideBackgroundColor, - $articleBackgroundColor, - $asideHeaderBackgroundColor, - $asideHeaderTextColor, - $fontFamilyPrimary, - $accordionItemLevel1TextColor, - $fontFamilyPrimary, - $accordionItemLevel1TextColorHover, - $accordionItemLevel1BackgroundColorOpened, - $accordionItemLevel1HeaderBorderColor, - $accordionItemLevel1HeaderBorderColor, - $accordionItemLevel1TextColor, - $accordionItemLevel1TextColorHover, - $accordionItemLevel2TextColor, - $accordionItemLevel2TextColorHover, - $accordionItemLevel2BackgroundColorOpened, - $accordionItemLevel2HeaderBorderColor, - $accordionItemLevel2HeaderBorderColor, - $accordionItemLevel2TextColor, - $accordionItemLevel2TextColorHover, - $accordionItemLevel3TextColor, - $accordionItemLevel3TextColorHover, - $accordionItemLevel3BackgroundColor, - $accordionItemLevel3TextColor, - $fontFamilySecondary, - $accordionItemLevel3TextColorHover, - $colorPrimary, - $fontFamilySecondary, - $statusTextColorTodo, - $statusTextColorDoing, - $statusTextColorPendingReview, - $statusTextColorDone, - $tabbedBackgroundColor, - $tabbedBorderColor, - $tabbedBorderColor, - $tabbedBorderColor, - $tabbedBorderColor, - $colorPrimary, - $tabbedContentBackgroundColor, - $tabbedContentBackgroundColor, - $tabbedContentBackgroundColor, - $tabbedContentBorderColor, - $breadcrumbsTextColor, - $fontFamilyPrimary, - $titleTextColor, - $fontFamilyPrimary, - $descriptionTextColor, - $fontFamilySecondary, - $fontFamilySecondary, - $formInputBorderColor, - $fontFamilySecondary, - $formInputBorderColorHover, - $formLabelTextColor, - $fontFamilyPrimary, - $colorPrimary, - $fontFamilySecondary, - $iconFillColor - ); - - $container->getDefinition('twig')->addMethodCall('addGlobal', ['theme_styles', $theme]); - } - - const THEME = '.plb-main__aside{background-color:%s} - .plb-main__article{background-color:%s} - .plb-aside__header{background-color:%s;color:%s;font-family:%s} - .plb-accordion-item{color:%s;font-family:%s}.plb-accordion-item:hover{color:%s}.plb-accordion-item.plb-accordion-item--opened{background-color:%s}.plb-accordion-item .plb-accordion-item__header{border-bottom-color:%s;border-top-color:%s}.plb-accordion-item .plb-link {color:%s}.plb-accordion-item .plb-link:hover{color:%s} - .plb-accordion-item .plb-accordion-item{color:%s}.plb-accordion-item .plb-accordion-item:hover{color:%s}.plb-accordion-item .plb-accordion-item.plb-accordion-item--opened{background-color:%s}.plb-accordion-item .plb-accordion-item .plb-accordion-item__header{border-bottom-color:%s;border-top-color:%s}.plb-accordion-item .plb-accordion-item .plb-link{color:%s}.plb-accordion-item .plb-accordion-item .plb-link:hover{color:%s} - .plb-accordion-item .plb-accordion-item--leaf{color:%s}.plb-accordion-item .plb-accordion-item--leaf:hover{color:%s}.plb-accordion-item .plb-accordion-item--leaf.plb-accordion-item--opened{background-color:%s}.plb-accordion-item .plb-accordion-item--leaf .plb-link{color:%s;font-family:%s}.plb-accordion-item .plb-accordion-item--leaf .plb-link:hover{color:%s} - .plb-accordion-item__header:after{background-color:%s} - .plb-status{font-family:%s}.plb-status--todo{color:%s}.plb-status--doing{color:%s}.plb-status--pending-review{color:%s}.plb-status--done{color:%s} - .plb-tabbed__nav-item{background-color:%s;border-bottom-color:%s;border-top-color:%s;border-left-color:%s}.plb-tabbed__nav-item:last-child{border-right-color:%s}.plb-tabbed__nav-item:after{background-color:%s}.plb-tabbed__nav-item--active{background-color:%s;border-bottom-color:%s}.plb-tabbed__content{background-color:%s;border-color:%s} - .plb-article__breadcrumbs{color:%s;font-family:%s} - .plb-article__title{color:%s;font-family:%s} - .plb-article__description{color:%s;font-family:%s} - .plb-finder__tip{font-family:%s} - .plb-form-input{border-color:%s;font-family:%s}.plb-form-input:focus{border-color:%s} - .plb-form-label{color:%s;font-family:%s}.plb-form-label__required{color:%s} - .plb-link {font-family:%s} - .plb-icon-plus{fill:%s}'; -} diff --git a/src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Compiler/AddConfigurationValuesToGlobalTwigVariablesPass.php b/src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Compiler/LoadThemeConfigPass.php similarity index 58% rename from src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Compiler/AddConfigurationValuesToGlobalTwigVariablesPass.php rename to src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Compiler/LoadThemeConfigPass.php index 2e8cca1..bb84247 100644 --- a/src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Compiler/AddConfigurationValuesToGlobalTwigVariablesPass.php +++ b/src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Compiler/LoadThemeConfigPass.php @@ -17,9 +17,9 @@ use Symfony\Component\DependencyInjection\ContainerBuilder; /** - * @author Beñat Espiña + * @author Gorka Laucirica */ -class AddConfigurationValuesToGlobalTwigVariablesPass implements CompilerPassInterface +class LoadThemeConfigPass implements CompilerPassInterface { public function process(ContainerBuilder $container) { @@ -29,8 +29,11 @@ public function process(ContainerBuilder $container) $config = $container->getParameter('lin3s_pattern_library_builder.config'); - $container->getDefinition('twig') - ->addMethodCall('addGlobal', ['title', $config['title']]) - ->addMethodCall('addGlobal', ['description', $config['description']]); + $container->getDefinition('lin3s.pattern_library_builder.config.theme') + ->replaceArgument(0, $config['theme']['title']) + ->replaceArgument(1, $config['theme']['description']) + ->replaceArgument(2, $config['theme']['stylesheets']) + ->replaceArgument(3, $config['theme']['javascripts']) + ->replaceArgument(4, $config['theme']['custom_styles']); } } diff --git a/src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Configuration.php b/src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Configuration.php index 3564a32..41ce76e 100644 --- a/src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Configuration.php +++ b/src/LIN3S/PatternLibraryBuilder/Symfony/DependencyInjection/Configuration.php @@ -19,6 +19,7 @@ /** * @author Beñat Espiña + * @author Gorka Laucirica */ class Configuration implements ConfigurationInterface { @@ -26,20 +27,33 @@ public function getConfigTreeBuilder() { $treeBuilder = new TreeBuilder(); - $themeArrayNode = new ArrayNodeDefinition('theme'); + $themeArrayNode = new ArrayNodeDefinition('custom_styles'); $treeBuilder->root('lin3s_pattern_library_builder') ->children() - ->scalarNode('title') - ->isRequired() - ->end() - ->scalarNode('description') - ->defaultValue('') + ->arrayNode('theme') + ->children() + ->scalarNode('title') + ->isRequired() + ->end() + ->scalarNode('description') + ->defaultValue('') + ->end() + ->arrayNode('stylesheets') + ->prototype('scalar')->end() + ->defaultValue([]) + ->end() + ->arrayNode('javascripts') + ->prototype('scalar')->end() + ->defaultValue([]) + ->end() + ->append($this->themeProperties($themeArrayNode)) + ->end() ->end() + ->scalarNode('templates_config_files_path') ->isRequired() ->end() - ->append($this->themeProperties($themeArrayNode)) ->end(); return $treeBuilder; @@ -63,37 +77,5 @@ private function themeProperties(ArrayNodeDefinition $themeNode) : ArrayNodeDefi const THEME_PROPERTIES = [ 'color_primary', - 'font_family_primary', - 'font_family_secondary', - 'article_background_color', - 'aside_background_color', - 'aside_header_background_color', - 'aside_header_text_color', - 'accordion_item_level1_text_color', - 'accordion_item_level1_text_color_hover', - 'accordion_item_level1_background_color_opened', - 'accordion_item_level1_header_border_color', - 'accordion_item_level2_text_color', - 'accordion_item_level2_text_color_hover', - 'accordion_item_level2_background_color_opened', - 'accordion_item_level2_header_border_color', - 'accordion_item_level3_text_color', - 'accordion_item_level3_text_color_hover', - 'accordion_item_level3_background_color', - 'status_text_color_todo', - 'status_text_color_doing', - 'status_text_color_pending_review', - 'status_text_color_done', - 'tabbed_background_color', - 'tabbed_border_color', - 'tabbed_content_background_color', - 'tabbed_content_border_color', - 'breadcrumbs_text_color', - 'title_text_color', - 'description_text_color', - 'form_input_border_color', - 'form_input_border_color_hover', - 'form_label_text_color', - 'icon_fill_color', ]; } diff --git a/src/LIN3S/PatternLibraryBuilder/Symfony/Lin3sPatternLibraryBuilderBundle.php b/src/LIN3S/PatternLibraryBuilder/Symfony/Lin3sPatternLibraryBuilderBundle.php index e9d8440..815bb17 100644 --- a/src/LIN3S/PatternLibraryBuilder/Symfony/Lin3sPatternLibraryBuilderBundle.php +++ b/src/LIN3S/PatternLibraryBuilder/Symfony/Lin3sPatternLibraryBuilderBundle.php @@ -13,7 +13,7 @@ namespace LIN3S\PatternLibraryBuilder\Symfony; -use LIN3S\PatternLibraryBuilder\Symfony\DependencyInjection\Compiler\AddConfigurationValuesToGlobalTwigVariablesPass; +use LIN3S\PatternLibraryBuilder\Symfony\DependencyInjection\Compiler\LoadThemeConfigPass; use LIN3S\PatternLibraryBuilder\Symfony\DependencyInjection\Compiler\CustomizeThemePass; use LIN3S\PatternLibraryBuilder\Symfony\DependencyInjection\Compiler\LoadRenderersPass; use LIN3S\PatternLibraryBuilder\Symfony\DependencyInjection\Compiler\SetTemplatesConfigFilesPathPass; @@ -22,6 +22,7 @@ /** * @author Beñat Espiña + * @author Gorka Laucirica */ class Lin3sPatternLibraryBuilderBundle extends Bundle { @@ -36,9 +37,8 @@ public function build(ContainerBuilder $container) : void ], ]); - $container->addCompilerPass(new AddConfigurationValuesToGlobalTwigVariablesPass()); + $container->addCompilerPass(new LoadThemeConfigPass()); $container->addCompilerPass(new SetTemplatesConfigFilesPathPass()); - $container->addCompilerPass(new CustomizeThemePass()); $container->addCompilerPass(new LoadRenderersPass()); } diff --git a/src/LIN3S/PatternLibraryBuilder/Symfony/Resources/config/services.xml b/src/LIN3S/PatternLibraryBuilder/Symfony/Resources/config/services.xml index 81fec48..93a3e8d 100644 --- a/src/LIN3S/PatternLibraryBuilder/Symfony/Resources/config/services.xml +++ b/src/LIN3S/PatternLibraryBuilder/Symfony/Resources/config/services.xml @@ -20,6 +20,7 @@ + @@ -42,6 +43,16 @@ null + + null + null + [] + [] + [] + + @@ -70,6 +81,7 @@ class="LIN3S\PatternLibraryBuilder\Renderer\Twig"> + diff --git a/tests/Application/app/AppKernel.php b/tests/Application/app/AppKernel.php index b797bed..40d5145 100644 --- a/tests/Application/app/AppKernel.php +++ b/tests/Application/app/AppKernel.php @@ -26,6 +26,7 @@ /** * @author Beñat Espiña + * @author Gorka Laucirica */ class AppKernel extends Kernel { @@ -71,44 +72,15 @@ protected function configureContainer(ContainerBuilder $container, LoaderInterfa __DIR__ . '/../templates' => '__main__', ], ])->loadFromExtension('lin3s_pattern_library_builder', [ - 'title' => 'Test pattern library', - 'description' => 'This is the testing purposes pattern library', - 'templates_config_files_path' => __DIR__ . '/../src/App/Resources/PatternLibrary', - 'theme' => [ - 'color_primary' => '#0099ff', - 'font_family_primary' => 'Open Sans', - 'font_family_secondary' => 'Roboto', - 'article_background_color' => '#fefefe', - 'aside_background_color' => '#e1e1e1', - 'aside_header_background_color' => '#0099ff', - 'aside_header_text_color' => '#fff', - 'accordion_item_level1_text_color' => '#333', - 'accordion_item_level1_text_color_hover' => '#545454', - 'accordion_item_level1_background_color_opened' => '#ececec', - 'accordion_item_level1_header_border_color' => '#d1d1d1', - 'accordion_item_level2_text_color' => '#666', - 'accordion_item_level2_text_color_hover' => '#999', - 'accordion_item_level2_background_color_opened' => '#f8fbfb', - 'accordion_item_level2_header_border_color' => '#e5e5e5', - 'accordion_item_level3_text_color' => '#999', - 'accordion_item_level3_text_color_hover' => '#a3a3a3', - 'accordion_item_level3_background_color' => '#fff', - 'status_text_color_todo' => '#f14133', - 'status_text_color_doing' => '#fba30a', - 'status_text_color_pending_review' => '#16a5ba', - 'status_text_color_done' => '#598d09', - 'tabbed_background_color' => '', - 'tabbed_border_color' => '', - 'tabbed_content_background_color' => '', - 'tabbed_content_border_color' => '', - 'breadcrumbs_text_color' => '#b6b6b6', - 'title_text_color' => '#0099ff', - 'description_text_color' => '#444', - 'form_input_border_color' => '#b0b0b0', - 'form_input_border_color_hover' => '#0099ff', - 'form_label_text_color' => '#444', - 'icon_fill_color' => '#0099ff', + 'theme' => [ + 'title' => 'LIN3S', + 'description' => 'Pattern Library Builder', + 'custom_styles' => [ + 'color_primary' => '#222', + ] ], + 'templates_config_files_path' => __DIR__ . '/../src/App/Resources/PatternLibrary', + ]); } diff --git a/tests/spec/LIN3S/PatternLibraryBuilder/Config/ThemeConfigSpec.php b/tests/spec/LIN3S/PatternLibraryBuilder/Config/ThemeConfigSpec.php new file mode 100644 index 0000000..aaef55f --- /dev/null +++ b/tests/spec/LIN3S/PatternLibraryBuilder/Config/ThemeConfigSpec.php @@ -0,0 +1,22 @@ +beConstructedWith('Title', 'Description', ['app.css'], ['app.js'], ['primary_color' => 'black']); + + $this->shouldHaveType(ThemeConfig::class); + + $this->title()->shouldReturn('Title'); + $this->description()->shouldReturn('Description'); + $this->stylesheets()->shouldReturn(['app.css']); + $this->javascripts()->shouldReturn(['app.js']); + $this->customStyles()->shouldReturn(['primary_color' => 'black']); + } +}