nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Color swatch updates

Browse Source
This commit is contained in:
MyNameIsBatman 2021-09-16 10:07:33 -03:00
parent 24e0619278
commit 3539d0e6bf
8 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/groups/views/creator/GroupCreatorView.scss
View File

@ -69,8 +69,8 @@
} }
.creator-tab { .creator-tab {
height: 230px; height: 260px;
min-height: 230px; min-height: 260px;
max-height: 230px; max-height: 260px;
} }
} }

6
src/views/groups/views/manager/GroupManagerView.scss
View File

@ -2,8 +2,8 @@
width: 385px; width: 385px;
.manager-tab { .manager-tab {
height: 230px; height: 260px;
min-height: 230px; min-height: 260px;
max-height: 230px; max-height: 260px;
} }
} }

13
src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.scss
View File

@ -3,11 +3,14 @@
position: relative; position: relative;
border-radius: $border-radius; border-radius: $border-radius;
width: 16px; width: 16px;
height: 12px; height: 16px;
background: $white; background: $white;
border: 2px solid $white;
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
&.active { &.active {
background: $primary; background: $primary;
box-shadow: none;
} }
} }
@ -15,7 +18,13 @@
position: relative; position: relative;
border-radius: $border-radius; border-radius: $border-radius;
width: 16px; width: 16px;
height: 12px; height: 16px;
border: 2px solid $white;
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
&.active {
box-shadow: none;
}
} }
.selection-list { .selection-list {

2
src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.tsx
View File

@ -113,7 +113,7 @@ export const GroupSharedTabBadgeView: FC<GroupSharedTabBadgeViewProps> = props =
<div className="row row-cols-8 g-0 gap-1 w-100 h-100 overflow-auto"> <div className="row row-cols-8 g-0 gap-1 w-100 h-100 overflow-auto">
{ badgePartColors && badgePartColors.map((item, index) => { badgePartColors && badgePartColors.map((item, index) =>
{ {
return <div key={ index } className="color-swatch cursor-pointer" style={{ backgroundColor: '#' + item.color }} onClick={ () => selectPartProperty('color', item.id) }></div> return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': item.id === getCurrentPart('color') }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectPartProperty('color', item.id) }></div>
}) } }) }
</div> </div>
</div> </div>

8
src/views/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.scss
View File

@ -4,6 +4,12 @@
position: relative; position: relative;
border-radius: $border-radius; border-radius: $border-radius;
width: 15px; width: 15px;
height: 12px; height: 15px;
border: 2px solid $white;
box-shadow: inset 2px 2px rgba(0, 0, 0, .2);
&.active {
box-shadow: none;
}
} }
} }

5
src/views/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.tsx
View File

@ -1,3 +1,4 @@
import classNames from 'classnames';
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../../api'; import { LocalizeText } from '../../../../../api';
import { useGroupsContext } from '../../../context/GroupsContext'; import { useGroupsContext } from '../../../context/GroupsContext';
@ -64,7 +65,7 @@ export const GroupSharedTabColorsView: FC<{}> = props =>
<div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto"> <div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto">
{ groupColorsA && groupColorsA.map((item, index) => { groupColorsA && groupColorsA.map((item, index) =>
{ {
return <div key={ index } className="color-swatch cursor-pointer" style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div> return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': groupColors[selectingColorIndex] === item.id }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
}) } }) }
</div> </div>
<div><i className="fas fa-chevron-right h2 m-0 text-primary cursor-pointer" onClick={ () => setSelectingColorIndex(1) } /></div> <div><i className="fas fa-chevron-right h2 m-0 text-primary cursor-pointer" onClick={ () => setSelectingColorIndex(1) } /></div>
@ -77,7 +78,7 @@ export const GroupSharedTabColorsView: FC<{}> = props =>
<div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto"> <div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto">
{ groupColorsB && groupColorsB.map((item, index) => { groupColorsB && groupColorsB.map((item, index) =>
{ {
return <div key={ index } className="color-swatch cursor-pointer" style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div> return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': groupColors[selectingColorIndex] === item.id }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
}) } }) }
</div> </div>
</div> </div>

6
src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
View File

@ -9,5 +9,11 @@
.color-swatch { .color-swatch {
height: 30px; height: 30px;
border: 2px solid $white;
box-shadow: inset 3px 3px rgba(0, 0, 0, .2);
&.active {
box-shadow: none;
}
} }
} }

3
src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
View File

@ -1,4 +1,5 @@
import { NitroEvent } from '@nitrots/nitro-renderer'; import { NitroEvent } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import ReactSlider from 'react-slider'; import ReactSlider from 'react-slider';
import { ColorUtils, GetConfiguration, LocalizeText, RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetUpdateDimmerEvent, RoomWidgetUpdateDimmerStateEvent } from '../../../../../api'; import { ColorUtils, GetConfiguration, LocalizeText, RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetUpdateDimmerEvent, RoomWidgetUpdateDimmerStateEvent } from '../../../../../api';
@ -175,7 +176,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
<div className="d-flex gap-2"> <div className="d-flex gap-2">
{ AVAILABLE_COLORS.map((color, index) => { AVAILABLE_COLORS.map((color, index) =>
{ {
return <div key={ index } className="rounded w-100 color-swatch cursor-pointer" onClick={ () => setSelectedColor(color) } style={{ backgroundColor: HTML_COLORS[index] }}></div>; return <div key={ index } className={ 'color-swatch rounded w-100 cursor-pointer' + classNames({ ' active': color === selectedColor }) } onClick={ () => setSelectedColor(color) } style={{ backgroundColor: HTML_COLORS[index] }}></div>;
}) } }) }
</div> } </div> }
</div> </div>