Nebular 4.0 migration questions and support

nnixaa commented 5 years ago

This issue is created to collect and discuss the most common question during migration to Nebular 4.0.

Ungolim commented 5 years ago

@nnixaa

with Angular 8 stable released, would you suggest waiting for the release of Nebular 4 stable as well, if starting a new project (within a week)?
Nebular 4 seems to bring visual changes to components (as well as an upgrade, or overhaul, of the theming system); if so, when can we expect an updated live documentation to reflect all these changes?

nnixaa commented 5 years ago

@RicardoVaranda what version of Nebular are you on? Seems as 3.5.0, which is not related to this issue. If so, please open a new issue, I would appreciate a more detailed description of your env (angular, nebular versions at least).

nnixaa commented 5 years ago

@lepidotteri

yes, I would totally suggest starting with Nebular 4 and Angular 8.
We will be releasing rc.7 version later today and updating the next version of the docs, so the new docs and changes will be available there We expect Nebular 4 stable next Monday.

RicardoVaranda commented 5 years ago

@nnixaa You're right I was trying to use 3.5 with Angular 8. After switching to rc version it's now fixed :)

RicardoVaranda commented 5 years ago

Hi @nnixaa , Sorry not sure this is the best place to ask but I'm currently trying to use the corporate color scheme on the new 4.0 but it does not seem to apply.

On ngx-admin corporate theme has a nav bar of color: #111218 where as when I try to apply the corporate theme it has a background of #fff.

I've follow the docs on the theming but I'm aware that they have changed in 4.0 so just want to confirm that I'm still doing them the correct way.

Theme.scss:

// import Nebular Theme System and the default theme
@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/corporate';

// and change the variables you need, 
// or simply leave the map empty to use the default values
// let's make it blue-ish instead of the default white color
$nb-enabled-themes: (corporate);

$nb-themes: nb-register-theme((
      // app wise variables for each theme
  sidebar-header-gap: 2rem,
  sidebar-header-height: initial,
  layout-content-width: 1400px,
  font-main: Roboto,
  font-secondary: Exo,
  switcher-background: #2b2d34,
  switcher-background-percentage: 14%,
  drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
  list-item-border-width: 1px,
  slide-out-container-width: 30%,
  slide-out-background:     linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
  slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
  slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
  chart-panel-summary-box-shadow: none,
  chart-panel-summary-background-color: #f7fafb,
  chart-panel-summary-border-color: #ebeff1,
  chart-panel-summary-border-width: 1px,
  ecommerce-card-border-width: 1px,
  progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),

  ), corporate, corporate); // let's leave it as default

Style scss:

// this is your created themes.scss file, make sure the path to the file is correct
@import 'theme';

// framework component styles which will use your new theme
@import '~@nebular/theme/styles/globals';

// install the framework
@include nb-install() {
  @include nb-theme-global();
};

App module:

@NgModule({
  declarations: [... ],
  imports: [
...
    NbThemeModule.forRoot({ name: 'corporate' }),
    NbLayoutModule,
...
  ],

app-component:

<nb-layout>
  <nb-layout-header>
    <div class="header-container">
      <div class="logo-containter">
        <a href="#" class="navigation"><i class="nb-menu"></i></a>
        <div class="logo">ngx-<span>admin</span></div>
      </div>
    </div>
  </nb-layout-header>
  <nb-layout-footer></nb-layout-footer>
  <nb-layout-column></nb-layout-column>
</nb-layout>

nnixaa commented 5 years ago

@RicardoVaranda try following https://akveo.github.io/nebular/next, these are the docs for the new 4.0 version.

Btw, we have just release rc.7.

RicardoVaranda commented 5 years ago

Thanks @nnixaa The differences I'm seeing in color seem to be due to the theme variables are now defined as different shades. Out of curiosity, do you guys have a timeline as to when ngx-admin will be updated to the latest version?

P.S Great work on this amazing theme <3

nnixaa commented 5 years ago

Out of curiosity, do you guys have a timeline as to when ngx-admin will be updated to the latest version?

We hope to update it upcoming 2 weeks.

ugodelafosse commented 5 years ago

Hi, I would like to ask if it is still possible to use FontAwesome icons in components such as tabs and menus ? I updated to version 4.0.0 but now components are not recognizing "fas fa-icon" in their parameters and it throws an error. I tried to put fontAwesome as default pack instead of nebular-icons but it's not working as well...

Thanks.

nnixaa commented 5 years ago

Hi, I would like to ask if it is still possible to use FontAwesome icons in components such as tabs and menus ? I updated to version 4.0.0 but now components are not recognizing "fas fa-icon" in their parameters and it throws an error. I tried to put fontAwesome as default pack instead of nebular-icons but it's not working as well...

Thanks.

Answered here https://github.com/akveo/nebular/issues/1579

ugodelafosse commented 5 years ago

Thanks !

alfredott commented 5 years ago

Hello,

I'm migrating my app from Nebular 3.1 to Nebular 4. Thanks for your migration doc, I'm almost done with the migration. (FYI, we're using a custom theme.)

However, I've got a problem with the old layout-bg CSS variable in version 3.x, which became layout-background-color in version 4.

As I understand, in 3.x it was a background: ... property, and it became a background-color: .... We use a linear-gradient CSS property, which is not compatible with the latter way.

I didn't see anything about it in the migration docs, what is your opinion about that ?

Thanks in advance, Bye !

Edit : I think some properties of the "header" component also changed. (header-bg --> header-background-color). Do you have a more complete list of all changes ?

Ungolim commented 5 years ago

Hello,

I'm migrating my app from Nebular 3.1 to Nebular 4. Thanks for your migration doc, I'm almost done with the migration. (FYI, we're using a custom theme.)

However, I've got a problem with the old layout-bg CSS variable in version 3.x, which became layout-background-color in version 4.

As I understand, in 3.x it was a background: ... property, and it became a background-color: .... We use a linear-gradient CSS property, which is not compatible with the latter way.

I didn't see anything about it in the migration docs, what is your opinion about that ?

Thanks in advance, Bye !

Edit : I think some properties of the "header" component also changed. (header-bg --> header-background-color). Do you have a more complete list of all changes ?

Same issue, if this was changed intentionally then it would be completely unacceptable

nnixaa commented 5 years ago

Same issue, if this was changed intentionally then it would be completely unacceptable

Unfortunately, this is a limitation for now, but it has a very quick fix: In your styles.scss:

@include nb-install() {

  nb-layout .layout {
    background-image: ...;
  }

  @include nb-theme-global();
};

alfredott commented 5 years ago

Thanks for the quick fix, and thanks for taking the feature request into account.

Bye !

alfredott commented 5 years ago

Hi, I would like to ask if it is still possible to use FontAwesome icons in components such as tabs and menus ? I updated to version 4.0.0 but now components are not recognizing "fas fa-icon" in their parameters and it throws an error. I tried to put fontAwesome as default pack instead of nebular-icons but it's not working as well...

Thanks.

Hello, I'm facing a similar problem. I managed to use font-awesome icons in my menu, with the packClass: 'fas' parameter of NbIconLibraries.registerFontPack, but then, how can I use NbIconLibraries to use different icon packs in my menu ? (e.g. font-awesome and nebular)

For now, if I try and use a nebular icon with defaultPack being font-awesome, the nebular one gets the fas class and isn't rendered. On the opposite, if I set nebular as my defaultPack, the font-awesome icon doesn't have the fas class and isn't rendered either.

Thanks in advance, Bye !

KennBro commented 5 years ago

Same issue, if this was changed intentionally then it would be completely unacceptable

Unfortunately, this is a limitation for now, but it has a very quick fix: In your styles.scss:
@include nb-install() {

  nb-layout .layout {
    background-image: ...;
  }

  @include nb-theme-global();
};

|

Same issue, if this was changed intentionally then it would be completely unacceptable

Unfortunately, this is a limitation for now, but it has a very quick fix: In your styles.scss:
@include nb-install() {

  nb-layout .layout {
    background-image: ...;
  }

  @include nb-theme-global();
};

When I use this quick fix, I get the following error

@include nb-theme-global(); ^ Undefined mixin. ╷ 9 │ @include nb-theme-global(); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src/app/@theme/styles/themes.scss 9:3 @content node_modules/@nebular/theme/styles/core/theming/_install.scss 149:7 @content node_modules/@nebular/theme/styles/core/theming/_install.scss 135:7 nb-install-global-with-scss-vars() node_modules/@nebular/theme/styles/core/theming/_install.scss 148:5 nb-install() src/app/@theme/styles/themes.scss 7:1 @import stdin 4:9 root stylesheet

akveo / nebular

Nebular 4.0 migration questions and support #1524