Skip to content
This repository has been archived by the owner on Aug 18, 2020. It is now read-only.

Girish sarbhukan feat/modal component updated #361

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Girish sarbhukan feat/modal component updated #361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
253324d
feat(modal-component-updated): implemented modal dialog component
Feb 21, 2019
7b8dd60
feat(button-componen-updated): incorporated code review comments from…
Feb 26, 2019
55f4015
feat(modal-component-updated): removed extra spaces from css
Mar 3, 2019
0a0c4d7
whatever
andrewleyva Mar 19, 2019
eabd223
feat(modal): adding snaps for modals
andrewleyva Mar 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added snaps/ref/Modal-default-line-modal-d-chrome.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified snaps/ref/Modal-default-modal-dialog-chrome.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed snaps/ref/Modal-full-screen-modal-di-chrome.png
View file
Open in desktop
Binary file not shown.
Binary file added snaps/ref/Modal-modal-with-confirmat-chrome.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added snaps/ref/Modal-modal-with-infosucce-chrome.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
207 changes: 195 additions & 12 deletions src/components/suir/Modal.examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,217 @@
const Modal = require('semantic-ui-react').Modal;
const Header = require('semantic-ui-react').Header;
const Button = require('semantic-ui-react').Button;
const Icon = require('semantic-ui-react').Icon;

<Modal trigger={<Button>Show Modal</Button>} closeIcon='close'>
<Modal.Header>Select a Photo</Modal.Header>
<div>
<Modal size={'tiny'} trigger={<Button>Small Modal</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'noBorder'}><Icon className='ei icon_info_alt' size='large' />This is a small modal size</Modal.Header>
<Modal.Content>
<Modal.Description>
<Header>Default Profile Image</Header>
<p>We've found the following gravatar image associated with your e-mail address.</p>
<p>Is it okay to use this photo?</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'noBorder'}>
<Button positive>OK</Button>
</Modal.Actions>
</Modal>

<Modal size={'small'} trigger={<Button>Medium Modal</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'noBorder'}><Icon className='ei icon_info_alt' size='large' />This is a medium modal size</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>Your computer has a low battery, so you should act immediatly to keep from loosing your work. Do you want save your work now?</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'noBorder'}>
<Button negative>Cancel</Button>
<Button positive>OK</Button>
</Modal.Actions>
</Modal>

<Modal size={'large'} trigger={<Button>Large Modal</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'noBorder'}><Icon className='ei icon_info_alt' size='large' />This is a large modal size</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>To restore enough memory for programs to work correctly. Save your files and then close or restart all open programs. Your battery is running low. Do you want to restart your computer now?</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'noBorder'}>
<Button negative>Cancel</Button>
<Button positive>OK</Button>
</Modal.Actions>
</Modal>
</div>
```

#### Full screen modal dialog with close button
#### Default Line modal dialog with close button

```jsx
const Modal = require('semantic-ui-react').Modal;
const Header = require('semantic-ui-react').Header;
const Button = require('semantic-ui-react').Button;
const Icon = require('semantic-ui-react').Icon;
<div>
<Modal size={'tiny'} trigger={<Button>Small Modal</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'border'}><Icon className='ei icon_info_alt' size='large' />This is a small modal size</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'border'}>
<Button positive>OK</Button>
</Modal.Actions>
</Modal>

<Modal size='fullscreen' trigger={<Button>Show Modal</Button>} closeIcon='close'>
<Modal.Header>Select a Photo</Modal.Header>
<Modal size={'small'} trigger={<Button>Medium Modal</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'border'}><Icon className='ei icon_info_alt' size='large' />This is a medium modal size</Modal.Header>
<Modal.Content>
<Modal.Description>
<Header>Default Profile Image</Header>
<p>We've found the following gravatar image associated with your e-mail address.</p>
<p>Is it okay to use this photo?</p>
<p>Your computer has a low battery, so you should act immediatly to keep from loosing your work. Do you want save your work now?</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'border'}>
<Button negative>Cancel</Button>
<Button positive>OK</Button>
</Modal.Actions>
</Modal>
```

<Modal size={'large'} trigger={<Button>Large Modal</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'border'}><Icon className='ei icon_info_alt' size='large' />This is a large modal size</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>To restore enough memory for programs to work correctly. Save your files and then close or restart all open programs. Your battery is running low. Do you want to restart your computer now?</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'border'}>
<Button negative>Cancel</Button>
<Button positive>OK</Button>
</Modal.Actions>
</Modal>
</div>
```

#### Modal with Info,Success,Warning & Error dialog

```jsx
const Modal = require('semantic-ui-react').Modal;
const Header = require('semantic-ui-react').Header;
const Button = require('semantic-ui-react').Button;
const Icon = require('semantic-ui-react').Icon;

<div>
<Modal size={'small'} trigger={<Button>Information message</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'noBorder'}><Icon className='ei icon_info_alt' size='large' />This is a information message</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>Your computer has a low battery, so you should act immediatly to keep from loosing your work. Do you want save your work now?</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'noBorder'}>
<Button positive>OK</Button>
</Modal.Actions>
</Modal>

<Modal size={'small'} trigger={<Button>Success message</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'noBorder success'}><Icon className='ei icon_check_alt2' size='large' />This is a success message</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>You have successfully read this important imformation. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'noBorder'}>
<Button positive>OK</Button>
</Modal.Actions>

</Modal>

<Modal size={'small'} trigger={<Button>Warning message</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'noBorder warning'}><Icon className='ei icon_error-triangle_alt' size='large' />This is a medium modal size</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>Your account will get locked for security purposes due to excessive consecutive failed logins.</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'noBorder'}>
<Button positive>OK</Button>
</Modal.Actions>
</Modal>

<Modal size={'small'} trigger={<Button>Error message</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'noBorder error'}><Icon className='ei icon_error-circle_alt' size='large' />This is a error message</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>The operation timed-out before this asset was fully scanned. Aww yeah, you successfully read this important error message.</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'noBorder'}>
<Button positive>OK</Button>
</Modal.Actions>
</Modal>
</div>
```


#### Modal with Confirmation dialog

```jsx
const Modal = require('semantic-ui-react').Modal;
const Header = require('semantic-ui-react').Header;
const Button = require('semantic-ui-react').Button;
const Icon = require('semantic-ui-react').Icon;

<div>
<Modal size={'small'} trigger={<Button>System problems</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'noBorder'}><Icon className='ei icon_info_alt' size='large' />System problems</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>The operating system, hardware device, network, or program has failed or is not in the state required to perform a task.</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'noBorder'}>
<Button negative>Try again</Button>
<Button positive>OK</Button>
</Modal.Actions>
</Modal>

<Modal size={'small'} trigger={<Button>Success message</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'noBorder success'}><Icon className='ei icon_check_alt2' size='large' />Your application is updated.</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>Your computer was restarted to finish installing updates. Click to see which updates were installed.</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'noBorder'}>
<Button negative>Show Summary</Button>
<Button positive>Close</Button>
</Modal.Actions>
</Modal>

<Modal size={'small'} trigger={<Button>Warning message</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'noBorder warning'}><Icon className='ei icon_error-triangle_alt' size='large' />Do you want to uninstall the Support files?</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>Microsoft SQL Server 2005 Tools Express Edition is dependent on these files. If you unistall them, this product will be broken. You can prevent damage from happening by uninstalling the product first.</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'noBorder'}>
<Button negative>Uninstall</Button>
<Button positive>Cancel</Button>
</Modal.Actions>
</Modal>

<Modal size={'small'} trigger={<Button>Error message</Button>} closeIcon={(<i className="ei icon_close close"></i>)}>
<Modal.Header className={'noBorder error'}><Icon className='ei icon_error-circle_alt' size='large' />You don’t have access to perform this task</Modal.Header>
<Modal.Content>
<Modal.Description>
<p>To perform this task, contact the administrator.</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions className={'noBorder'}>
<Button negative>Retry</Button>
<Button positive>Close</Button>
</Modal.Actions>
</Modal>
</div>
```
44 changes: 44 additions & 0 deletions src/semantic-ui-theme/themes/tripwire/modules/modal.overrides
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,48 @@
.ui.modal > .close {
top: @innerCloseTop;
right: @innerCloseRight;
color:@closeColor;
}

.ui.modals .header.border {
border-bottom: 2px solid #979797;
padding-bottom:10px;
margin-bottom:10px;
}

.ui.modals .header.success {
color:#3f9c35;
}

.ui.modals .header.warning {
color:#ff9e2c;
}

.ui.modals .header.error {
color:#c0382b;
}

.ui.modals .actions.border {
border-top: 2px solid #979797;
padding-top:10px;
}

.ui.modal > .content {
color: #4a4a4a;
}

.ui.modals .noBorder {
border:none;
}

.ui.modals .header i.large.icon {
font-size:40px
}

.ui.small.modal > .header:not(.ui) {
font-size: 24px;
}

.ui.tiny.modal, .ui.small.modal, .ui.large.modal {
margin:0 auto;
}
22 changes: 12 additions & 10 deletions src/semantic-ui-theme/themes/tripwire/modules/modal.variables
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@

/* Close Icon */
@closeOpacity: 0.8;
@closeSize: 1.25em;
@closeColor: @white;
@closeSize: 30px;
@closeColor: #4a4a4a;

@closeHitbox: 2.25rem;
@closeDistance: 0.25rem;
Expand All @@ -27,22 +27,24 @@
/* Header */
@headerMargin: 0em;
@headerVerticalPadding: 1.25rem;
@headerHorizontalPadding: 1.5rem;
@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
@headerBackground: @blue;
@headerColor: @white;
@headerFontSize: @huge;
@headerHorizontalPadding: 20px;
@headerPadding: 31px 15px 2px @headerHorizontalPadding ;
@headerBackground: @white;
@headerColor: @blue;
@headerFontSize: 24px;
@headerBoxShadow: none;
@headerFontWeight: bold;
@headerFontFamily: @headerFont;
@headerBorder: 1px solid @borderColor;

/* Content */
@contentFontSize: 1em;
@contentPadding: 1.5rem;
@contentFontSize: 16px;
@contentPadding: 0 20px 29px 71px;
@contentLineHeight: 1.4;
@contentBackground: #FFFFFF;



/* Image / Description */
@imageWidth: '';
@imageIconSize: 8rem;
Expand All @@ -56,7 +58,7 @@
/* Modal Actions */
@actionBorder: 1px solid @borderColor;
@actionBackground: @offWhite;
@actionPadding: 1rem 1rem;
@actionPadding: 10px 10px 30px;
@actionAlign: right;

@buttonDistance: 0.75em;
Expand Down